[CSS] 콘텐츠 영역 설정하기

 지난 포스트에서 마진과 패딩을 다뤘는데 이번엔 콘텐츠 영역을 설정하는 것을 다루겠습니다.

---

1. 콘텐츠 크기 지정하기

콘텐츠의 크기는 다음의 두가지 속성으로 조절합니다.

width: 속성 값;
height: 속성 값;

 

말 그대로 width는 콘텐츠의 너비, height는 콘텐츠의 높이입니다.

두 속성의 속성 값은 아래와 같습니다.

속성 값	효과
크기	너비/높이를 단위와 수치로 직접 지정
백분율	콘텐츠를 포함하는 부모요소의 크기를 기준으로 백분율로 지정
auto	너비와 높이가 콘텐츠의 양(길이, 크기 등)에 따라 자동 지정

 

 

+1. 실제 콘텐츠의 크기

 방금과 같은 방법으로 너비와 높이를 지정했더라도 실제 콘텐츠의 크기는 위에서 지정한 값이 아닙니다. 왜냐하면 실제로 요소를 웹에 배치할때 지난 포스트에서 배운 마진아랫 부분인 콘텐츠, 패딩, 테두리 크기도 계산되어 포함되기 때문입니다.

 그래서 실제 콘텐츠의 크기는 콘텐츠 너비(높이) + 좌우측 패딩 너비(높이) + 좌우 테두리 너비(높이)가 됩니다.

 

2. 콘텐츠의 배치

display: 속성 값;

 display 속성은 콘텐츠가 화면에 어떻게 보일지를 지정하는 속성입니다. display 속성 값은 다음 링크에 잘 정리되어있습니다.

www.w3schools.com/cssref/pr_class_display.asp

CSS display property

 

요소에는 인라인과 블록 요소가 있는데 이 display속성의 값을 통해 인라인을 블록 요소로, 블록을 인라인 요소로 변경할 수 있습니다. 해당 요소에 대한 설명은 아래 포스트를 참조해 주세요.

bamtory29.tistory.com/4

[HTML/CSS] 블록 요소와 인라인 요소

 

---