2025.03.10

HTML

HTML 개요

웹 페이지를 작성하는데 사용되는 표준 마크업 언어
웹 페이지의 구조와 컨텐츠를 정의

• vscode에서 alt+l+o 하면 브라우저 열림
• vscode에서 빈화면에 !5 / html5을 누르면 기본 빈화면이 자동입력됨.
• html 문서를 해석하여 사용자에게 시각적으로 표시
• 요소(element)라고 불리는 태그(tag)를 사용하여 텍스트, 이미지, 링크, 리스트, 테이블 등 다양한 종류의 컨텐츠를 구성
  

HTML 구성요소

• 태그(Tag) : <>으로 묶인 명령어
  시작태그<태그>와 종료태그</태그>를 한쌍으로 이용
• 요소(Element) : 시작태그와 종료태그로 이루어진 모든 명령어, 하나의 HTML문서는 요서들의 집합
• 속성(Attribute) : 요소의 시작태그에만 사용, 명령어 구체화 역할
  여러 개의 속성을 사용할 수 있으며 속성의 구분은 공백
• 변수/속성값(Argument) : 속성이 가지는 값, 값 입력 시 "",'' 이용

HTML 구조

• !DOCTYPE html : 문서가 HTML5임을 선언
• html : 문서의 시작과 끝
• head : 문서의 메타데이터, 제목, 외부 스크립트 및 시트와 같은 정보 포함
• body : 웹 페이지의 실제 컨텐츠를 포함

HTML 주의사항

• 태그는 대소문자를 구분하지 않으며, 소문자를 권장
• 시작 태그로 시작하면 반드시 종료 태그로 종료를 한다.
• 파일 확장자는 반드시 html로 설정
• 문자의 공백은 한 개만 인식, 공백을 추가하기 위해서 특수기호& nbsp를 이용

글자 관련 태그

제목

<h?></h?>

• 제목을 입력할 때 사용하는 태그
• 폰트의 크기가 태그에 따라 정해져있다.
• h 태그 뒤 숫자로 구분
• 번호가 증가할 수록 크기가 작아진다.
• h1,h2,...h6

단락과 줄바꿈

br /br

• 문장을 줄 바꾸기(개행)할 때 사용하는 태그

hr

• 페이지에 가로로 밑줄을 만들어 줄 때 사용하는 태그

밑줄(수평)과 출력

p /p

• 한 개의 단락을 만들 때 사용하는 태그

pre /pre

• 입력한 그대로 출력할 때 사용하는 태그

글자 형태 관련

• strong /strong, b /b : 문장에서 문자를 강조하여 굵게 표시할 경우 사용하는 태그
• em /em, i /i : 문장에 기울임을 주는 태그
• blockquote /blockquote, q /q : 다른 블로그나 사이트의 글을 인용할 경우 사용하는 태그
• mark /mark : 배경 부분이 형광펜처럼 노랑색으로 되게 할 경우 사용하는 태그
• u /u : 해당 범위에 수평으로 줄을 표시하는 태그
• small /small : 원 문자보다 작은 글씨로 표현하는 태그
• sub /sub : 아래 첨자를 표시할 때 사용하는 태그
• sup /sup : 윗 첨자를 표시할 때 사용하는 태그
• s /s : 취소선을 표시하기 위해 사용하는 태그
• abbr /abbr : 약자표시와 함께 마우스가 문자에 있으면 설명이 출력되게 하는 태그
• code /code : 컴퓨터 코드 인식을 위한 태그로 pre태그 내부에 작성하는 태그
• kbd /kbd : 키보드 입력이나 음성 명령 같은 입력 내용 작성하는 태그
• cite /cite : 웹 문서나 포스트에서 참고할 때 사용하는 태그

목록 관련 태그

목록 관련

ul /ul

• 순서가 필요하지 않은 목록 만들 때 사용
• 리스트 앞에 특정 모양이 출력(circl, disc, square)
• CSS를 이용하여 모양을 수정할 수 있다.

ol /ol

• 순서가 있는 목록 만들 때 사용
• 속성으로 알파벳, 숫자, 로마숫자 설정
• CSS로 순서를 설정 가능
• ol 안에 reversed="reversed"를 넣으면 역순으로 목록이 생성됨
  

dl /dl

• 용어나 문장에 대한 정의(definition) 리스트
• dd : 설정 자동으로 들여쓰기
  

표관련 태그

기본

table /table

• 웹 문서에서 자료를 정리할 때 자주 사용하는 태그
• 행과 열로 이루어져 있고, 행과 열이 만나는 지점을 셀이라고 한다.
• table 안에 border="1"을 넣으면 두께가 1인 테두리를 만든다.

tr /tr

• 한 개의 행(row)을 만드는데 사용하는 태그

td /td

• 한 개의 열을 만드는데 사용하는 태그, 표의 일반 셀을 나타내는 태그
  

그 외 관련 태그

th /th

• 열에 대한 제목을 표시하는 태그
• 중앙 정렬 및 굵게 표시 됨

caption /caption

• 테이블의 제목이나 내용을 추가하는 태그
• 다른 태그를 이용하거나 Text를 꾸밀 수 있음
• 기본 위치는 테이블 위 중앙에 배치

속성

table /table

thead /thead

• 테이블 구조를 나누는 태그, 테이블에 한 개만 존재 가능, 제일 상단 제목느낌

tbody /tbody

• 테이블 구조를 나누는 태그, 테이블에 여러 존재 가능, 중간 내용 느낌

tfoot /tfoot

• 테이블 구조를 나누는 태그 thead 뒤에 있어야 하며 한 개만 존재 가능, 제일 하단
  

영역 관련 태그

영역 관련

div /div

• block 요소로 공간을 수직으로 분할할 때 사용하는 태그

span /span

• inline 요소로 공간을 수평으로 분할할 때 사용하는 태그
  

이미지 관련 태그

이미지 관련

img/

웹 페이지에 사진이나 그림을 삽입할 때 사용하는 태그

• 닫기 태그를 사용하지 않음
• src : 삽입할 이미지 경로를 지정하는 속성, 경로 잘못 지정 되면 이미지 출력 불가능
• alt : 이미지 설명해 주는 텍스트 속성
• width, height : 이미지의 크기를 설정하는 속성
  - 고정크기 단위 : 화면 사이즈가 줄어도 크기가 변하지 않음,width, height을 px 픽셀 단위로 설정
  • 가변 크기 단위 : 화면 사이즈 혹은 기준이 사이즈에 따라 크기가 변경,width, height을 % 퍼센트로 설정

웹 페이지에서 이미지 태그로 사용 가능한 확장자

• GIF : 파일 크기가 작아 아이콘이나 블릿 기호에 많이 사용됨, 투명한 배경이나 움직이는 이미지 만들 수 있음
• JPG/JPEG : 사진을 위해 개발 되었으며 저장을 반복하다 보면 화질이 떨어질 수 있음
• PNG : 네트워크용으로 개발되어 요즘 많이 사용

map area map

• 이미지에 구역을 나누어 링크 설정을 할 때 사용하는 태그

미디어 관련 태그

미디어 관련

audio /audio

• 웹 브라우저에서 플러그인의 도움 없이 음악을 재생할 수 있게 만들어 주는 태그
  
• video /video : 웹 브라우저에서 플러그인의 도움 없이 영상을 재생할 수 있게 만들어 주는 태그
• audio 안에 loop="loop"를 넣으면 끝까지 재생 되어도 다시 재생됨

하이퍼링크 관련 태그

하이퍼링크 관련

a /a

페이지에서 해당 부분을 클릭하면 지정된 페이지로 이동하는 태그
외부 사이트 연결, 문서 내부에서 이동가능

• href : 링그한 페이지의 id 값이나 사이트 주소 지정
  • img 태그를 이용해서 링크를 걸 수 있다.
• target : 링크 페이지가 표시될 위치(새장, 현재창) 지정
  - _self : 기존 탭 활용
  • _blank : 새 탭으로 열기
• download : 링크한 페이지를 표시하지 않고 다운로드 하는 것
• rel : 현재 페이지와의 관계 지정
• type : 페이지의 파일 유형 지정
• a 태그로 이동하고자 하는 태그에 id 속성값을 부여한다.(표식)
  - href에 #id속성값 을 넣으면 문서 내부에서 이동가능하다.

폼 관련 태그

폼 관련

form /form

사용자가 입력한 data를 보내는 방식과 처리 할 프로그램을 정하는 태그

• action 속성: 폼의 입력된 값들을 전송받을 서버의 클래스명을 입력
• method 속성: get / post 방식으로 전송 방식을 지정
  - get방식 : url 주소에 form태그를 통해 넘어가는 데이터가 보임
  -post방식 : url 주소에 form태그를 통해 넘어가는 데이터가 보이지 않음

fieldset /fieldset, legend /legend

폼 요소를 그룹으로 묶는 태그, 묶는 폼 요소에 명칭을 붙이는 태그

• name : fieldset의 이름 지정
• form : fieldset이 속한 form의 이름 지정
  

input

사용자로 부터 data를 입력 받기 위한 태그

• required : input 요소에서 값을 반드시 입력하도록 하는 속성, 값을 입력하지 않으면 폼을 제출할 수 없음
  input태그의 type 속성 값 모음
  

• textarea : input type="text"와 비슷하지만 여러 줄을 입력할 수 있고 세로로 input태그와 달리 크기조절이 가능하다.
  - css 속성인 resize로 크기 조절을 고정할 수도 있고 범위를 벗어나면 스크롤 바가 생긴다.

select /select

• select : 드롭다운 메뉴를 만드는 태그
• option : 드롭다운 메뉴 항목 생성가능
• optgroup : 드롭다운 메뉴 항목을 그룹화 할 수 있고, selected 속성을 사용하여 기본으로 선택된 항목을 설정
  - multiple : 다중 선택이 가smd
  - size: listbox의 크기를 지정