css 여백
css 속성의 단위
ps(픽셀)
웹에서 사용되는 가장 기본이 되는 단위
em
상대값, 주로 폰트에 사용
{font-size: 1.2em;}: 상위 태그에 지정된 폰트크기의 1.2배
{line-height: 1.2em;}: 현재 태그에 지정된 폰트크기의 1.2배
%(퍼센트)
상대값, 부모태그의 값에 비례적용 됨
vw와 vh
상대값, 브라우저의 크기에 비례적용 됨
css 태그의 성질
태그의 구분
대부분의 태그는 3가지 성질로 구분됨
태그의 성질에 따라 블럭block요소 태그, 인라인inline요소 태그, 인라인블럭inline-block요소 태그로 분류
display속성은 태그의 성질을 결정하는 역할을 함
블럭block요소 태그 {display:block;}
사용 가능한 최대 가로 너비를 사용
크기를 지정할 수 있음
width: 100%; height: 0; 으로 시작 (width, height는 설정하지 않았을 경우에는 auto로 설정)
수직으로 쌓임
margin, padding 위, 아래, 좌, 우의 여백 온전히 사용 가능
<html>, <body>, <div>, <ul>, <li>, <p>등이 블럭요소태그에 속함
레이아웃을 위한 용도
인라인inline요소 태그 {display:inline;}
필요한 만큼만 너비를 사용
크기를 지정할 수 없음
width:0; height:0; 으로 시작 (width, height는 설정하지 않았을 경우에느 auto로 설정 되어 있지만 화면에 표시되지 않음
수평으로 쌓임
margin, padding 위, 아래는 사용할 수 없음
<i>, <a>, <span>, <strong> 등이 인라인요소태그에 속함
텍스트를 다루기 위한 용도
css 크기
width/height
요소의 가로/세로 너비 설정
max-width/min-width/max-height/min-height
요소의 최대/최소 가로/세로 너비 설정
css 여백
margin
요소의 '외부(바깥) 여백'을 지정
(음수 값 사용 가능)
개별속성
margin-top: 요소 외부 위쪽 여백
margin-right: 요소 외부 오른쪽 여백
margin-bottom: 요소 외부 아래쪽 여백
margin-left: 요소 외부 왼쪽 여백
padding
요소의 '내부(안) 여백'을 지정
(음수 값 사용 가능)
개별속성
padding-top: 요소 외부 위쪽 여백
padding-right: 요소 외부 오른쪽 여백
padding-bottom: 요소 외부 아래쪽 여백
padding-left: 요소 외부 왼쪽 여백
크기증가
width/height 속성의 값 뿐만 아니라 여백과 테두리가 차지하는 영역의 크기도 함께 고려해야함
태그의 가로영역 크기 = width + 좌우padding + 좌우border + 좌우margin
태그의 세로영역 크기 = width + 상하padding + 상하border + 상하margin
box-sizing속성
너비값과 높이값의 범위 기준을 설정할 수 있음
기본적으로 너비값과 높이값은 컨텐츠를 실제로 담을 수 있는 영역의 크기를 나타냄
box-sizing속성값을 border-box로 입력할 경우 너비값과 높이값의 범위가 테두리를 포함해서 인식됨