728x90
지금까지 배워본 예제로 한번 복습을 해보는 포스팅을 해보겠습니다.
이런 화면을 구성하는 예제인데요, 여기서 아직 포스팅하지 않은 한가지 요소가 있습니다.
바로 소스코드를 보면서 확인을 해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>1848년 혁명 속의 작곡가들</title>
<link rel="icon" href="img/naver_favicon.ico">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<style>
#voic
{
color: #123456;
}
</style>
</head>
<body>
<a href="https://terms.naver.com/list.nhn?categoryId=59006" target="_blank">서양 음악사의 뒤안길</a>
<h2>1848년 혁명 속의 작곡가들</h2>
<p><strong>스메타나, 카렐 다리에 바리케이드를 쌓다</strong></p>
<p>오늘도 세계인의 발길이 그치지 않는 체코 수도 프라하의 카렐 다리. 이 다리를 동쪽으로 건너와 오른쪽으로 돌면 블타바강 강변에 1936년 세워진 스메타나 박물관을 바로 찾을 수 있다. ‘체코 국민음악의 아버지’로 불리는 <a href="http://search.naver.com/search.naver?sm=tab_hty.top&where=kdic&ie=utf8&query=%EC%8A%A4%EB%A9%94%ED%83%80%EB%82%98">베드르지흐 스메타나</a>(Bedřich Smetana, 1824~1884)를 기리는 장소다. 건물 바로 앞에 스메타나의 동상이 건물과 카렐 다리를 등지고 앉아 있다. 1848년 혁명 속의 작곡가들 - 스메타나, 카렐 다리에 바리케이드를 쌓다 (서양 음악사의 뒤안길)</p>
<figure>
<img src="https://ncc-phinf.pstatic.net/20160404_101/1459744915662RrNIg_JPEG/001.jpg?type=w646" alt="체코 프라하에 있는 카렐다리 사진">
<figcaption>체코 프라하에 있는 카렐다리. <출처: Wikipedia></figcaption>
</figure>
<p>이곳에는 늘 관광객들이 셔터를 누르는 소리가 그치지 않는다. 세월 속에 굳어진 스메타나의 모습과 그 뒤의 박물관, 배경을 이루는 카렐 다리와 블타바 강, 멀리의 프라하 성이 그림엽서와도 같은 정경을 이루기 때문이다. 스메타나의 대표작인 교향시 ‘<a href="http://navercast.naver.com/contents.nhn?rid=67&contents_id=89915">블타바</a>(몰다우)강’의 유장한 선율을 연상시키는 풍경이다.<br/><br/>
80년 동안 같은 자리에 앉아있는 스메타나의 얼굴에서도 여러 가지 상념이 전해진다. 그의 등 뒤를 수놓는 카렐 다리는 그에게 단지 ‘고국의 관광명소’에 그치지 않았다. 24세 약관의 나이로 그는 이 아름다운 중세 다리에 바리케이드를 쌓았다. 전 유럽을 뒤흔든 ‘1848년 혁명’의 한 풍경이었다. <a href="http://search.naver.com/search.naver?sm=tab_hty.top&where=kdic&ie=utf8&query=1848%ED%98%81%EB%AA%85">1848년 혁명</a> 속의 작곡가들 - 스메타나, 카렐 다리에 바리케이드를 쌓다 (서양 음악사의 뒤안길)</p>
<img src="https://ncc-phinf.pstatic.net/20160404_3/14597455270895tGYQ_JPEG/00.jpgnaW/1" alt="karajan 포스터"/>
<table border="1" summary="음악리스트">
<caption>음악리스트</caption>
<thead>
<tr>
<th>no</th>
<th>아티스트 & 연주</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>스메타나, [몰다우](불타바) / 베를린 필하모닉(연주), 헤르베르트 폰 카라얀(지휘)</td>
<td><button type="button"><i id="voic" class="fas fa-volume-up"></i></button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">1분 미리듣기 / 음원제공 : <a href="http://www.universalmusic.co.kr/">유니버셜 뮤직</a> / <a href="http://www.deutschegrammophon.com/kr/cat/4793036">앨범 정보 보러가기</a></td>
</tr>
</tfoot>
</table>
<hr/>
<!--<h2>약관의 음악가, 혁명의 노래를 작곡하다</h2>-->
<!-- figure 활용 예제 -->
<!--
figure 요소 : 컨텐츠 내부에 표나 그림이 들어가 있을때
figcaption 요소 : figure의 제목(tabledml caption, fieldset의 legend같이 사용)
-->
</body>
</html>
충분히 이 예제를 작성 할 수 있는 항목들을 포스팅하였고, 마지막으로 작성하지 않은 figure 요소가있습니다.
figure 요소를 사용하면 일반적인 img 요소랑은 다르게 표기가 됩니다.
figure 요소는 주석에 설명을 해놓았습니다.
이정도 실습을 한번 진행해보면 충분히 기본적인 html 마크업은 가능합니다.
이제 html 은 2개의 포스팅을 앞두고 있습니다.
다음 포스팅에서 뵙겠습니다.
반응형
'Front-end > HTML' 카테고리의 다른 글
| 12(Final). 요소의 분류 (인라인레벨, 블록레벨) (0) | 2018.08.08 |
|---|---|
| 11. 여러가지 입력요소들 (회원가입 폼) (0) | 2018.08.08 |
| 9. 폼의기능(GET, POST 방식) (0) | 2018.07.31 |
| 8. 테이블(table) 예제 (0) | 2018.07.31 |
| 8. 테이블(Table) 요소 (0) | 2018.07.26 |