색상
- HEX Color : #RRBBGG
- 16진수(0~9, A~F)로 표현된 색상 코드
- ##RRBBGG에서 [RR],[BB],[GG]에서 R, B, G의 값이 동일하다면 #RBG로도 표기 가능
- F로 갈 수록 진함
- RBG Color : rgb(0~255, 0~255, 0~255, 0~1(투명도))
- 색상명시
color: inherit;: 부모 색상 상속
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
font-size: 30px;
}
.c1 {
/* color 표현 방법 :
(1) HEX Color : #RRBBGG
- 16진수(0~9, A~F)로 표현된 색상 코드
- F로 갈 수록 진함
(2) RBG Color : rgb(0~255, 0~255, 0~255, 0~1(투명도))
*/
color: #00ff00;
}
.c2 {
color: rgb(388,199,65, 0.2);
}
</style>
</head>
<body>
<!-- .c$*3 -->
<div class="c1">hello</div>
<div class="c2">hello</div>
<div class="c3">hello</div>
</body>
</html>단위
-
px
-고정 단위이므로, 화면 해상도가 다르면 같은 px 크기라도 보이는 크기가 달라질 수 있어 모바일이나 태블릿에서 보기는 좋지 않을 수 있음. 비율 고정도 흐트러 질 수 있음 -
%
-부모 요소 대비 비율
-height: %사용 시 주의사항 : body의 기본 height값은 0임. -
em : 현재 요소의 글꼴 크기 기준 크기
-
rem : html의 글꼴 크기 기준 상대 크기.html 글꼴 default: 16px
-
vh, vw : viewport 대비 비율
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 30px;
}
div {
border: 2px solid red;
}
.root {
width: 70%;
}
/* % : 부모 대비 비율로 크기 정함.
모바일에서 작동하거나 데스크탑 인터넷 창 크기를 조절하여도 비율 고정됨 */
.parent {
width: 50%;
}
/* px : 고정 단위이므로,
화면의 해상도에 따라 크기가 다르게 보일 수 있으며
인터넷 창 화면을 줄어도 크기가 연동되어 변하지 않음 */
.child {
width: 100px;
}
</style>
</head>
<body>
<div class="root">ROOT
<div class="parent">PARENT
<div class="child">CHILD1</div>
<div class="child">CHILD2</div>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
margin: 0;
box-sizing: border-box;
}
} div {
border: 2px solid blue;
}
/* em : 현재 요소의 글꼴 크기 기준으로 크기 설정.
현재 요소의 글꼴 크기가 지정되어 있지 않을 경우, 부모 요소의 글꼴 크기 지정.
아래 예시의 경우 html의 default 글꼴 크기인 16px를 상속 받음
*/
.root {
font-size: 0px;
width: 5em; /* root 폰트 크기 변경 시 width로 변경됨 */
border: 1px solid gray;
}
.parent {
/* /* rem : html의 글꼴 크기 기준 상대 크기.html 글꼴 default: 16px */
font-size: 20px;
width: 10rem;
}
</style>
</head>
<body>
<!-- .root>.parent>.child*2 -->
<div class="root">ROOT
<div class="parent">PARENT
<div class="child">CHILD1</div>
<div class="child">CHILD2</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
background: orange;
/* margin(외부여백)
- 약어 : mg
- 기본세팅 :
(1) body : 상하 8px
(2) p : 위아래 1em~1.5em
(3) h1~h6 : 위아래 0.5em~2em */
margin: 0;
/* vw, vh : 반응형 크기 조절*/
width: 50vw;
height: 50%;
/* height: 50% */
/* height: 50% 으로 설정할 경우 어떻게 되느냐?
-> body에 height 따로 설정하지 않을 경우, body의 height=0이므로,
height:50%는 결과적으로 height:0;이 되어버림 */
}
</style>
</head>
<body>
<div class="box">박스박스</div>
</body>
</html>