패스트캠퍼스 챌린지 6일차 - Part1. Ch5

HTML의 기본 문법에 대해 알아보겠다.

이제껏 작성해온 것 처럼 HTML은 <태그>내용</태그> 와 같은 구조로 작성했다. 이렇게 태그와 내용을 포함해서 요소(Element)라고 부른다. 종료 태그가 시작 태그와 다른 점은 / 가 붙는다는 점이다.

 

<태그><태그>내용</태그></태그> 와 같이 태그 안에 태그가 있는 형태는 부모와 자식 관계라고 볼 수 있다. 이렇게 한 줄로 쭉 이어 적으면 부모와 자식의 범위를 알아보기 힘드므로 자식요소들을 줄바꿈과 들여쓰기를 이용해 알아보기 쉽게 작성하도록 하자. 참고로 상위(조상) 요소는 부모 요소를 포함한, 나를 감싸고 있는 모든 요소를 지칭하는 용어이며 하위(후손) 요소는 자식 요소를 포함한, 내가 감싸고 있는 모든 요소들을 지칭하는 용어이다.

 

우리가 그동안 써왔던 index.html 파일을 보면 meta, img 등의 태그는 닫힌 태그가 없는 것을 볼 수 있다. 이러한 태그들을 빈 태그(empty tag)라고 부른다. 다음과 같이 열린 태그에 속성과 값을 적용할 수 있다. <태그 속성="값">

빈 태그들은 내용을 채울 수 없는 비어있는 태그이기 때문에 대부분의 경우에 속성과 값을 이용해서 태그의 기능을 온전하게 사용한다.

 

---

HTML에서 요소가 화면에 출력되는 특성은 크게 2가지로 구분되며 글자와 상자 개념이 있다. 인라인 요소는 글자에 해당하며 글자를 만들기 위한 요소들, 블록 요소는 상자에 해당하며 상자(레이아웃)을 만들기 위한 요소들에 해당한다. 

 

대표적인 인라인 요소로는 <span> 이 있다. 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도이다. span 태그에서 줄바꿈은 띄어쓰기 하나로 나타나며, 포함한 콘텐츠 크기만큼 가로 세로 크기가 자동으로 줄어든다. 내 외부 모두 여백을 줄 때 위아래 여백은 적용되지 않고 좌우로만 적용된다. 또한 인라인 요소의 자식으로 블록 요소 태그를 사용할 수 없다.(ex. span 태그 안에 div태그 안됨!)

 

다음으로 대표적인 블록 요소로 <div> 가 있다. 마찬가지로 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도이다. 가로는 부모 요소의 크기만큼 자동으로 늘어나며 세로는 콘텐츠 크기만큼 자동으로 줄어드는 특징이 있다. 그리고 인라인 요소와는 다르게 내 외부 모두 상하좌우 여백을 모두 적용할 수 있다. 블록 요소의 자식으로는 블록, 인라인 요소를 모두 사용할 수 있다.

---

6일차 >_<

※ 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/3FVdhDa