head 태그
- 문서 메타 정보를 담는 영역이다. 문서 자체를 설명하거나 눈에 보이지 않는 설정(브라우저/검색엔진용 정보 등)을 저장한다.
body 태그
- 문서 출력 정보를 담는 영역이다. 브라우저가 실제로 화면에 출력하는 모든 내용(텍스트, 이미지, 동영상 등)은 전부 이 안에 작성한다.
공백 문자 처리 방식
- 브라우저는 소스의 공백 문자를 그대로 출력하지 않고 규칙에 따라 처리한다. 스페이스, 탭, 개행 문자를 모두 공백으로 취급하며, 연속된 1개 이상의 공백(종류 구분 없음)은 최종적으로 스페이스 1개로 치환되어 출력된다.
공백을 원하는 모습으로 출력하는 방법
- 스페이스를 여러 칸 유지하려면 엔티티를 사용한다. 대표적으로 는 non-breaking space라서 공백이 줄어들지 않는다. 탭을 그대로 출력하는 전용 기능은 HTML에 없다. 줄바꿈을 출력하려면 <br> 태그를 사용한다.
HTML/XML 관점 메모
- HTML 수업은 마크업 언어(ML) 문법과 구조를 배우는 성격이 강하다. 구조를 만들고 의미를 부여하는 방식이 핵심이다.
학생 정보 저장 예시(이름, 나이, 주소)
- student.txt(CSV)는 구조는 있으나 의미는 약하다. student.xml은 구조도 있고 태그로 의미도 담을 수 있다.
HTML 구성 요소
-
태그(Tag), 요소(Element). 속성(Attribute). 텍스트(PCDATA). 주석(Comment). 선언문(Declaration). 엔티티(Entity). 외부 요소 등.
-
태그(Tag) / 요소(Element)
<>로 둘러싼 표현 단위다. 문서의 골격(레이아웃)을 만들거나 데이터를 화면에 출력한다. 태그마다 역할이 달라서 출력 결과나 기능, 의미가 달라진다. -
HTML 태그 표현 방식
내용이 있는 태그는 <태그명>내용물</태그명> 형태의 쌍태그다(시작 태그와 끝 태그). 내용이 없는 태그는 <태그명>, <태그명 />, <태그명></태그명>처럼 단독/빈 태그로 표현한다. -
태그 내용물의 형식(Content Type)
자식 태그만 올 수 있는 형태가 있다(문자열 불가). PCDATA는 문자열만 올 수 있다(자식 태그 불가). Empty는 아무것도 가지지 않는다. Mixed는 태그와 문자열을 함께 가질 수 있으며 대부분의 HTML 태그가 혼합형에 가깝다. -
속성(Attribute)
태그가 가지는 데이터로, 태그의 성질을 표현한다. 표기는 <시작태그 속성명="값"></끝태그>, <단독태그 속성명="값">처럼 쓴다. 속성은 여러 개를 가질 수 있고 속성 간 순서는 의미가 없다. 값은 큰따옴표나 작은따옴표로 감싸는 방식이 일반적으로 허용된다. -
텍스트(PCDATA)
태그가 가지는 문자열 데이터로 화면에 출력된다. 텍스트는 파싱 대상이라 문법 규칙의 영향을 받는다.
head 안에서 자주 쓰는 태그
- meta는 페이지와 관련된 여러 정보를 담는다. title은 문서 제목이며 브라우저 탭/타이틀바에 표시되고, 검색 결과 제목 및 북마크 제목으로도 사용된다.
body 관련 메모(속성)
- bgcolor는 문서 배경색, background는 문서 배경 이미지 설정에 사용될 수 있다(현대에선 보통 CSS로 처리).
HTML 색상 표현
- 색상명(Named Color)은 미리 정의된 색상명을 사용한다. RGB는 #RRGGBB 형태의 16진수로 표현하며 #000000은 검정, #FFFFFF는 흰색이다. #FF0000 빨강, #00FF00 초록, #0000FF 파랑, #FFFF00 노랑, #FF00FF 보라(마젠타). #FF0처럼 축약 표기도 가능하다.
자원 경로(URL) 표현
- 상대 경로는 .(현재 폴더), ..(부모 폴더) 기준으로 작성한다. 절대 경로는 /로 시작하며 웹 루트(컨텍스트 루트) 기준으로 해석된다. 로컬 경로(C:...)는 일반적으로 브라우저에서 사용하지 않는다. 외부 경로는 http://, https://로 시작하며 비용 절감 장점이 있지만 자원 관리가 어렵다.
Heading 태그(h1~h6)
- 제목 태그로 h1부터 h6까지 있다. 검색 엔진 수집 대상이며, 서식보다 의미(시맨틱)가 중요하다. align 속성으로 left, center, right, justify 정렬을 지정할 수 있다.
