정리하다가 그래도.. 이렇게 기본적인건 좀 아는데! 싶어서
자주 헷갈리는 기본적인 것을 정리하기로 했다
HTML 요소의 타입
HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 갖는다. 대부분의 HTML 요소는 이러한 display 속성값으로 다음 두 가지 값 중 하나를 가지게 된다.
- 블록(block)
- 인라인(inlin)
이것 때문에 요소를 배치할 때 자주 꼬이면서도 더럽게 안 외워진다. 나만 그런가 ㅎ
Block Type Element
display:block 인 요소는 언제나 새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지한다.
<p>,<div>,<h>,<ul>,<ol>,<form>
<div> 요소
<div> 요소는 다른 HTML 요소들을 하나르 묶는 데 자주 사용되는 대표적인 block 요소. 주로 여러 요소들의 스타일을 한꺼번에 적용하기 위해 사용한다.
Inline Type Element
display:inline 인 요소는 새로운 라인에서 시작하지 않으며, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 content만큼 차지한다.
<span>,<a>,<img>
<span> 요소
<span> 요소는 텍스트의 특정 부분을 묶는 데 자주 사용되는 inline 요소. 주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용한다.
- 참고 : TCPschool
