Day 5~!!
font-size, color, line-height 구글링해보고 실습하기
1. font-size
개념 : 글자 크기를 정하는 속성 [px, %, em, rem]
- %, em : 부모 요소의 글자 크기에 대한 상대적인 글자 크기 (100%, 1em = 부모 글자와 사이즈 같다)
- rem : html 요소의 글자 크기에 대한 상대적인 글자 크기
2. color
개념 : 글자의 색상을 정하는 속성
- red, blue등 이미 정의된 색
- #000, #FFFFFF 등의 16진수 색상 코드
- rgb(255, 255, 255) 등의 rgb 색상
- rgba(200, 100, 150, 0.5) 등의 알파(투명도)가 적용된 rgba 색상
3. line-height
개념 : 줄 높이를 정하는 속성
<!DOCTYPE html>
<html lang="en">
<head>
<title>나의 웹사이트</title>
<style>
html { font-size: 32px; }
.sizemedium { font-size: 16px; }
.sizebig { font-size: 1.5em; }
.case1 {line-height: normal; }
.case2 {line-height: 25px; }
.case3 {line-height: 1.6; }
.case4 {line-height: 160%; }
</style>
</head>
<body>
<h1 class="sizebig">오늘 배운 내용</h1>
<div>
<h2 class="html">1. font-size</h2>
<p class="sizemedium">글자 크기를 정하는 속성 [px, %, em, rem]</p>
</div>
<div>
<h2 class="html">2. color</h2>
<p style="color: red"> 글자의 색상을 정하는 속성</p>
</div>
<div>
<h2 class="html">3. line-height</h2>
<p>줄 높이를 정하는 속성</p>
<h3>line-height: normal (16px) </h3>
<p class="case1">‘일찌기’가 ‘그 옛날’이었다면 ‘예전에’였다면 이 한 구절은 시가 되었을까. 우리들 가운데 그 누구라도 애초부터 아무것이지 않은 자, 있었다면 나는 그 사람 알 깼다고 본다. 메추리인가 싶고 닭인가 싶고 오리인가 싶은 거지. 그런 의미에서 이 한 구절의 절망과 이 한 구절의 희망은 딱 시다 싶다. 시라는 자유가 터지는 순간의 구절이지 싶다. 김민정 시인</p>
<h3>line-height: 25px</h3>
<p class="case2">‘일찌기’가 ‘그 옛날’이었다면 ‘예전에’였다면 이 한 구절은 시가 되었을까. 우리들 가운데 그 누구라도 애초부터 아무것이지 않은 자, 있었다면 나는 그 사람 알 깼다고 본다. 메추리인가 싶고 닭인가 싶고 오리인가 싶은 거지. 그런 의미에서 이 한 구절의 절망과 이 한 구절의 희망은 딱 시다 싶다. 시라는 자유가 터지는 순간의 구절이지 싶다. 김민정 시인</p>
<h3>line-height: 1.6 </h3>
<p class="case3">‘일찌기’가 ‘그 옛날’이었다면 ‘예전에’였다면 이 한 구절은 시가 되었을까. 우리들 가운데 그 누구라도 애초부터 아무것이지 않은 자, 있었다면 나는 그 사람 알 깼다고 본다. 메추리인가 싶고 닭인가 싶고 오리인가 싶은 거지. 그런 의미에서 이 한 구절의 절망과 이 한 구절의 희망은 딱 시다 싶다. 시라는 자유가 터지는 순간의 구절이지 싶다. 김민정 시인</p>
<h3>line-height: 160% </h3>
<p class="case4">‘일찌기’가 ‘그 옛날’이었다면 ‘예전에’였다면 이 한 구절은 시가 되었을까. 우리들 가운데 그 누구라도 애초부터 아무것이지 않은 자, 있었다면 나는 그 사람 알 깼다고 본다. 메추리인가 싶고 닭인가 싶고 오리인가 싶은 거지. 그런 의미에서 이 한 구절의 절망과 이 한 구절의 희망은 딱 시다 싶다. 시라는 자유가 터지는 순간의 구절이지 싶다. 김민정 시인</p>
</div>
</body>
</html>
'WEB' 카테고리의 다른 글
[WEB] CSS 기본실습(2) (flex, gird 레이아웃) (0) | 2022.02.27 |
---|---|
[WEB] CSS 기본실습(2) (0) | 2022.02.26 |
[WEB] HTML 기본실습(3) (0) | 2022.02.24 |
[WEB] HTML 기본 실습(2) (0) | 2022.02.23 |
[WEB] HTML 기본 실습 (0) | 2022.02.22 |