|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 02</title>
<style type="text/css">
/*스타일 적용 순위*/
/* 0순위 - 인라인 선택자*/
/* 1순위 - 아이디 선택자*/
/* 2순위 - 가상 클래스 선택자*/
/* 3순위 - 클래스 선택자*/
/* 4순위 - 가상요소 선택자*/
/* 5순위 - 태그 선택자*/
/* 6순위 - 전체 선택자*/
/*---------------------------------------------------------------------------------------------*/
/*단위*/
/* - px - 절대단위 모니터의 화면을 구성하는 사각형 1개의 크기. 가장 기본이 되는 단위*/
/* - % - 부모의 크기에 상대적인 크기*/
/* - em - 부모 요소의 텍스트 크기에 상대적인 크기 (배수로 적용)*/
/* - rem - html 태그의 텍스트 크기에 상대적인 크기 (배수로 적용)*/
/* - vw - 뷰포트의 너비를 기준으로 상대적인 크기 (1%단위 적용)*/
/* - vh - 뷰포트의 높이를 기준으로 상대적인 크기 (1%단위 적용)*/
/*---------------------------------------------------------------------------------------------*/
/*같은 스타일의 명령이 2개 이상 있으면 마지막에 적용한 스타일로 적용된다*/
/*---------------------------------------------------------------------------------------------*/
/*●●●●●●●●●●●●●●●●●●●● 폰트 색상 ●●●●●●●●●●●●●●●●●●●●*/
.color {color:red} /*폰트 색상을 설정*/
.color {color:blue}
.color {color:green}
/*●●●●●●●●●●●●●●●●●●●● 폰트 크기 ●●●●●●●●●●●●●●●●●●●●*/
.font-size {font-size:20px} /*폰트 사이즈 20px로 설정*/
/*●●●●●●●●●●●●●●●●●●●● 폰트 굵기 ●●●●●●●●●●●●●●●●●●●●*/
.font-weight-100 {font-weight:100} /*폰트의 굵기를 설정*/
.font-weight-900 {font-weight:900} /*속성값 (min:100, max:900)*/
/*normal - 보통 굵기 400에 해당*/
/*bold - 굵은 굵기 700에 해당*/
/*bolder - 상속된 값보다 굵게*/
/*lighter - 상속된 값보다 얇게*/
/*initial - 기본값으로 설정*/
/*inherit - 부모 요소의 값을 상속*/
/*●●●●●●●●●●●●●●●●●●●● 폰트 스타일 ●●●●●●●●●●●●●●●●●●●●*/
.font-style1 {font-style:normal} /*폰트 스타일 변경 (기본)*/
.font-style2 {font-style:italic} /*폰트 스타일 변경 (이탤릭체)*/
.font-style3 {font-style:oblique} /*폰트 스타일 변경 (기울임)*/
/*●●●●●●●●●●●●●●●●●●●● 폰트 소문자를 작은 대문자 변경 ●●●●●●●●●●●●●●●●●●●●*/
.font-variant {font-variant:small-caps} /*소문자를 작은 대문자로 변경*/
/*●●●●●●●●●●●●●●●●●●●● 텍스트 정렬 ●●●●●●●●●●●●●●●●●●●●*/
.text-align-left {text-align:left} /*텍스트를 왼쪽으로 정렬*/
.text-align-right {text-align:right} /*텍스트를 오른쪽으로 정렬*/
.text-align-center {text-align:center} /*텍스트를 중앙으로 정렬*/
.text-align-justify {text-align:justify} /*텍스트를 뛰우기 기준으로 양쪽으로 정렬*/
/*●●●●●●●●●●●●●●●●●●●● 텍스트 선 장식 ●●●●●●●●●●●●●●●●●●●●*/
.text-decoration1 {text-decoration:none} /*텍스트 장식을 모드 삭제*/
.text-decoration2 {text-decoration:line-through} /*텍스트 중간에 선*/
.text-decoration3 {text-decoration:overline} /*텍스트 위에 선*/
.text-decoration4 {text-decoration:underline} /*텍스트 아래에 선*/
/*●●●●●●●●●●●●●●●●●●●● 텍스트 사이 간격 설정 ●●●●●●●●●●●●●●●●●●●●*/
.letter-spacing {letter-spacing:20px} /*텍스트 사이 간격을 20px로 설정*/
/*●●●●●●●●●●●●●●●●●●●● 텍스트 한줄의 높이 설정 ●●●●●●●●●●●●●●●●●●●●*/
.line-height1 {line-height:normal} /*웹 브라우저의 기본값을 적용*/
.line-height2 {line-height:3.5} /*기본값의 3.5배로 설정*/
.line-height3 {line-height:200%} /*기본값의 200%설정*/
.line-height4 {line-height:100px} /*한줄의 높이 값을 100px로 설정*/
</style>
</head>
<body>
<p class="color">폰트 색상을 변경 (마지막에 적용한 값이 적용 되었다)</p>
-------------------------------------------------- <br>
<p class="font-size">폰트 사이즈를 20으로 설정</p>
-------------------------------------------------- <br>
<p class="font-weight-100">폰트의 굵기를 100으로 설정</p>
<p class="font-weight-900">폰트의 굵기를 900으로 설정</p>
-------------------------------------------------- <br>
<p class="font-style1">폰트 스타일 변경 (기본)</p>
<p class="font-style2">폰트 스타일 변경 (이탤릭체)</p>
<p class="font-style3">폰트 스티일 변경 (기울임)</p>
-------------------------------------------------- <br>
<p class="font-variant">abcdefg 소문자를 작은 대문대로 표기</p>
-------------------------------------------------- <br>
<p class="text-align-left">왼쪽으로 정렬</p>
<p class="text-align-right">오른쪽으로 정렬</p>
<p class="text-align-center">중앙으로 정렬</p>
<p class="text-align-justify">뛰우기 기준으로 양쪽으로 정렬 111111111 2222222222 3333333333 44444444444</p>
-------------------------------------------------- <br>
<del class="text-decoration1">del 태그라서 중간에 줄이 있어야 하지만 삭제된 모습</del>
<p class="text-decoration2">중간을 관통하는 선</p>
<p class="text-decoration3">위쪽에 선</p>
<p class="text-decoration4">아래에 선</p>
-------------------------------------------------- <br>
<p class="letter-spacing">글자 사이 간격 조절</p>
-------------------------------------------------- <br>
<p class="line-height1">기본설정</p>
<p class="line-height2">한줄의 높이를 3.5배 설정</p>
<p class="line-height3">한줄의 높이를 200% 설정</p>
<p class="line-height4">한줄의 높이를 100px 설정</p>
</body>
</html>
|
폰트 색상을 변경 (마지막에 적용한 값이 적용 되었다) --------------------------------------------------폰트 사이즈를 20으로 설정 --------------------------------------------------폰트의 굵기를 100으로 설정 폰트의 굵기를 900으로 설정 --------------------------------------------------폰트 스타일 변경 (기본) 폰트 스타일 변경 (이탤릭체) 폰트 스티일 변경 (기울임) --------------------------------------------------abcdefg 소문자를 작은 대문대로 표기 --------------------------------------------------왼쪽으로 정렬 오른쪽으로 정렬 중앙으로 정렬 뛰우기 기준으로 양쪽으로 정렬 111111111 2222222222 3333333333 44444444444 --------------------------------------------------중간을 관통하는 선 위쪽에 선 아래에 선 --------------------------------------------------글자 사이 간격 조절 --------------------------------------------------기본설정 한줄의 높이를 3.5배 설정 한줄의 높이를 200% 설정 한줄의 높이를 100px 설정 |
'CSS' 카테고리의 다른 글
| CSS - float, clear (0) | 2023.04.04 |
|---|---|
| CSS position - relative, absolute, fixed, sticky, z-index (0) | 2023.04.04 |
| CSS box관련 - margin, border, padding, content (0) | 2023.04.02 |
| CSS 선택자 이용방법 (0) | 2023.03.20 |
| CSS 문법 형식 (0) | 2023.03.20 |