반응형
듀엣 가요제
혼성 듀엣곡의 가사를 보여주는 페이지를 만들어보려고 합니다.
가사의 각 부분은 <p> 태그로 나뉘어 있는데요. 클래스를 이용해서 각 부분을 다른 색으로 칠해주세요.
- 남자가 부르는 부분은 파란색(blue)
- 여자가 부르는 부분은 핑크색(hotpink)
- 남녀가 같이 부르는 부분은 연두색(lime)으로 바꿔주세요.
<!DOCTYPE html>
<html lang="en">
<head>
<title>사랑보다 깊은 상처</title>
<meta charset="utf-8">
<style>
.boy {
color: blue;
}
.girl {
color: hotpink;
}
.duet {
color: lime;
}
</style>
</head>
<body>
<h1>사랑보다 깊은 상처</h1>
<h2>임재범, 박정현</h2>
<p class="girl">오랫동안 기다려왔어 내가 원한 너였기에<br>
슬픔을 감추며 널 보내줬었지<br>
날 속여가면서 잡고 싶었는지 몰라</p>
<p class="boy">너의 눈물 속에 내 모습 아직까지 남아있어<br>
추억을 버리긴 너무나 아쉬워<br>
난 너를 기억해 이젠 말할게 그 오랜 기다림</p>
<p class="duet">너 떠나고 너의 미소 볼 수 없지만<br>
항상 기억할게 너의 그 모든걸<br>
사랑보다 깊은 상처만 준 난<br>
이젠 깨달았어 후회하고 있다는 걸</p>
<p class="girl">이젠 모두 떠나갔지만 나에겐 넌 남아있어<br>
추억에 갇힌 채 넌 울고 있었어<br>
난 이제 너에게 아무런 말도 할 수 없어</p>
<p class="boy">그런 넌 용서할지 몰라 부족했던 내 모습을 <br>
넌 나를 지키며 항상 위로했었지 <br>
난 그런 너에게 이젠 이렇게 아픔만 남겼어</p>
<p class="duet">너 떠나고 너의 미소 볼 수 없지만<br>
항상 기억할게 너의 그 모든걸 <br>
사랑보다 깊은 상처 만 준 난<br>
이제 깨달았어 후회하고 있다는 걸</p>
<p class="duet">나는 상상했었지 나의 곁에 있는 널<br>
이젠 모든 나의 꿈들을 너에게 줄게</p>
<p class="duet"> 너 떠나고 너의 미소 볼 수 없지만<br>
항상 기억할게 너의 그 모든걸<br>
사랑보다 깊은 상처만 준 난<br>
이젠 깨달았어 후회하고 있다는 걸</p>
</body>
</html>
본 내용은 Codeit의 '웹 퍼블리싱' 강의를
참고하여 작성한 내용입니다.
반응형
'Front-end > HTML&CSS' 카테고리의 다른 글
| [웹 퍼블리싱] 01.HTML/CSS 시작하기 (0) | 2021.02.04 |
|---|---|
| [웹 퍼블리싱] 01. HTML/CSS 시작하기 (0) | 2021.02.04 |
| [웹 퍼블리싱] 01. HTML/CSS 시작하기 (0) | 2021.02.04 |
| [웹 퍼블리싱] 01. HTML/CSS 시작하기 (0) | 2021.02.04 |
| 색상과 배경 (0) | 2021.01.08 |