1. 키워드
각 프로퍼티(color)따라 사용할 수 있는 키워드(red) 존재
ex) display- inline, inline-block, none
2. 크기 단위
px, em, %
px는 절대값, em, %는 상대값
대부분 기본 값 16px, 1em, 100%
값 0인 경우 단위 생략 가능
2.1 px
픽셀 단위
요소의 크기나 이미지 크기 지정
2.2 %
백분률 단위의 상대 단위
요소에 지정된 사이즈에 상대적인 사이즈 설정
body {
font-size: 14px;
text-align: center;
}
div {
font-size: 120%; /* 14px * 1.2 = 16.8px */
font-weight: bold;
padding: 2em; /* 16.8px * 2 = 33.6px */
background-color: rgba(255, 0, 0, 0.2);
}
2.3 em
배수 단위
요소에 지정된 사이즈에 상대적인 사이즈
body {
font-size: 14px;
text-align: center;
}
div {
font-size: 1.2em; /* 14px * 1.2 = 16.8px */
font-weight: bold;
padding: 2em; /* 16.8px * 2 = 33.6px */
background-color: rgba(255, 0, 0, 0.2);
}
중첩된 자식 요소에 em을 지정하면 모든 자식 요소의 사이즈에 영향
body {
font-size: 14px;
text-align: center;
}
div {
font-size: 1.2em; /* 14px * 1.2 = 16.8px */
font-weight: bold;
padding: 2em;
}
<div class='box1'>
Font size: 1.2em ⇒ 14px * 1.2 = 16.8px
<div class='box2'>
Font size: 1.2em ⇒ 16.8px * 1.2 = 20.16px
<div class='box3'>
Font size: 1.2em ⇒ 20.16px * 1.2 = 24.192px
</div>
</div>
</div>
2.4 rem
em의 기준은 상속의 영향으로 상황에 따라 같은 1.2em이어도 다른 값 가질수있음
rem은 최상위 요소의 사이즈를 기준으로
html {
font-size: 14px;
/* font-size 미지정 시에는 16px */
}
div {
font-size: 1.2rem; /* html font-size: 14px * 1.2 = 16.8px */
font-weight: bold;
padding: 2em;
text-align: center;
}
<div class='box1'>
Font size: 1.2rem ⇒ 14px * 1.2 = 16.8px
<div class='box2'>
Font size: 1.2rem ⇒ 14px * 1.2 = 16.8px
<div class='box3'>
Font size: 1.2rem ⇒ 14px * 1.2 = 16.8px
</div>
</div>
</div>
콘텐츠의 크기에 따라 가변적으로 대응하여야한느 wrapper 요소 등에 적합
.container{ width:70rem; }
2.5 Viewport 단위
반응형 웹디자인 - 동적으로 대응하기 위해 % 단위를 자주 사용, 상속에 의해 부모 요소에 상대적 영향 받음
viewport 기준으로 한 상대적 사이즈 의미
vw viewport 너비의1/100
wh viewport 높이의1/100
vmin viewport 너비 또는 높이 중 작은 쪽의 1/100
vmax viewport 너비 또는 높이 중 큰 쪽의 1/100
예를 들어 viewport 너비가 1000px, 높이가 600px인 경우
1vw : viewport 너비 1000px의 1%인 10px
1vh : viewport 높이 600px의 1%인 6px
vmin : viewport 높이 600px의 1%인 6px
vmax : viewport 너비 1000px의 1%인 10px
line-height : 행간 제어
body{margin:0px;}
.item{
width : 50vw; /*뷰포인트의 50%*/
height : 100vh; /*뷰포인트의 100%*/
text-align: center;
line-height: 100vh;
font-size : 4rem;
color:white;
}
.item1{
background-color: red;
}
.item2{
background-color: orange;
}
<body>
<div class='item item1'>item1</div>
<div class='item item2'>item2</div>
</body>
3. 색상 표현 단위
- 키워드 사용(red, blue 등)
- hex코드 #000000
- RGB rgb(255,255,0)
- RGBA rgba(255,255,0,1)
- HSL(색상,채도,명도) hsl(0,100%,25%)
- HSLA hsla(60,100%,50%,1)
