HTML+CSS+자바스크립트 웹표준의 정석 8장 - CSS 박스 모델

8-1 CSS와 박스 모델

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

• 블록 레벨 요소: 한 줄 전체를 차지하고 줄바꿈이 된다. 예) <div>, <p>, <h1>, <ul>, <table> 등
• 인라인 레벨 요소: 콘텐츠만큼만 공간을 차지하고 줄바꿈이 되지 않는다. 예) <span>, <a>, <img>, <strong> 등
  

2. 박스 모델의 기본 구성

• 컨텐츠(Content): 실제로 표시되는 내용이 들어있는 영역.
• 패딩(Padding): 컨텐츠와 테두리 사이의 간격을 설정하는 영역.
• 테두리(Border): 컨텐츠와 패딩을 감싸는 경계선.
• 마진(Margin): 요소와 다른 요소 사이의 간격을 설정하는 외부 여백.

3. width, height 속성: 콘텐츠 영역의 크기를 지정

• <크기>: 고정 크기로 지정. 예) width: 300px;, height: 200px;
• <백분율>: 부모 요소를 기준으로 백분율로 크기를 지정. 예) width: 50%;, height: 80%;
• auto: 콘텐츠에 맞춰 자동으로 크기를 설정. 예) width: auto;, height: auto;
  

4. box-sizing 속성: 박스 모델의 크기를 계산한다

• border-box: 테두리(border)와 패딩(padding)을 포함한 크기로 계산된다.
• content-box: 오직 콘텐츠 영역의 크기만 계산되며, 테두리와 패딩은 포함되지 않는다. (기본값)

5. box-shadow 속성: 박스 모텔에 그림자 효과를 준다

• <수평 거리>: 그림자의 수평 위치를 지정한다.
• <수직 거리>: 그림자의 수직 위치를 지정한다.
• <흐림 정도>: 그림자의 흐림 정도를 지정한다. (값이 클수록 흐려짐)
• <번짐 정도>: 그림자의 번짐 정도를 지정한다.
• <색상>: 그림자의 색상을 지정한다.
• inset: 그림자를 내부로 넣어 만든다.

그림자 효과의 형태 조절하기:

8-2 테두리 스타일 지정하기

1. margin

• <크기>: 고정된 크기로 여백을 설정한다. 예) margin: 10px;
• <백분율>: 부모 요소를 기준으로 비율로 여백을 설정한다. 예) margin: 5%;
• auto: 여백을 자동으로 설정하여 요소가 가로로 중앙 정렬된다. 예) margin: auto;

/* Do it! 박스 모델에 마진 지정하기 */
    #margin1 {margin: 50px;}
    #margin2 {margin: 30px 50px;}
    #margin3 {margin: 30px 20px 50px;}
    #margin4 {margin: 30px 50px 30px 50px;}

2. 마진 중첩이해하기

• 두 개의 블록 요소가 세로로 맞닿아 있을 때, 상하 마진이 겹쳐서 더 큰 값 하나만 적용된다. 예: margin-top: 20px과 margin-bottom: 30px이면 실제 간격은 30px만 적용됨.
  

3. 콘텐츠와 테두리 사이의 여백을 설정하는 padding 속성
예:

padding: 20px;

→ 모든 방향에 20px 여백 설정.

8-4 웹 문서의 레이아웃 만들기

1. display 속성

• block: 줄 바꿈이 생기며 전체 너비를 차지한다.
• inline: 줄 바꿈 없이 콘텐츠 크기만큼만 차지한다.
• inline-block: 줄 바꿈 없이 block처럼 크기 조절 가능하다.
• none: 요소를 화면에 표시하지 않는다.

2. float 속성

• left: 요소를 왼쪽으로 띄운다.
• right: 요소를 오른쪽으로 띄운다.
• none: 플로팅하지 않는다. (기본값)

3. clear 속성

• left: 왼쪽 플로팅 요소 옆에 배치되지 않음.
• right: 오른쪽 플로팅 요소 옆에 배치되지 않음.
• both: 양쪽 플로팅 요소 옆에 모두 배치되지 않음.

8-5 웹 요소의 위치 지정하기

1. left, right, top, bottom 속성: 웹 요소의 위치를 정한다

2. position 속성: 배치 방법을 지정한다

• static: 기본 위치로, 문서 흐름에 따라 배치된다 (기본값).
• relative: 요소 자신을 기준으로 상대적으로 이동한다.
• absolute: 가장 가까운 위치 지정 조상 요소를 기준으로 절대 위치에 배치한다.
• fixed: 화면을 기준으로 고정되어 스크롤해도 위치가 변하지 않는다.