HTML4 [HTML] input을 활용한 메뉴 탭 만들기 input 활용 input 태그는 값을 입력받기 위한 태그로 주로 form과 짝을 지어 쓰는 경우가 많지만 input과 label을 활용하여 탭처럼 활용할 수도 있다. checked 속성을 활용한 내용 변환 radio의 특징은 여러개 중 1개 밖에 선택 할 수 없는 것이고 이것을 활용하여 checked 되어 있는 태그만 활성화하고 나머지는 숨겨 두는 방식으로 실습을 진행해 본다. 소스 코드 아래 같은 방법을 사용하기 위해선 같은 부모 태그에 있어야 한다. input name을 똑같이 하지 않으면 checked가 중첩이된다. html - inputlabel.html 1번 상자 2번 상자 3번 상자 1번 활성화 2번 활성화 3번 활성화 css - inputlabel.css .wrap { width: 100%.. 2023. 3. 7. [HTML] TABLE 태그 사용하여 입사지원서 만들기 TABLE 태그 table 태그는 표를 간편하게 만들기 위해 사용 하는 태그로 웹페이지에 표를 쉽고 빠르게 만들수 있게 해준다. 간단하게 작성한 코드를 보며 이해해보자. 소스 코드 col 태그는 테이블에서 가로를 의미하며 가로폭을 100px로 고정 tr 태그는 세로를 의미하며 border: 1px solid black 속성은 표의 테두리를 꾸미기 위한 속성으로 1px의 solid 타입의 검은색 테두리를 나타내줌 th 태그는 헤더 셀로 내용 작성시 굵은 폰트와 가운데 정렬 되는 것이 특징 td 태그는 데이터 셀로 일반적인 데이터를 작성할때 사용 번호 이름 주소 1 2 3 1 2 3 1 2 3 결과 colspan, rowspan을 활용한 표 작성 위에 작성한 표처럼 하나당 하나의 셀만 가능하게 표현이 되지만.. 2023. 2. 28. [HTML] A태그와 IMG태그를 활용하여 LIST 실습 리스트 만들기 리스트를 만들기 위해서 사용하는 주로 사용하는 태그는 ol, ul 태그가 있다. 각자 내용은 비슷 하지만 실습을 통해 어떻게 다른지 알아보자. 소스 코드 첫번째 두번째 세번째 첫번째 두번째 세번째 결과 A 태그를 활용한 실습 위와 같이 간단하고 빠르게 리스트를 만들 수 있으며 a 태그를 활용하여 간단한 실습을 진행해보자. 소스 코드 href 속성에 경로(url)를 입력하여 각 페이지로 이동하게 설정 네이버로 이동 구글로 이동 다음으로 이동 결과 IMG 태그를 활용한 실습 리스트 img 태그를 사용하여 여러가지 항목을 간편하게 정리 할 수 있다. 소스 코드 src 속성에 이미지가 저장되있는 경로를 입력하여 이미지를 불러옴 (외부 이미지도 불러 올 수 있음) alt 속성은 이미지의 경로가 잘못.. 2023. 2. 28. [HTML] 태그 및 VScode 단축키 정리 사용자 설정 운영체제 : MacOS 사용 프로그램 : Visual Studio Code - 다운로드 경로 : https://code.visualstudio.com/ 확장 리소스 : Korean Language Pack for Visaul Studio Code, Live Server HTML은 hyper text markup language의 줄인말로 웹페이지를 만들기 위해 개발된 마크업 언어이다. vscode를 사용하여 실습을 진행 하였고 실습을 토대로 단축키와 태그를 정리하였다. Korean Language Pack for Visaul Studio Code는 vscode 한국어 팩이며 Live Server는 코드가 변할때 웹페이지를 새로고침하지 않고 저장할때 마다 실시간으로 변경사항을 적용해준다. 단축.. 2023. 2. 27. 이전 1 다음
