블록형 태그

웹 문서를 만들 때 태그를 사용하여 여러 요소를 표시한다. 그 태그들이 가진 기본적인 속성 블록형에 대해 알아보기로 한다.

1. 블록형 태그

  - 블록형 태그는 기본적으로 웹 문서의 가로 축전체를 차지한다.

위 container1(파란박스)이 가진 스타일을 보면 가로의 길이(width)를 지정해주지 않았지만 한 가로축의 길이를 모두 차지하여 다음 빨간 박스가 파란박스 밑에 위치하게 된다. 그래서 특정 요소들을 묶어 다른 요소와 구분하는데 주로 사용된다.

 

2. 자주 사용하는 블록 태그

 1) <div>

 2) <ul>,<ol>,<li>

 3) <h1~h6>

 4)<form>

 5) <header>

 6) <p>

 

3. 참고사항

 블록형은 기본적으로 가로축을 다 차지하기 때문에 다음 요소가 밑으로 내려간다고 했다. 그렇다면 가로의 길이를 제한한다면 다음 요소가 밑이 아닌 옆으로 위치하지않을까?

위 이미지를 보면 검은 박스안에 가로 길이가 제한된 파란박스와 빨간박스가 있다. 각각 박스가 차지하는 부분이 작아 옆으로 나란이 붙을 것 같지만 여전히 밑으로 붙게 된다. 왜 이런 것일까?

이런 block의 특성이기 때문이다. 가로의 길이가 제한되더라도 가로 축을 전부차지하기 때문에 좌우가 아닌 상하로 위치하게 된다.