HTML syntax map
한 줄을 나누면 태그, 요소, 속성이 보인다
HTML 문법은 이름을 외우는 문제가 아니라, 브라우저가 어디서 시작하고 무엇을 내용으로 읽는지 분리하는 연습이다.
Tag
<p>처럼 꺾쇠로 감싼 표시
Element
시작 태그, 내용, 종료 태그를 묶은 단위
Attribute
시작 태그 안에서 의미를 보강하는 값
코드 조각으로 보는 구조
예시
<a href="/about">소개 보기</a>
시작 태그
<a
어떤 요소인지 이름을 먼저 정한다.
속성
href="/about"
링크 목적지처럼 추가 정보를 붙인다.
콘텐츠
>소개 보기
사용자가 화면에서 읽는 내용을 넣는다.
종료 태그
</a>
내용이 끝나는 지점을 브라우저에 알려준다.
문법 단위 점검 매트릭스
| 단위 | 형태 | 읽는 기준 | 예외 |
|---|---|---|---|
| 태그 | <h1> |
콘텐츠의 역할을 이름으로 표시한다 | 종료 태그만 따로 의미를 갖지는 않는다 |
| 요소 | <p>내용</p> |
시작, 내용, 종료가 하나의 덩어리다 | 빈 태그는 내용 영역이 없다 |
| 속성 | alt="로고" |
시작 태그 안에서 세부 정보를 준다 | 값은 따옴표로 감싸는 습관을 둔다 |
| 빈 태그 | <img> <br> |
콘텐츠 없이 자체 기능을 수행한다 | HTML5에서는 보통 종료 태그를 쓰지 않는다 |
짝 확인
종료 태그가 필요한 요소는 시작과 끝을 맞춘다.
값 확인
속성명, 등호, 따옴표가 한 묶음으로 있는지 본다.
흐름 확인
블록은 줄을 만들고 인라인은 문장 속에 놓인다.