위는 만들어야 할 예제작
🔑 key point
각 홈페이지가 어떻게 나뉘는지 구조를 파악한다.
이 경우에는 두가지 모두 logo / menu / link 의 세가지로 나뉜다.
🔎 part. logo
- head 안에 css 파일과 연결하도록 link 생성
<link rel="stylesheet" href="style.css" />- navbar 에 해당하는 큰 박스를 만들 때에 semantic 태그를 사용하는 것이 좋기 때문에, 의미없는
<div>태그를 사용하기 보다는<nav>태그를 사용하도록 한다.
<nav class="navbar"></nav>-
아이콘/폰트를 사용할 때도
<head>안에script를 삽입하도록 한다. -
hyocho coding을 누르면 홈 화면으로 이동하는 작업을 수행하고 싶기 때문에
<a>태그를 사용한다.
🔎 part. menu
-
메뉴는 자세히 보면 list 형식으로 되어있는 것을 알 수 있다.
따라서<div>태그가 아닌 순서가 없는 리스트를 나타내는<ul>로 나타낸다. -
각 메뉴들 자체를 누르면 해당 화면으로 이동해야하기 때문에
<a>태그를 사용한다.
🔎 part. link
- 역시 순서가 없는 리스트 형식이므로
ul로 태그를 지정한다.
이렇게 하면 html 작성은 끝!
- 아이콘 사이트 : fontawesome.com
기록하는 습관을 기르고 있습니다.