실습과제
듀엣 가요제
혼성 듀엣곡의 가사를 보여주는 페이지를 만들어보려고 합니다.
사랑보다 깊은 상처 - 박정현,임재범
가사의 각 부분은 <p> 태그로 나뉘어 있는데요. 클래스를 이용해서 각 부분을 다른 색으로 칠해주세요.
- 남자가 부르는 부분은 파란색(blue)
- 여자가 부르는 부분은 핑크색(hotpink)
- 남녀가 같이 부르는 부분은 연두색(lime)으로 바꿔주세요.
셀프채점
다음 항목들이 제대로 페이지에서 구현이 되었나요?
클래스를 활용하여 글자 색상을 바꾸었다.
여자, 남자, 혼성으로 나누어져 글자색이 바뀌어 있다.
<!DOCTYPE html>
<html>
<head>
<title>사랑보다 깊은 상처</title>
<meta charset="utf-8">
<style>
.hotpink{
color: hotpink;
}
.blue{
color: blue;
}
.lime{
color: lime;
}
</style>
</head>
<body>
<h1>사랑보다 깊은 상처</h1>
<h2>임재범, 박정현</h2>
<p class="hotpink">오랫동안 기다려왔어 내가 원한 너였기에<br>
슬픔을 감추며 널 보내줬었지<br>
날 속여가면서 잡고 싶었는지 몰라</p>
<p class="blue">너의 눈물 속에 내 모습 아직까지 남아있어<br>
추억을 버리긴 너무나 아쉬워<br>
난 너를 기억해 이젠 말할게 그 오랜 기다림</p>
<p class="lime">너 떠나고 너의 미소 볼 수 없지만<br>
항상 기억할게 너의 그 모든걸<br>
사랑보다 깊은 상처만 준 난<br>
이젠 깨달았어 후회하고 있다는 걸</p>
<p class="hotpink">이젠 모두 떠나갔지만 나에겐 넌 남아있어<br>
추억에 갇힌 채 넌 울고 있었어<br>
난 이제 너에게 아무런 말도 할 수 없어</p>
<p class="blue">그런 넌 용서할지 몰라 부족했던 내 모습을 <br>
넌 나를 지키며 항상 위로했었지 <br>
난 그런 너에게 이젠 이렇게 아픔만 남겼어</p>
<p class="lime">너 떠나고 너의 미소 볼 수 없지만<br>
항상 기억할게 너의 그 모든걸 <br>
사랑보다 깊은 상처 만 준 난<br>
이제 깨달았어 후회하고 있다는 걸</p>
<p class="lime">나는 상상했었지 나의 곁에 있는 널<br>
이젠 모든 나의 꿈들을 너에게 줄게</p>
<p class="lime">너 떠나고 너의 미소 볼 수 없지만<br>
항상 기억할게 너의 그 모든걸<br>
사랑보다 깊은 상처만 준 난<br>
이젠 깨달았어 후회하고 있다는 걸</p>
</body>
</html>
'교육 > [Codeit]웹 퍼블리싱' 카테고리의 다른 글
| <div>태그 (0) | 2021.01.02 |
|---|---|
| 실습과제. 노래 브릿지 (0) | 2020.12.07 |
| 클래스(class)와 아이디(id) (0) | 2020.12.06 |
| 클래스 (0) | 2020.12.01 |
| 실습과제 프로필 페이지 (0) | 2020.12.01 |