px 픽셀
ppi 픽셀퍼인치
% 퍼센트
html 구성요소의 크기를
웹페이지 높이와 너비를 기준으로 결정할 수 있도로 한다.
em 부모요소의 폰트사이즈를 기준으로 상대크기 계산.. 중첩된다.
rem root 폰트사이즈를 기준으로 상대크기 계산
hex
16진수 색상표
#rrggbb
ex) #8a2be2: 보라색
rgb(rrr, ggg, bbb)
ex) rgb(138, 43, 266)
<style>
html {
background-color: green;
}
.box1 {
text-align: center;
font-weight: 800;
font-size: 4em;
background-color: red;
/* 현재 화면 크기를 기준으로 */
width: 40vw;
}
.box2 {
text-align: center;
font-size: 4em;
background-color: orange;
width: 40vw;
height: 20vh;
}
</style>
<body>
<div class="box1">box</div>
<div class="box2">box</div>
</body>
예제)
html 태그
box1, box2, box3 클래스의 스타일을 css 구문으로 정의했다.
<style>
html {
background-color: #030330;
color: greenyellow;
font-size: 2em;
}
.box1 {
background-color: #d400ff;
padding: 20px;
margin: 10px;
width: 30vw;
}
.box2 {
background-color: rgb(138, 43, 226);
padding: 20px;
margin: 10px;
width: 35vw;
}
.box3 {
background-color: rgba(138, 43, 226, 0.5);
padding: 20px;
margin: 10px;
width: 40vw;
}
</style>
<body>
<div class="box1">HEX 색상: #8a2be2</div>
<div class="box2">RGB 색상: rgb(138, 43, 266)</div>
<div class="box3">RGBA 색상: rgb(138, 43, 266, 0.5)</div>
</body>
'HTML CSS' 카테고리의 다른 글
| html/css) css선택자 - 결합선택자 (0) | 2025.05.29 |
|---|---|
| html/css) css선택자 - 기본선택자 (0) | 2025.05.29 |
| html/css) css 선택자 selector (0) | 2025.05.28 |
| html/css) 시멘틱 태그 semantic tag (0) | 2025.05.28 |
| html/css) table 태그로 표 만들기 (0) | 2025.05.28 |