[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "CSS-셋째마당: 08.레이아웃을 구성하는 CSS 박스 모델"

08. 레이아웃을 구성하는 CSS 박스 모델

CSS와 박스 모델

 

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

 -블록레벨 요소: 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것. 해당 요소의 너비가 100%. 왼쪽이나 오른쪽에 다른 요소가 올 수 없음. (<h1>,<div>, <p>)

 -인라인 레벨 요소: 한줄을 차지하지 않음. 콘텐츠 만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음. (<span>, <img>, <strong>)

 

박스 모델 크기

 웹 문서의 블록 레벨 요소는 모두 박스 형태임.

 -박스 모델 요소: 스타일 시트에서는 이렇게 박스 형태인 요소

 

콘텐츠 영역 크기 지정

종류	설명
<크기>	너비나 높이의 값을 px이나 em 단위로 지정
<백분율>	박스 모델을 포함하는 부모 요소를 기준으로 너빗값이나 높잇값을 백분율(%)로 지정
auto	박스 모데의 너빗값과 높잇값이 콘텐츠 양에 따라 자동으로 결정. 기본값

 

박스 모델 크기

{ box-sizing
-border-box: 테두리까지 포함해서 너빗값 지정
-content-box: 콘텐츠 영역만 너빗값 지정 (기본값)
	}

 

박스 모델 그림자 효과

{ box-shadow: <수평거리> <수직거리> <흐림정도> <번짐정도> <색상> inset }

박스 모델 방향: 시계방향

 

---

 

테두리 스타일 지정하기

 

박스 모델의 방향

top(맨 윗부분) -> right(오른쪽) -> bottom(아랫부분) -> left(왼쪽)                     "시계방향"

 

 

테두리 스타일 지정

{ border-style: none, hidden, solid, dotted, dashed, double, groove, inset, ouset, ridge }

 

테두리 두께

{ border-width: <크기> / thin, medium, thick }

 

테두리 색상

{ border-방향-color:
/* 4개의 방향 색상 한꺼번에 지정 or 테두리 방향 설정 */ }

둥근 테두리

{ border-radius: <크기> / <백분율>
방향-radius (top-left/right) (bottom-left/right) }

 

---

 

여백을 조절하는 속성

 

margin: 요소 주변의 여백

{ mrgin: <크기> | <백분율> | <auto> }
{ margin: 20px auto;  /* 문서 가운데 정렬 */ }

 

 

padding: 콘텐츠와 테두리 사이 여백

{ padding: 20px 30px 40px 50px }

 

레이아웃 속성

 

display 속성: 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용

 

{ display: block / inlince / inline-block / none
/* 웹문서 내비게이션 만들면서 메뉴항목 가로로 배치할 때, 이미지 표형태 */ }

 

왼쪽이나 오른쪽 배치

{ left
	/* 해당 요소를 문서 왼쪽 배치 */ }
{ right 
	/* 해당 요소를 문서 오른쪽 배치 */ }
{ auto
	/* 좌우 어느 쪽에도 배치하지 않음. 기본값 */ }
    
    
{ float
	/* 웹문서 떠있게 만듬 */ }

{ clear
	/* float속성 해제 */  }

 

 

위치지정 속성

 

웹 요소 위치를 정하는 속성

종류	설명
left	기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정.
right	기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정.
top	기준 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정.
button	기준 위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지정.

 

position: 웹 요소 위치를 정하는 속성

종류	설명
static	문서의 흐름에 맞게 배치. 기본값
relative	위칫값을 지정할 수 있다는 점을 제외하면 static과 같음
absolute	relative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치
fixed	브라우저 창을 기준으로 위치를 지정해 배치

 

 

 

---

 

출처

https://easyspub.co.kr/20_Menu/BookView/PUB/421/PUB

https://easyspub.co.kr/20_Menu/BookView/PUB/421/PUB