공간을 분할하는 div태그
- block 속성, 화면낭독기에서 인식 X
- div tag는 웹페이지에서 레이아웃을 만들때 주로 사용하는 태그이다.
- block속성의 대표적인 테그로 너비높이를 지정하지 않으면 브라우저의 전체 너비를 차지한다.
- block속성에 너비 높이와 여백을 주고싶을 때에는 css box model이라는 개념을 알고 있어야 한다.
CSS BOX MODEL
- blodk속성을 가진 모든 태그들은 박스의 형태를 가지고 있으며 원하는 위치에 배치하기 위해 css를 이용한다. 가로와 세로의 크기를 지정하고 여백과 배치 형태를 설정하여 원하는 형태를 만들 수 있다. 이런 박스형태인 요소를 스타일 시트에서는(css) 'css 박스 모델'이라고 부른다.
- 박스모델로 컨첸츠 영역을 만들때에는 width와 height를 이용해 넓이와 높이를 만들 수 있고, 컨텐츠 안의 여백을 설정할 때에는 padding을 사용한다. 컨텐츠와 컨텐츠 사이의 여백을 지정할 경우 margin을 이용해 컨텐츠를 떨어뜨릴 수 있다. 박스에 테두리를 지정하고 싶을 때에는 border이라는 속성을 이용한다.
- padding, border, margin은 사방으로 적용할 수 있고, 원하는 위치에만 따로 적용할 수도 있다.
- 구조 : width, height -> padding -> border -> margin
width와 height
- width는 넓이, height는 높이를 말한다.
- 이 속성들로 정해진 영역이 바로 실질적인 컨텐츠 영역이 된다.
- 단위는 px, %, vw /vh나 vmin/wmax를 쓰며 auto(자동) 단위를 쓸 수 있다.
padding/ margin을 각각 적용하는 방법 1
- 컨텐츠 영역 상하좌우로 각각 다른 여백을 지정하고 싶을 경우 아래 방법을 사용합니다.
===========<padding 적용>===========
1. padding-top : 숫자(단위) ; - padding을 위에만 적용한다.
2. padding-bottom : 숫자(단위) ; - padding을 아래에만 적용한다.
3. padding-left : 숫자(단위) ; - padding을 왼쪽에만 적용한다.
4. padding-right : 숫자(단위) ; - padding을 오른쪽에만 적용한다.
===========<margin 적용>===========
1. margin-top : 숫자(단위) ; - margin을 위에만 적용한다.
2. margin-bottom : 숫자(단위) ; - margin을 아래에만 적용한다.
3. margin-left : 숫자(단위) ; - margin들 왼쪽에만 적용한다.
4. margin-right : 숫자(단위) ; - margin들 오른쪽에만 적용한다.
padding/ margin을 각각 적용하는 방법 2
컨텐츠 영역 상하와 좌우에 각각 동일한 여백을 지정하고 싶을 경우 상하와 좌우에 각각 동일한 여백을 지정할 경우에는 각 값을 공백으로 구분한다.
- padding : 숫자1(top/bottom) 숫자2(left/right) ; - 안쪽 여백을 줄 때 숫자1의 자리는 상하의 자리, 숫자2의 자리는 좌우의 자리
- margin : 숫자1(top/bottom) 숫자2(left/right) ; - 바깥쪽 여백을 줄 때 숫자1의 자리는 상하의 자리, 숫자2의 자리는 좌우의 자리
padding/ margin을 각각 적용하는 방법 3
- 컨텐츠 영역 상하좌우에 각각 다른 여백을 한 번에 지정하고 싶을 경우 상하좌우에 각각 동일한 여백을 지정할 경우에는 각 값을 공백으로 구분한다.
- 숫자1 이 top 부분이며, 시계방향으로 적용된다.
- padding : 숫자1(top) 숫자2(right) 숫자3(bottom) 숫자4(left) ;
- margin : 숫자1(top) 숫자2(right) 숫자3(bottom) 숫자4(left) ;
브라우저의 개발자 모드에서 박스모델 확인!
- F12를 눌러서 개발자 도구창을 확인하거나
- 브라우저에서 마우스 우클릭해서 [검사]를 선택해서 박스모델이 어떻게 적용되는지 확인할 수 있다.
웹디자인 스케치