CSS 단위 속성
키워드 단위
- 키워드를 입력하면 해당하는 스타일이 자동으로 적용
크기 단위
- CSS3에서 가장 많이 사용하는 단위
- font-size, width, height 속성 등에 적용
상대 크기 절대 크기 em px rem cm % mm in pt - 상대 크기
- em: 비율 (부모를 기준으로 크기가 정해짐)
-
부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정
-
부모 요소에 따라서 크기가 변경되어야 하는 경우에 사용
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style> p { font-size: 2em; } div { font-size: 20px; background: yellow; } </style> </head> <body> <!-- 16px --> 안녕하세요1 <!-- 32px --> <p>안녕하세요2</p> <div> <!-- 20px --> 안녕하세요3 <!-- 40px --> <p>안녕하세요4</p> </div> </body> </html>
-
- rem: 비율 (root를 기준으로 크기가 정해짐)
-
문서 시작 부분(root)에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정
-
웹 페이지 내에서 항상 고정된 크기를 가져야 하는 경우에 사용
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style> p { font-size: 2rem; } .div1 { font-size: 20px; background: yellow; } .div2 { font-size: 3rem; } </style> </head> <body> <!-- 16px --> 안녕하세요1 <!-- 32px --> <p>안녕하세요2</p> <div class="div1"> <!-- 20px --> 안녕하세요3 <!-- 32px --> <p>안녕하세요4</p> <!-- 48px --> <div class="div2">안녕하세요5</div> </div> </body> </html>
-
- %: 퍼센트
배수 em % 1배 1em 100% 1.5배 1.5em 150% 2배 2em 200%
- em: 비율 (부모를 기준으로 크기가 정해짐)
- 절대 크기
- px: 픽셀 수
- cm: 센티미터
- mm: 밀리미터
- in: 인치
- pt: 포인터
색상 단위
- rgb(red, green, blue): RGB 색상 단위
- rgba(red, green, blue, alpha): RGBA 색상 단위
- #000000: HEX 코드 단위
RGB 색상 단위
- R(빨간색), G(초록색), B(파란색)을 조합해 색상을 표현
- 0부터 255 사이의 숫자를 입력
RGBA 색상 단위
- RGB 색상 단위에 알파 값을 추가한 형태 (투명도)
- 알파 값
- 투명도를 나타내며 0.0부터 1.0 사이의 숫자를 입력
- 0.0: 완전 투명
- 1.0: 완전 불투명
- 알파 값
HEX 코드 단위
- RGB 색상 단위를 짧게 입력하는 방법
- RGB 색상 조합을 16진수로 입력
- 각 색상 요소에 00에서 FF 사이의 값 입력
URL 단위
- url(’경로’): 이미지나 글꼴 파일을 불러올 때 사용
CSS 글자 속성
font-size 속성
- 글자 크기를 지정하는 속성
- 크기 단위 또는 정해진 키워드를 입력할 수 있음
font-family 속성
- 글꼴을 지정하는 속성
- 컴퓨터에 설치된 글꼴을 입력할 수 있음
font-family 속성 사용 시 주의점
- 개발자 컴퓨터에는 글꼴이 설치되어 있지만, 사용자 컴퓨터에는 글꼴이 없는 경우를 대비해야 함
- 해결 방법
- font-family 속성을 여러 개 입력
- font-family 속성의 마지막에 Serif체(명조체), Sans-serif체(고딕체), Mono space(고정폭 글꼴)을 입력
기타 속성
font-style
- 글자의 기울기를 조절하는 속성
- italic, normal 등의 값으로 지정
font-weight
- 글자의 두께를 조절하는 속성
- 100~900 사이의 숫자로 글자의 굵기를 지정
- 정확한 수치가 필요 없는 경우 normal, bold 등으로 지정
기타 글자 속성
text-align 속성
- 글자의 정렬과 관련된 속성
font 속성
- font-style, font-weight, font-size, font-family를 순서대로 지정하는 단축 속성
- font-size, font-family를 제외하고 생략 가능
{font: italic bold 20px consolas, sans-serif;}
/* 20픽셀로 이탤릭 스타일에 bold 굵기로 consolas체 */text-decoration 속성
- 주로 하이퍼링크의 밑줄을 제거할 때 사용
- 밑줄만 제거되며, 글자의 색상은 color 속성을 사용해 별도로 지정해야 함
text-decoration 속성 값
| text-decoration 속성 | |
|---|---|
| none | 글자의 밑줄 제거 |
| overline | 글자의 윗줄 생성 |
| line-through | 글자의 중간줄 생성 |
text-indent 속성
- 글자 들여쓰기 기능
text-shadow 속성
- 글자에 그림자 효과를 적용
- text-shadow: h-shadow v-shadow blur-radius color|none
text-shadow 속성 h-shadow 원본과 그림자 텍스트의 수평 거리 v-shadow 원본과 그림자 텍스트의 수직 거리 blur-radius 흐릿한 그림자 효과 color 그림자 색 none 그림자 효과 없음
[실습] 텍스트 그림자 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
div {
font: normal 24px verdata;
}
.dropText {
text-shadow: 3px 3px;
}
.redText {
text-shadow: 3px 3px 0px red;
}
.blurText {
text-shadow: 3px 3px 5px skyblue;
}
.glowEffect {
text-shadow: 0px 0px 3px red;
}
.wordArtEffect {
color: white;
text-shadow: 0px 0px 3px darkblue;
}
.threeDEffectP {
color: white;
text-shadow: 2px 2px 4px black;
}
.multiEffect {
color: yellow;
text-shadow: 2px 2px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
<h3>텍스트 그림자 만들기</h3>
<hr />
<div class="dropText">Drop Shadow</div>
<div class="redText">Color Shadow</div>
<div class="blurText">Blur Shadow</div>
<div class="glowEffect">Glow Effect</div>
<div class="wordArtEffect">WordArt Effect</div>
<div class="threeDEffect">3D Effect</div>
<div class="multiEffect">Multiple Shadow Effect</div>
</body>
</html>새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 1주차 블로그 포스팅
