반응형
명언
- 두 따옴표는 폰트 크기는 96px(32px의 300%)입니다.
- 위 사진에서 빨간 줄은 margin입니다.
- 위 사진에서 초록 줄은 포지셔닝을 통한 이동입니다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>명언</title>
<meta charset="utf-8">
<link rel="stylesheet" href="Styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
</head>
<body>
<div class="quote">
<span class="qmark open-qmark">“</span>
정상에 오르고 싶다는 생각만으로
정상에 오르는게 아니야, 올라야지 <span class="qmark close-qmark">“</span>
<div class="figure"> 조승우 </div>
</div>
</body>
</html>.quote {
font-size: 32px;
line-height: 32px;
text-align: center;
margin-top: 75px;
font-family: 'Do Hyeon', sans-serif;
}
.figure {
margin-top: 50px;
}
.qmark {
font-size: 96px;
position: relative;
}
.open-qmark {
margin-right: 15px;
top: 20px
}
.close-qmark {
margin-left: 15px;
top: 80px;
}
본 내용은 Codeit의 '웹 퍼블리싱' 강의를
참고하여 작성한 내용입니다.
반응형
'Front-end > HTML&CSS' 카테고리의 다른 글
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
|---|---|
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |