-
02. 글자 꾸미기프론트엔드/CSS 2020. 9. 2. 01:11반응형SMALL
# What?
font-size : 폰트크기(14px, 16px..)
font-weight : 폰트굵기(medium, bold...)
font-family : 글씨체
line-height : 줄간격
# How? 어떻게 꾸미는데?
@ index.html
<!DOCTYPE html> <!-- 이 문서가 HTML5 문서라는 뜻 --> <html lang="ko"> <!-- 웹 문서의 시작 --> <head> <!-- 웹 문서에 대한 정보를 담는 태그 --> <meta charset="UTF-8"> <!-- 문자 인코딩을 UTF-8로 하라는 뜻 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 초기엔 1배율로 페이지를 보여주라는 뜻 --> <title>Document</title> <!-- 문서 제목 --> <link rel="stylesheet" href="./style.css"> <!-- css를 연결하는 태그 --> <script src="./common.js"></script> <!-- js를 연결하는 태그 --> </head> <body> <p class="text01">폰트 사이즈</p> <p class="text02">폰트 굵기</p> <p class="text03">글씨체</p> <br/><br/> <p> 줄간격이 뭘가? <br/>차이점이 뭘가? </p> <p class="text04"> 줄간격이 뭘가? <br/>차이점이 뭘가? </p> </body> </html>@ style.css
.text01 {font-size:40px;} .text02 {font-weight:bold;} .text03 {font-family:monospace;} .text04 {line-height:30px;}@ Practice 문제
화면에 다음과 같은 글씨 띄우기
이것은 48px 굵은 글씨
이것은 24px
LIST'프론트엔드 > CSS' 카테고리의 다른 글
input date 캘린더 꾸미는법 #date #calendar #캘린더 #input (0) 2023.07.20 html css 여러줄 말줄임 처리 (0) 2023.02.02 SVG background로 넣기 (0) 2022.01.24 01. CSS (0) 2020.09.01