[두잇 HTML5+CSS3 웹표준의 정석] CSS Part8

css와 박스 모델

 

블록 레벨 요소와 인라인 레벨 요소

블록레벨 : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지한다. 즉 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. 너비와 마진, 패딩 등을               이용해 크기나 위치를 지정하려면 블록 레벨 요소여야한다. ex) <div> <p> <hn> <ol>..

인라인 레벨 : 줄을 차지하지 않아 나머지 공간에는 다른 요소가 올 수 있다. ex) <img> <strong> <object> <input>...

 

박스 모델(box model)

: 박스 형태의 콘텐츠

- 태그 하나하나를 일종의 박스로 취급하여 그것의 부피를 결정한다.

* 네 방향의 스타일을 다 따로 설정할 수 있다. *

 

1. 패딩(padding) : 박스와 콘텐츠 영역 사이의 여백

2. 테두리(border) : 박스의 테두리

3. 마진(margin) : 여러 박스 모델 사이의 여백

 

width, height 속성

: 콘텐츠 영역의 크기

-높이와 너비의 크기를 조절한다.

<크기> <백분율> auto

px이나 cm와 같은 단위와 함께 수치로 지정한다. 박스 모델을 포함하는 부모요소를 기준으로 백분율(%)로 지정한다. 콘텐츠의 양에 따라 자동으로 결정된다. 기본값이다.

 

실제 콘텐츠 크기 계산하기

모던 브라우저에서 박스 모델의 전체 너비 = width 값 + 좌우패딩 + 좌우테두리   /*따로 합친다*/
인터넷 익스플로러 6에서 박스 모델의 width 값= 콘텐츠 너비 + 좌우패딩 + 좌우테두리  /*합쳐져있다*/

 

display 속성

: 화면 배치 방법 결정하기

- 블록레벨요소를 인라인 레벨 요소로 바꾸거나 반대로 인라인 레벨요소를 블록레벨요소로 바꿀 수 있다.

 

1. block 속성 값 : 인라인 레벨 요소를 블록 레벨 요소로 바꾼다. - 이미지 태그에 사용할 경우 가로로 배치되었던 이미지가 세로로 배치됨

2. inline 속성 값 : 블록 레벨 요소를 인라인 레벨로 바꾼다. - 목록에 사용하는 <li>에 사용할 경우 수직목록이 한 줄로 배치됨

3. inline-block 속성 값 : 웹요소를 display: inline; 으로 지정하면 한줄로 배치할 수 있지만 너비나 높이, 마진 등과 같은 값이 정확히 적용되지 않는다. 그렇기 때문에 인라인 레벨 요소이면서 블록레벨 속성을 갖도록 지정한다. 즉, 수평으로 배치되면서 마진,패딩 등의 값을 지정할 수 있다.

4. none 속성 값 : 화면에 아예 표시하지 않는다 - pc화면에서는 표시하지만 모바일 화면에서는 보이지 않도록 하고 싶은 부분에 처리함

 

 

---

테두리 관련 속성들

 

border-style

: 테두리 스타일 지정하기

none	테두리가 나타나지 않는다. 기본값이다.
dashed	테두리를 짧은 선(직선으로 된 점선)으로 표시한다.
dotted	테두리를 점선으로 표시한다.
double	테두리를 이중선(겹선)으로 표시한다. 두 선 사이 간격은 border-weight 값으로 지정 가능하다.
solid	테두리를 실선으로 표시한다.

 

border-weight 속성

: 테두기 두께 지정하기

- px를 이용해서 직접 크기를 입력하거나 thin, medium, thick 키워드 중 하나를 선택할 수 있다.

border-top-width: <크기> ㅣ thin ㅣ medium ㅣ thick
border-right-width: <크기> ㅣ thin ㅣ medium ㅣ thick
border-bottom-width: <크기> ㅣ thin ㅣ medium ㅣ thick
border-left-width: <크기> ㅣ thin ㅣ medium ㅣ thick
border-width: <크기> ㅣ thin ㅣ medium ㅣ thick

 속성값이 1개 ) 네 방향 테두리 굵기 모두 동일

 속성값이 2개 ) 위아래와 좌우 묶어 지정한다

 속성값이 4개 ) 시계방향 top-right-bottom-left 으로 지정한다

 

border-color 속성

: 테두리 색상 지정하기

border-top-color: <크기> ㅣ thin ㅣ medium ㅣ thick
border-right-color: <크기> ㅣ thin ㅣ medium ㅣ thick
border-bottom-color: <크기> ㅣ thin ㅣ medium ㅣ thick
border-left-color: <크기> ㅣ thin ㅣ medium ㅣ thick
border-color: <크기> ㅣ thin ㅣ medium ㅣ thick

 

border 속성

: 테두리 스타일 묶어 지정하기

- 두께와 색상, 스타일 순서는 상관없다.

border-top: <두께> <색상> <스타일>
border-right: <두께> <색상> <스타일>
border-bottom: <두께> <색상> <스타일>
border-left: <두께> <색상> <스타일>
border: <두께> <색상> <스타일>

 

border-radius 속성

: 박스 모서리 둥글게 만들기

border-top-left-radius: <크기> ㅣ <백분율>
border-top-right-radius: <크기> ㅣ <백분율>
border-bottom-left-radius: <크기> ㅣ <백분율>
border-bottom-right-radius: <크기> ㅣ <백분율>
border-radius: <크기> ㅣ <백분율>

크기 백분율

반지름 크기를 px이나 em 같은 단위로 표시한다. 현재 요소의 크기를 기준으로 반지름 크기를 %로 지정한다.

 

타원 형태로 둥글게 만들기

border-top-left-radius: <가로크기> <세로크기>
border-top-right-radius: <가로크기> <세로크기>
border-bottom-left-radius: <가로크기> <세로크기>
border-bottom-right-radius: <가로크기> <세로크기>
border-radius: <가로크기> <세로크기>

예시)
.round{border-top-left-radius: 100px 50px;}

 

box-shadow 속성

: 선택한 요소에 그림자 효과 내기

<수평거리>	양수값은 오른쪽, 음수값은 왼쪽
<수직거리>	양수값은 아래쪽, 음수값은 위쪽
<흐림정도>	0을 기본값으로 하며 음수값은 없다. 값이 커질수록 그림자가 부드러워진다.
<번짐정도>	양수값은 그림자가 모든 방향으로 퍼짐, 음수값은 모든 방향으로 축소
<색상>	기본값은 현재 글자색이다
inset	안쪽으로 그림자가 생긴다

 

 

---

여백을 조절하는 속성들

 

margin 속성

: 요소 주변 여백 설정하기

margin-top : <크기> ㅣ <백분율> ㅣ auto
margin-right : <크기> ㅣ <백분율> ㅣ auto
margin-bottom : <크기> ㅣ <백분율> ㅣ auto
margin-left : <크기> ㅣ <백분율> ㅣ auto
margin : <크기> ㅣ <백분율> ㅣ auto

<크기>	px이나 cm 수치로 지정한다.
<백분율>	박스 모델을 포함하고 있는 부모요소를 기준으로 %로 지정한다.
auto	display 속성에서 지정한 값에 맞게 적절한값을 자동으로 지정한다.

마진 값 좌우값을 auto로 지정하면 좌우 마진을 똑같이 맞춰 중앙에 배치한다. 

마진값이 하나 ) 네방향 모두 적용

마진값이 2개 ) 위아래와 오왼쪽 값

마진값이 3개 ) 빠진 값은 마주보는 방향의 스타일 속성값을 사용한다.

 

마진 중첩 ( margin overlap ) 현상

: 세로로 배치할 경우, 마진과 마진이 만날 때 마진 값이 큰 쪽으로 겹쳐지는 현상이다

- 예를 들어 세개의 박스에 마진값을 네방향 모두 30px로 지정하면 박스와 박스 사이에는 60px 만큼의 여백이 생기는 것이 아닌 두개의 30px이 겹쳐져 최종적으로 30px만큼의 마진만 생긴다.

* 오른쪽과 왼쪽 마진이 만날 경우에는 중첩되지 않는다 *

 

padding 속성

: 콘텐츠 영역과 테두리 사이 여백 설정하기

- 마진속성과 사용법이 비슷하다.

padding-top : <크기> ㅣ <백분율> ㅣ auto
padding-right : <크기> ㅣ <백분율> ㅣ auto
padding-bottom : <크기> ㅣ <백분율> ㅣ auto
padding-left : <크기> ㅣ <백분율> ㅣ auto
padding : <크기> ㅣ <백분율> ㅣ auto