fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다.
웹사이트를 만드는데 중요한 부분을 차지하는 글자와 상자는 요소가 화면에 출력되는 특성을 말하며 글자에 해당하는 인라인요소와 상자에 해당하는 블록요소가 있습니다.
▶ 인라인 요소
대표적인 인라인 요소인 span
<span>Hello</span>
<span>World</span>
Hello World
→→→→→→→
요소가 수평적으로 쌓임
- 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도
- 글자요소인 span은 줄바꿈을 할때 자동으로 띄어쓰기가 들어가는 특성이 있습니다.
- 하지만 줄바꿈이 없다면 띄어쓰기가 없이 HelloWorld가 출력됩니다.
- 글자요소는 포함한 콘텐츠 크기만큼 가로세로가 자동으로 줄어드는 특성이 있습니다.
- img 태그, a(anchor)태그, input태그, label태그는 인라인 요소에 속합니다.
- span의 자식요소로 인라인요소(span)을 사용할 수는 있지만, 블럭요소(div)를 사용할 수 없습니다.
- 위처럼 span 태그에다가 스타일요소로 width와 height를 적용해도 화면에 보여지는 화면에는 반응이 없다는 것을 확인할 수 있습니다.
- 여백을 나타내는 margin과 padding에 값을 부여한다면 좌우로는 여백을 줄 수 있지만 상하로는 여백을 줄 수 없습니다.
▶ 블록 요소
대표적인 블록요소인 div(division)
<div>Hello</div>
<div>world</div>
Hello ↓
World ↓
요소가 수직으로 쌓인다.
- 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도
- 부모의 요소의 크기만큼 자동으로 늘어나는 특성을 가지고 있습니다.
- p태그, h1~h5 태그(제목을 의미하는 요소), ul(Unordered List) 태그, li(List Item)태그는 블록요소에 속합니다.
- 스타일을 지정해준만큼 크기 조절이 가능합니다.
- 상하좌우 여백 설정이 가능합니다.
- 블록요소의 자식요소로는 인라인요소와 블록요소 모두 사용이 가능합니다.