단위
절대 / 상대 길이 단위
- 절대 길이 단위의 종류
◽ px (cm, mm, in ...)
- 상대 길이 단위의 종류
◽ %, vw, vh, vmin, vmax, em, rem
절대 길이 단위
px
- 이미지를 표현하는 가장 작은 단위
- 고정된 값이기 때문에 직관적으로 쉽게 사용가능
- px 단위만 사용하면 안되는 이유
◽ 다양한 디바이스가 생겨나며 픽셀 미도도 다양해짐
◽ 디바이스별로 다른 위치, 크기로 보이는 문제가 발생
상대 길이 단위
%
- 부모 요소를 기준으로 하는 백분율 단위
vw, vh
- 뷰포트(화면) 넓은(w), 높이(h)를 기준으로 하는 백분율 단위
- 1vw = 화면의 1%
vmin, vmax
- 화면의 넓이와 높이 중 작은 값(min), 큰 값(max)을 기준으로 하는 백분율
em
- 부모 요소로부터 상속받은 요소의 글자 크기를 기준으로 하는 배수 단위
rem
- = root em
- 최상의 요소(<html>)의 글자 크기를 기준으로 하는 배수 단위
- <html> 의 기본 폰트 사이즈는 16px
텍스트 꾸미기
폰트 크기
크기 속성의 여러 단위 종류
- px : 절대 단위
- em : 현재 요소의 부모 요소에 설정된 글꼴 크기 상대 단위
- rem : 루트요소(html)에 설정된 글꼴 크기 상대 단위
font-weight (폰트 굵기)
- normal ~ bold : 기본 ~ 굵게
- lighter ~ bolder : (현재 요소의 굵기를 부모 요소 굵기보다 한 단계) 가볍게 ~ 두껍게
- 100 ~ 900
text-transform (대소문자 변경)
- none : 변형 방지
- uppercase : 모든 텍스트를 대문자로
- lowercase : 모든 텍스트를 소문자로
- capitalize : 모든 단어의 첫 글자를 대문자로
p::first.letter{
text-transform: uppercase;
}
text-decoration (단축 속성)
text-decoration-color
text-decoration-line
- underline: 밑줄 긋기
- overline: 오버라인
- line-through : 취소선
text-decoration-style
- solid : 실선
- wavy : 파동 모양 선
- dashed : 대쉬선
text-decoration-thickness
.dashed {
text-decoration: lime underline overline dashed auto;
}
.wavy{
text-decoration-color: royalblue;
text-decoration-line: line-through underline overline;
text-decoration-style: wavy;
text-decoration-thickness:5px;
}
text-shadow
- 텍스트에 그림자 추가
- offset-x | offset-y | blur-radius | color
- box-shadow = 상자 그림자
text-align
- 텍스트의 가로정렬을 설정
- left : 왼쪽 정렬
- right : 오른쪽 정렬
- center : 중앙 정렬
- justify : 양쪽 정렬
- justify-all : 양쪽 정렬 (마지막 줄 적용)
◽ 양쪽 정렬 적용 시, 불규칙한 여백이 생겨 가독성을 떨어뜨림
vertical-align
- 텍스트의 세로정렬을 설정
- 인라인, 인라인 블록 및 테이블 셀 요소에만 적용
- 블록 레벨 요소를 수직으로 정렬하는 데 사용 X
.block {
display: flex;
align-items: center;
}
line-height
- 행간 (줄과 줄사이)을 설정
- 단위, 배수, % 등의 값으로 설정
letter-spacing
- 자간 (글자와 글자사이)을 설정
- 단위 값으로 설정 가능
word-spacing
- 단어와 단어사이의 간격을 설정
- 단위 값으로 설정 가능
text-indent
- 들여쓰기의 길이를 설정
word-break
- 텍스트가 자신의 콘텐츠 박스 밖으로 넘어갈 경우, 줄바꿈 여부를 지정
- normal : 기본 줄 바꿈 규칙을 사용
- break-all : 글 넘침을 방지하기 위해서 어떠한 두 문자 사이에서도 줄바꿈이 발생 가능
- keep-all : 한중일 텍스트에서 줄을 바꿀 때 단어를 끊지 X
text-overflow
- 텍스트가 넘칠 경우, 어떻게 표시할 지를 설정
- 말줄임 처리를 할 때 자주 사용
- ellipsis : 말줄임
.ellipsis{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}기타
font-style
- 이탤릭체 사용 기울임 글꼴
p {
font-style: italic;
}
font (단축속성)
- font : font-style | font-variant | font-weight | font-stretch | font-size | line-height | font-family
- 순서 중요함
- line-height는 font-size를 꼭 적고 사용
p {
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
}[해보기] 슬로건 만들기
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="[해보기] 슬로건.css" />
<title>[해보기] 슬로건</title>
<style>
.jobless {
font-size: 61px;
}
.study {
text-decoration: orange;
text-decoration-line: underline;
text-shadow: 5px 5px 6px orange;
color: orangered;
}
.camp {
color: skyblue;
font-size: 65px;
}
.coffee {
color: brown;
font-size: 65px;
}
.albamon {
font-size: 55px;
line-height: 2px;
}
.partime {
color: purple;
text-decoration: violet wavy;
text-decoration-line: underline;
text-shadow: 5px 5px 6px violet;
}
</style>
</head>
<body>
<span class="jobless"
>평일에는 <span class="camp">부트캠프</span>듣는
<span class="study">취준생</span></span
><br />
<img src="../albamon.jfif" width="650px" /><br /><br /><br /><br />
<span class="albamon"
>주말에는 <span class="coffee">커피</span>만드는
<span class="partime">알바생</span></span
>
</body>
</html>@font-face {
font-family: "HSGooltokki";
src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/HSGooltokki.woff2")
format("woff2");
font-weight: normal;
font-style: normal;
}
.jobless {
font-family: "HSGooltokki";
}
@font-face {
font-family: "CWDangamAsac-Bold";
src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/CWDangamAsac-Bold.woff")
format("woff");
font-weight: normal;
font-style: normal;
}
.albamon {
font-family: "CWDangamAsac-Bold";
}
@font-face {
font-family: "양진체";
src: url("https://fastly.jsdelivr.net/gh/supernovice-lab/font@0.9/yangjin.woff")
format("woff");
font-weight: normal;
font-style: normal;
}
.camp {
font-family: "양진체";
}
.coffee {
font-family: "양진체";
}[해보기] 실습
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>css 실습</title>
<style>
html {
font-size: 10px;
}
p {
font-size: 4rem;
}
h2 {
font-size: 40px;
}
h3 {
font-size: 2em;
}
.parents {
width: 25vw;
font-size: 50px;
background-color: aqua;
}
.child1 {
font-size: 50%;
width: 50vw;
background-color: palevioletred;
}
.child2 {
font-size: 50%;
width: 100vw;
background-color: greenyellow;
}
</style>
</head>
<body>
<p>rem을 사용해서 font-size: 40px;</p>
<h2>px을 사용해서 font-size: 40px;</h2>
<h3>em을 사용해서 font-size: 20px;</h3>
<div class="parents">
너비가 뷰포트를 기준으로 1/4
<br />
font-size: 50px;
<div class="child1">
글씨의 사이즈는 부모의 50%
<br />
너비가 뷰포트 기준으로 1/2
<div class="child2">
글씨의 사이즈는 부모의 50%
<br />너비가 뷰포트 기준으로 100%
</div>
</div>
</div>
</body>
</html>
'ESTsoft > 프론트엔드 오르미 1기' 카테고리의 다른 글
| [EST] 240617 CSS-04 (0) | 2024.06.27 |
|---|---|
| [EST] 240614 CSS-03 (0) | 2024.06.27 |
| [EST] 240612 CSS-01 (0) | 2024.06.26 |
| [EST] 240611 HTML-05 (0) | 2024.06.25 |
| [EST] 240610 HTML-04 (0) | 2024.06.25 |
