[CSS] CSS 정리 (2)

 

 

 

웹 문서에서 내용을 배치할 때 각각의 요소들을 박스 형태로 구성한다. 

margin padding border 등 여러 가지 박스 요소들을 사용해 문서를 적절하게 배치하고 꾸밀 수 있다.

이제 CSS의 박스 모델에 대해 알아보자.

 

 

박스 모델

 

1. 블록 레벨 요소

 

 

블록 레벨 요소는 태그를 사용했을 때 혼자 한 줄을 차지하는 것을 말한다.

위에서는 <h1>, <div>, <p> 태그가 블록 레벨 요소이다.

 

2. 인라인 레벨 요소

 

 

인라인 레벨 요소는 한 줄을 차지하지 않고, 콘텐츠만큼의 영역을 차지한다.

위에서는 <span> 태그가 인라인 레벨 요소이다.

 

블록 레벨 요소와 인라인 레벨 요소를 비교 확실하게 이해하자.

 

 

이제 박스 모델을 사용해서 화면을 구성할 때 필요한 개념에 대해 알아보자.

 

 

패딩 / 테두리 / 마진은 상하좌우로 나뉘어 있어 네 방향에 대해 스타일을 설정할 수 있다. (top right bootm left 순서)

패딩은 콘텐츠와 테두리 사이의 여백을 의미하고, 마진은 박스와 다른 박스 사이의 여백을 의미한다.

 

콘텐츠의 크기는 width와 height값을 px 단위로 직접 입력할 수도 있고, 웹 브라우저 창에 따라 크기를 조절하기 위해 백분율로 지정할 수도 있다. 

 

콘텐츠의 크기는 지정했는데, 콘텐츠와 테두리 사이의 패딩값과 다른 박스들과의 마진은 지정하지 않았다. 콘텐츠의 크기를 지정해 주면서 box-sizing 속성과 그 속성값인 border-box / content-box를 사용해 박스를 적절하게 배치할 필요가 있다. 

 

border-box : 테두리까지 포함해서 너비를 결정한다.

content-box : 콘텐츠 영역의 너비만 결정한다. (기본값)

 

border-box 속성값을 사용해 요소의 크기를 쉽게 계산하는 편이 합리적이다.

 

 

여러 가지 border 속성을 사용해 박스의 테두리를 꾸밀 수 있다.

 

1. border-style

hidden solid dotted dashed double 등의 속성값을 사용해 테두리에 효과를 줄 수 있다.

 

2. border-width

상하좌우 4개 방향의 테두리 스타일을 한 번에 지정하거나 한 가지 방향의 스타일을 지정할 수 있다.

px단위로 직접 입력하거나 thin medium thick 속성값을 사용해 테두리의 두께를 지정한다.

 

3. border-color

말 그대로.. 테두리의 색상을 설정할 수 있다.

 

4. border-radius

박스 모델의 테두리를 둥글게 만들 수 있다. 값을 너비나 높이의 50%로 설정하면 원이 된다.

<가로 반지름> / <세로 반지름> 처럼 슬래시를 사용해 구분하면 반지름을 따로 설정할 수 있어 타원을 만들 수 있다.

 

5. border

border 속성은 위의 4가지 속성들을 한 번에 사용할 수 있도록 한다. 

어떤 속성들이 있는지 확인하고 사용할 때는 border로 통일해서 사용하자.

 

margin을 이용해 화면 내에서 요소들을 적절하게 배치할 수 있다. 

margin에 대해 알아보자.

 

1. 웹 문서를 가운데 정렬하기

 

 

div 태그로 웹 문서를 하나로 묶은 후 container스타일을 설정했다.

margin 부분은 20px auto로 설정됐는데 이를 통해 위 아래 마진은 20px씩, 좌우 마진은 자동으로 계산해 웹 문서를 화면 가운데에 위치하도록 설정했다.

 

2. margin 중첩

 

 

  

 

 

 

박스 3개에 대해서 위 아래 마진을 30씩 설정했다고 생각해 보자.

직관적으로 왼쪽 그림과 같이 마진이 설정될 것으로 예상할 수 있다.

 

 

 

 

 

 

 

 

 하지만 실제로 실행 결과를 살펴보면 다음과 같이 30px 단위로 마진이 설정된다.

 

여러 요소를 세로로 배치할 경우 최상단과 최하단의 마진값이 중앙 부분의 마진에 비해 작아지게 되는 경우를 방지하기 위해 둘 중 큰 마진값으로 합쳐서 적용된다.

 

단, 좌 우 마진이 만날 경우에는 중첩되지 않는다.

 

 

 

 

 

이 외에도 다양한 속성들이 있다. 간단하게 살펴보자.

 

1. display

display 속성을 사용해 인라인 레벨 요소와 블록 레벨 요소를 바꿔 사용할 수 있다.

이 속성은 문서 레이아웃을 만들 때 자주 사용한다.

 

2. float 

이미지를 왼쪽에, 텍스트를 오른쪽에 나란하게 표시해야 할 경우 블록 레벨 요소인 p태그를 사용하면 이를 구현할 수 없다. 이럴 때 float 속성을 사용한다.

 

 

right left none(기본값) 속성값을 사용해 이미지를 배치할 수 있다.

한 번 float 속성을 사용하면 그 다음에 넣는 요소에도 같은 속성이 전달되는데, clear 속성을 사용해 float 속성이 더 이상 유효하지 않다고 알려 줄 수 있다.

 

(inline-block과 float:left 속성은 모두 가로로 표시해 준다는 공통점이 있지만 float:left 속성은 마진과 패딩값이 없다)

 

3. position

웹 문서 안의 요소들을 배치하는 역할을 하는 매우매우 중요한 속성이다. 속성값들을 간단히 살펴보자.

 

static : 문서의 흐름에 맞게 배치한다.

realative : 위치 값을 지정할 수 있다.

fixed : 브라우저 창을 기준으로 위치를 지정해서 배치한다.

absolute : 상위(부모) 요소를 기준으로 위치를 지정해서 배치한다.