반응형
index4.html
<!DOCTYPE html>
<html>
<head>
<title>04 line-height 줄간격</title>
<link rel="stylesheet" href="style4.css">
</head>
<body>
<div class="cover"></div>
<div class="contents">
<h1>Let's code!</h1>
<p>Coding is fantastic. I love it.</p>
</div>
</body>
</html>style4.css
.cover{
background-image: url(code.jpg);
background-size: cover;
background-color: #336699;
height: 50vh;
}
.contents h1 {
text-align: center;
line-height: normal; /*폰트 종류에 따라 다르다.*/
color: white;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 80px;
margin-top: -1em; /*font-size에 따라 맞춰 달라지게 하려면 단위 1em사용.*/
}
.contents p {
text-align: center;
line-height: 1.5;
font-size: 15px;
}
아래 강의를 수강하고 개인적으로 정리하는 글입니다.
https://programmers.co.kr/learn/courses/4521
한 걸음 더 CSS: 코딩가나다 | 프로그래머스
× 본 강의 시리즈는 총 14개의 자음 개수에 따라 순차적으로 제작됩니다. 7/13 기준으로 8강까지 업로드 되어있으며, 하나씩 순차적으로 업데이트 됩니다. 한 걸음 더 CSS: 코딩가나다 부트스트랩 없으면 CSS는 쳐다도 안보는 분들께 추천! 한글 자음 순서대로, 각 자음으로 시작하는 CSS 속성들에 대해 부담없이 알아보는 빔캠프의 동영상 강의. 라이브 코딩을 구경하며 CSS에 대해서 조금씩, 조금씩 알아갈 수 있습니다. CSS는 디자이너들의
programmers.co.kr
반응형
'Programming > FrontEnd' 카테고리의 다른 글
| [CSS] 한 걸음 더 CSS: 코딩가나다 상속(Inheritance) (0) | 2019.12.17 |
|---|---|
| [CSS] 한 걸음 더 CSS: 코딩가나다 버티컬 얼라인(세로 정렬, vertical-align) (0) | 2019.12.16 |
| [CSS] 한 걸음 더 CSS: 코딩가나다 마진 병합(Margin Collapsing) (0) | 2019.12.16 |
| [CSS] 한 걸음 더 CSS: 코딩가나다 디스플레이(Display Property) (0) | 2019.12.16 |
| [CSS] 한 걸음 더 CSS: 코딩가나다 가운데 정렬: Centering in CSS (0) | 2019.12.16 |
댓글