업데이트 21.03.22
HTML 기본 문법
HTML의 기본 문법은 아주 간단하다.
**<Tag> Contents </Tag> **위와 같은 형식으로 쓰임새에 맞게 태그만 바꿔주면 된다.
앞쪽 태그가 열린 태그라 불리며, 뒷쪽 태그가 닫힌 태그라고 불린다.
또한, 태그 안에 태그를 사용할 수 있어 부모 요소와 자식 요소로 나뉘게 된다.
<Tag1>
<Tag2> Contents </Tag2>
</Tag1> Tag1이 부모 요소로 불리고 Tag2가 자식 요소로 불린다.
이때 여러 줄로 작성할 경우 들여쓰기, 내어쓰기를 통해 요소 간 구분을 해야한다.
만약, 부모 요소의 부모 요소가 있다면 그것을 조상(상위) 요소라 부르며
반대로 자식 요소의 자식 요소가 있다면 그것을 후손(하위) 요소라 부른다.
<Tag1>
<Tag2>
<Tag3> Contents <Tag3>
</Tag2>
</Tag1>위의 예제를 기준으로,
Tag1이 Tag3의 조상(상위) 요소가 되며
Tag3이 Tag1의 후손(하위) 요소가 된다.
HTML에는 간단한 문법을 보조해줄 속성과 값이 존재한다.
<Tag Attr="Value"> Contents </Tag>위와 같은 형태로 속성과 값을 사용할 수 있으며, 대표적인 예제로 img 태그가 있다.
<img src="./example.jpg" alt="예제" />근데 img 태그가 뭔가 이상하지 않은가?
열린 태그-닫힌 태그가 한 쌍으로 존재했었는데, img 태그는 열린 태그가 없다.
이러한 태그들을 우리는 '빈 태그(Empty Tag)' 라고 부른다.
빈 태그의 형태는 열린 태그, 닫힌 태그 둘 다 사용 가능하지만
HTML5 규격에서는 항상 빈 태그를 사용할 때 닫힌 태그를 사용하라고 권장한다.
그 이유는 엄격한 HTML 검사 시 태그가 닫혀있지 않으면 오류가 발생할 수 있기 때문이다.
이에 우리는 가급적 빈 태그 사용 시 닫힌 태그를 사용하는 습관을 길러야 한다.
인라인 요소 vs 블록 요소
HTML의 요소(태그)는 인라인 요소와 블록 요소로 나눌 수 있다.
인라인 요소란 글자를 만들기 위한 요소로, 포함한 콘텐츠 크기만큼만의 영역을 차지한다.
아래와 같이 'Hello World' 문자열에 해당하는 공간만 차지하고 있는 것이 인라인 요소이다.
또 입력한 Contents가 수평으로 쌓인다는 특징이 있다.
대표적인 인라인 요소로는 span 태그가 있다.
<span>Hello</span> <span>World</span>블록 요소란 콘텐츠 영역을 설정하는 용도로, 주로 레이아웃를 만들 때 사용한다.
아래와 같이 'Hello World' 문자열에 해당하는 공간 뿐만 아니라,
요소가 넓힐 수 있는 모든 영역을 차지한다.
더불어, 인라인 요소와는 다르게 요소가 수직으로 쌓이는 것을 확인할 수 있다.
이러한 인라인 요소, 블록 요소의 특징을 이용하여 레이아웃을 만들고,
Contents를 작성한 뒤 CSS로 적절하게 꾸미고 JS로 동적 움직임을 구성하여 웹이 구성된다.
