-
HTML5의 시맨틱 태그 사용법연습문제/html 2024. 6. 7. 07:22
📋 문제 설명
웹 페이지의 전체 구조를 나타내는 태그로 <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> 태그를 적절히 사용하세요.
💡요청 사항
- <header> 태그 안에 웹 페이지의 제목과 로고를 포함시키세요.
- <nav> 태그를 사용하여 메인 메뉴 링크를 만드세요.
- <main> 태그 안에 <section> 태그를 사용하여 본문 내용을 구분하세요.
- <article> 태그를 사용하여 독립적인 콘텐츠 영역을 만드세요.
- <aside> 태그를 사용하여 사이드바 영역을 만드세요.
- <footer> 태그를 사용하여 웹 페이지의 하단 영역을 만드세요.
작성 코드
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>시맨틱 태그 연습 페이지</title> <style> header{ background-color: antiquewhite; } nav{ background-color: aquamarine; } main{ background-color: gray; } section{ background-color: azure; padding-bottom: 30px; } article{ background-color: beige; padding-bottom: 30px; } aside{ background-color: blanchedalmond; margin: 0px; } footer{ background-color: brown; margin: 0px; } ul{ margin: 0px; } </style> </head> <body> <header><img src="https://placehold.co/32x32">시맨틱 태그 연습 페이지</header> <nav> <ul> <li><a href="">main</a></li> <li><a href="">menu_1</a></li> <li><a href="">menu_2</a></li> <li><a href="">menu_3</a></li> </ul> </nav> <main> <section> Section Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum voluptatibus deserunt esse architecto praesentium corrupti iusto recusandae dicta nesciunt saepe mollitia impedit doloribus, repellendus sit doloremque dolore obcaecati repudiandae eos! </section> <article> article Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti ducimus blanditiis consectetur, repudiandae tempore officia nulla? Eius fugit voluptatem quam ab odit praesentium omnis ipsam nisi pariatur, non aliquid. Consectetur. </article> <aside> <ul> <li>side_1</li> <li>side_2</li> <li>side_3</li> <li>side_4</li> </ul> </aside> </main> <footer>footer</footer> </body> </html>코드 적기
좋았던 점
시맨틱태그라는 것이 존재한다는 것을 알았다. div만 알고있었는데.
아쉬웠던 점
예쁘게 꾸미고 싶다는 욕망이 생긴다. CSS를 잘 다루고 싶다. 뤼튼을 이용해 문제를 생성하고있는데 조금 아쉬운 점이 없잖아 있다. 요청사항을 좀 더 구체적으로 넣어볼까.
다음 목표
태그 오타내지 않기.
'연습문제 > html' 카테고리의 다른 글
HTML 코딩 문제 1: 피자 주문 폼 만들기 (1) 2024.06.02