CSS 레이아웃을 위한 스타일(border,margin,padding등)

레아이웃의 핵심

width, height - 박스 모델의 너비와 높이

display - 화면에서 요소가 어떻게 보일지를 결정하는 요소

border - 박스 모델의 테두리

margin - 박스모델의 마진(요소와 요소 사이의 여백)

padding - 테두리와 내용 사이의 여백

border-radius - 박스 모델의 모서리를 둥글게 처리

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

박스모델은 크게 2가지, 블록 레벨과 인라인 레벨로 나뉩니다 블록 레벨은 혼자 한 줄을 차지하는 요소이다. 모바일 화면이 너비는 고정된 채로 화면을 아래로 쭉쭉 내리는것을 볼 수가 있는데 이게 블록 레벨이다. 반면에 인라인 레벨은 줄을 차지하지 않는 요소이다. 즉 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있습니다.

2. width, height - 콘텐츠 영역의 크기

표시할 콘텐츠의 영역을 얼만큼 할 것인가 지정하는 속성

width, height: <크기> | <백분율> | <auto>

크기 - 픽셀이나 cm의 단위로 지정

백분율 - 부모 요소 기준으로 너비나 높이값을 지정

*실제 콘텐츠 크기 계산하기

모던 브라우저에서 박스 모델의 전체 너비 = width 값 + 좌우 패딩+ 좌우 테두리

인터넷 익스플로러 6에서 박스 모델의 width값 = 콘첸츠 너비 + 좌우 패딩+ 좌우 테두리

display - 화면 배치 방법 결정하기

블록 레벨 요소와 인라인 레벨 요소는 변할수 없는 성격일까? 그렇지 않다. 이 속성을 사용하면 블록 레벨 요소를 인라인 레벨 요소로 바꾸거나 인라인 레벨 요소를 블록 레벨 요소로 바꿀 수 있다. 이 방법은 세로로 표시되는 목록을 가로 내비게이션으로 바꿀 떄, 한 줄로 표시되는 이미지에 여백과 테두리를 추가해 갤러리로 표시할 때 이방법을 사용한다.

display: none | contents | block | inline | inline-block | table | table-cell

자주 사용하는 속성들

block 

해당 요소를 블록 레벨 요소로 저장한다. <img> 같은 인라인 레벨 요소를 블록 레벨로 바꿀 수 있다.

inline 

블록 레벨 요소를 인라인 형태로 바꿀 수 있다. 보통 <li>태그는 블록 레벨 요소인데 이 속성으로 옆으로 나오게끔 변환이 가능하다.

또한 옆으로 나오게 함으로써 내비게이션 역할을 하도록 할 수도 있다. 오른쪽 위에가 왼쪽 아래처럼 바뀌었다.

inline-block

웹 요소를 인라인으로 지정하면 한 줄로 배치는 할 수 있지만 너비나 높이, 마진 같은 박스 모델 값이 정확히 적용되지 않는다. 요소를 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성을 지정하고 싶다면 사용한다. 이 옵션을 쓰고 밑에 마진같은걸 쓰면 된다.

none

해당 요소를 화면에 아예 표시하지 않는다. visibility: hidden 도 비슷하지만 히든은 화면에서 감추기만 할뿐 공간은 차지 하지만 이건 아예 공간조차 차지 하지 않는다.

inline-table

인라인 레벨의 표로 만듭니다. <table>를 사용한것과 같이.

3. border-style - 테두리 스타일 지정하기

테두리 스타일 기본값은 none이기 때문에 스타일을 지정하지않으면 색상이나 두께를 지정하더라도 화면에 표시 되지않는다. 그래서 테두리 스타일을 먼저 지정하고 시작해야한다.

border-style: none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid

hidden - 테두리가 나타나지 않는다.

dashed - 점선보단 살짝 긴 선으로 표시한다.

dotted - 점선으로 표시한다.

double - 이중선으로 표시한다.

groove - 테두리를 창에 조각한 것처럼 표시한다 홈이 파인듯 입체적.

inset - 그루브와 비슷하다.

ridge - 테두리를 창에서 튀어나온 것처럼 표시한다.

solid - 실선으로 표시한다.

border-width - 테두리 두께 지정하기

border-top-width: <크기> | thin | medium | thick

top 자리에 right, bottom, left 가 올 수 있다. 즉 일부분만 지정이 가능하다. 그렇지 않고 전체를 통합해서 사용할 경우엔

border-width: 값 을 쓰면된다.

border-color - 테두리 색상 지정하기

위에 두께와 마찬가지다.  ex) border-top-color: 색상;

한번에 사용하기

border: <두께> | <색상> | <스타일> 이렇게 한번에 사용이 가능하다.

border-radius - 모서리 둥글게 만들기

border-radius: <값>

4. margin - 요소 주변 여백 설정하기

margin-top, left, right, bottom: <크기>

5. padding - 콘첸츠 영역과 테두리 사이 여백 설정

padding-top,left... : <크기>