JUST GO
[속성] CSS 속성 본문
background-color 속성
- background-color 속성(Property)은 선택한 요소의 배경 색상을 지정하기 위해 사용한다.
- 색상 지정 방법은 아래와 같다.
- 리터럴(Literal) : 미리 지정된 시스템의 색상을 단어로 표시한 것. 가령, red, green, blue, black, white 등이 있음.
- RGB 함수 : rgb(r, g, b) 함수를 통해 색을 지정한다. 이 때 각 r, g, b 값은 0부터 255까지 이며 숫자가 높을수록 각 적, 녹, 청색이 많이 들어가게 된다. 가령 rgb(255, 0, 0)은 완전 빨간색(red)이며, rgb(0, 0, 0)은 검은색(black), rgb(255, 255, 255)는 흰색(white)이다.
3. RGBA 함수 : rgba(r, g, b, a) 함수를 통해 색을 지정한다. 위 RGB 함수와 용법은 동일하며 마지막 a 값은 불투명도이고 0% 부터 100%까지의 값이다. 0%는 완전 투명, 100%는 완전 불투명이다.
4. 헥스 코드(Hex Code, 16진법 코드) : #rrggbb 혹은 #rrggbbaa 방식으로 작성한다. 각 rr, gg, bb, aa 값은 00부터 ff까지 적을 수 있다. 이는 RGB 함수의 각 r, g, b 10진법 값이 16진법으로 변한 값으로, 0을 00으로, 255를 ff로 표시한다. 이 때 불투명도(aa) 값 또한 0% ~ 100%에 해당하는 값을 00 부터 ff 까지의 16진수로 표시한다. 마찬가지로 00은 완전 투명, ff는 완전 불투명이다.
- (불투명도 %) *255 / 100 값에 대해 소수점을 절사하고 해당 값을 16진수로 변환하면 된다.
- 가령, 50%의 불투명도는 50 * 255 / 100의 방식으로 계산되며 이 값은 127.5 이고 절사하면 127이 된다. 이 10진수 값 127을 16진수로 변환하면 7f가 된다.
width 및 height 속성
- width는 가로크기를, height는 세로크기를 지정하기 위해 사용한다.
- 단, display가 inline인 요소(span, a등)는 그 display 값을 다른 것으로 변경하기 전에는 width 및 height 속성이 적용되지 않는다.
- 크기는 아래와 같은 단위를 사용할 수 있다.
- 픽셀(Pixel) : 픽셀 단위로 크기를 지정한다. 가령 100px. 단, 픽셀 단위는 정적인 단위(Static Unit)임으로 사용을 피한다.
- em : 부모가 가진 폰트 크기(font-size)에 대비하는 비율로서의 크기이다. 가령, 부모 요소의 폰트 크기가 16px 이라면 1em은 16px과 동일하다.
- rem : 브라우저에서 설정한 폰트 크기에 대비하는 비율로서의 크기이다. 가령, 브라우저에 기본 폰트 크기가 16px 이라면 1rem은 16px과 동일하다.
- vw (Viewport Width) : 현재 브라우저의 가로 크기에 대비하는 비율이다. 가령 100vw는 화면 가로 크기 전체이고 50vw는 그 절반이다.
- vh(Viewport Height) : 현재 브라우저의 세로 크기에 대비하는 비율이다. 가령 100vh는 화면 세로 크기 전체이고 50vh는 그 절반이다. 단, 이 때 스크롤 바의 크기는 무시함으로 주의한다.
position 속성
- position 속성(Property)은 해당 요소가 어떻게 위치할 것인가에 대한 설정이다.
- 기본 값은 static 이고, 사용할 수 있는 속성 값은 아래와 같다.
- static : 해당 요소가 원래 위치해야하는 위치에 위치하도록 한다.
- relative : 해당 요소가 원래 위치해야하는 위치에 위치하거나 해당 위치를 기준으로 움직이도록 한다.
- absolute : position 속성 값이 static이 아닌 가장 가가운 부모를 기준으로 움직인다. 단, 그러한 부모가 없다면 문서를 기준으로 움직인다. 다른 요소나 텍스트의 흐름에 영향을 끼치지 않는다.
- fixed : 뷰포트를 기준으로 움직이고, 스크롤의 영향을 받지 않는다. 다른 요소나 텍스트의 흐름에 영향을 끼치지 않는다.
- ...
top, right, bottom, left 속성
- position 속성 값이 static이라면 무시된다.
- top : 해당 요소의 윗변을 기준으로 이동한다.(bottom과 함께 쓰지 않는다.)
- right : 해당 요소의 우변을 기준으로 이동한다.(left와 함께 쓰지 않는다.)
- bottom : 해당 요소의 아랫변을 기준으로 이동한다.(top과 함께 쓰지 않는다.)
- left : 해당 요소의 좌변을 기준으로 이동한다.(right와 함께 쓰지 않는다.)
=position 활용해서 화면 구성해보기=
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>test2</title>
<style>
body {
margin: 0;
padding: 0;
}
body > div {
background-color: rgb(225,225,200);
width: 27.5rem;
height: 30rem;
}
body > div > div:nth-of-type(1) {
background-color: rgb(100,200,255);
width: 11.5rem;
height: 12.75rem;
top: 1.5rem;
left: 1.5rem;
position: absolute;
}
body > div > div:nth-of-type(2) {
background-color: rgb(100,200,255);
width: 11.5rem;
height: 12.75rem;
top: 1.5rem;
left: 14.5rem;
position: absolute;
}
body > div > div:nth-of-type(3) {
background-color: rgb(100,200,255);
width: 11.5rem;
height: 7.75rem;
top: 15.75rem;
left: 1.5rem;
position: absolute;
}
body > div > div:nth-of-type(4) {
background-color: rgb(100,200,255);
width: 11.5rem;
height: 7.75rem;
top: 15.75rem;
left: 14.5rem;
position: absolute;
}
body > div > div:nth-of-type(5) {
background-color: rgb(50,200,50);
width: 11.5rem;
height: 5rem;
top: 23.5rem;
left: 1.5rem;
position: absolute;
}
body > div > div:nth-of-type(6) {
background-color: rgb(50,200,50);
width: 11.5rem;
height: 5rem;
top: 23.5rem;
left: 14.5rem;
position: absolute;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>'CSS > 학습내용' 카테고리의 다른 글
| [의사클래스] 의사클래스 종류 (0) | 2022.10.03 |
|---|---|
| [선택자] 선택자 종류 (0) | 2022.10.03 |
| [결합자] 결합자 종류 (0) | 2022.10.03 |
| [선택자] ID 선택자 (1) | 2022.10.03 |
| [선택자] 클래스 선택자 (0) | 2022.10.03 |