[CSS] CSS 박스 - 요소의 크기, 수직 정렬 속성

CSS 박스 속성

HTML 요소를 사각형 형태의 박스로 간주하는 것으로, CSS를 총해 각 박스의 위치, 크기, 색상 등을 지정한다.
ㄴ padding속성은 내용과 테두리 사이의 간격을 지정
ㄴ border속성은 테두리 두께와 색상 등 스타일을 지정
ㄴ margin속성은 테두리 밖이 다른 요소 사이의 간격을 지정

요소의 크기 설정

내용이 표시되는 영역의 폭과 높이를 지정
css의 width, height 속성은 그림, 표, 각종 버튼, 문단 등의 다양한 요소에 크기를 지정 가능
min, max를 붙여서 최소폭, 최소높이, 최대폭, 최대높이를 지정할 수 있다.

width : <길이> | <퍼센트>| auto ;
height : <길이> | <퍼센트>| auto ;

• <길이> => px, pt, cm 등으로 크기를 지정
• <퍼센트> => 포함하는 블록에 대한 백분율로 크기를 지정
• auto => 브라우저가 자동으로 지정(기본값)

요소의 크기 설정 예시(기본 폰트 사이즈 12pt)

P태그 width:40% 콘테츠 영역의 크기(폭과 높이) 지정

div태그 height:100px 콘테츠 영역의 크기(폭과 높이) 지정

hr태그 크기 설정(600px)

---

max-width, max-height : <길이> | <퍼센트> ;
min-width, min-height : <길이> | <퍼센트> ;

• <길이> => px, cm 등으로 폭/높이를 지정
• <퍼센트> => 포함하는 블록에 대한 백분율로 폭/높이를 지정
• none => 폭/높이의 최댓값을 지정하지 않음(기본값)

요소의 크기 제한 예시

min-width, min-height, max-width, max-height 속성은 특정 요소에 대한 콘테츠의 최소 및 최대 폭과 높이 제한 가능(기본)

min-width, min-height, max-width, max-height 속성은 특정 요소에 대한 콘테츠의 최소 및 최대 폭과 높이 제한 가능(최소 400px,30px)

min-width, min-height, max-width, max-height 속성은 특정 요소에 대한 콘테츠의 최소 및 최대 폭과 높이 제한 가능(최대 150px,80px)

vertical-align 속성

요소의 수직 정렬을 지정

vertical-align : baseline | sub | super | top | middle | bottom | text-top | text-bottom | <길이> ;

• baseline => 부모 요소의 기본 줄에 맞춰서 정렬(기본 값)
• sub => 아래첨자로 정렬
• super => 위첨자로 정렬(기본 값 0)
• top => 요소 상단을 해당 줄에서 가장 높은 요소의 상단에 맞춰 정렬
• middle => 부모 요소의 중앙에 맞춰 정렬
• bottom => 요소의 하단을 해당 줄에서 가장 낮은 요소의 하단에 맞춰 정렬
• text-top => 요소의 상단을 부모 요소의 폰트의 상단에 맞춰 정렬
• text-bottom => 요소의 하단을 부모 요소의 폰트의 하단에 맞춰 정렬
• <길이> => 지정한 길이만큼 요소를 올리거나 내림(음수값 허용)

요소의 수직 정렬 예시

수직정렬 baseline정렬하기

수직정렬 sub정렬하기

수직정렬 super정렬하기

수직정렬 top정렬하기

수직정렬 middle정렬하기

수직정렬 bottom정렬하기

수직정렬 text-top정렬하기

수직정렬 text-bottom정렬하기

수직정렬 길이 10pt정렬하기

수직정렬 길이 -10pt정렬하기