반응형
다음으로 유튜브 홈 화면의 메뉴 부분을 만들어볼게요.
메뉴는 왼쪽에 햄버거 아이콘 아래의 부분입니다.
여기에서도 스타일 rss 시트를 따로 만들어줄 거예요. (1편 참고!)
<head> 부분에 css 시트를 링크 걸어줍니다.
<link href="css/reset.css" rel="stylesheet">
<link href="css/navigation.css" rel="stylesheet">
이제 각각의 컨테이너를 만들어주고 해당 부분에 스타일을 적용시켜 줄게요.
네비게이션은 대부분 <nav > 태그를 사용합니다. 클래스명 또한 nav 로 코드를 보았을 때 네비게이션이라는 것을 확인할 수 있어요. 네비게이션은 목록 리스트로 작성하겠습니다.
여기에서도 wrapper를 사용해서 정렬을 해주도록 할게요.
<body>
<nav class="nav">
<ul class="nav__wrapper">
<li class="nav__item">
<button class="nav__menu"><img src="imgs/home.png" width="50" alt="홈아이콘"></button>
</li>
<li class="nav__item">
<button class="nav__menu"><img src="imgs/shorts.png" width="50" alt="쇼트아이콘"></button>
</li>
<li class="nav__item">
<button class="nav__menu"><img src="imgs/cage.png" width="50" alt="케이지아이콘"></button>
</li>
</ul>
</nav>
</body>저는 메뉴의 아이콘을 사용하고 싶었기 때문에 img 를 넣었습니다.
저작권 없는 무료 아이콘을 사용하고 싶을 때 추천해드리고 싶은 사이트는 플랫아이콘이에요.
Free Icons and Stickers - Millions of images to download
Download Free Icons and Stickers for your projects. Images made by and for designers in PNG, SVG, EPS, PSD and CSS formats
www.flaticon.com
네비게이션에 대한 css 코드는 다음과 같습니다.
.nav{
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.nav__wrapper{
min-width: 100px;
min-height: 100vh;
background-color: #f8f8f8;
padding: 80px 0 0 0;
list-style: none;
}
.nav__wrapper li{
display: flex;
padding: 10px 16px 10px;
}
.nav__wrapper li:hover{
background-color: #eaeaea;
}
.nav__icon{
border: none;
background-color: transparent;
}
.nav__menu{
margin: 0 0 0 8px;
border: none;
background-color: transparent;
}
마우스를 올렸을 때 색상이 변하는 것과 리스트의 기호를 없애는 것까지 설정을 해줍니다.
여기에서도 미디어 쿼리를 통해 반응형 웹사이트로써 스크린의 크기에 따라 조정할 수 있도록 설정해줍니다.
@media screen and (max-width: 800px){
.nav__menu{
display: none;
}
.nav__wrapper{
min-width: 0;
}
}
@media screen and (max-width: 400px){
.nav__wrapper{
display: none;
}
}
정리되어 있는 전체 코드는 더보기를 확인해주세요.
더보기
<html>
<link href="css/reset.css" rel="stylesheet">
<link href="css/navigation.css" rel="stylesheet">
</head>
<body>
<nav class="nav">
<ul class="nav__wrapper">
<li class="nav__item">
<button class="nav__menu"><img src="imgs/home.png" width="50" alt="홈아이콘"></button>
</li>
<li class="nav__item">
<button class="nav__menu"><img src="imgs/shorts.png" width="50" alt="쇼트아이콘"></button>
</li>
<li class="nav__item">
<button class="nav__menu"><img src="imgs/cage.png" width="50" alt="케이지아이콘"></button>
</li>
</ul>
</nav>
</body>
</html><navigation.css>
.nav{
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.nav__wrapper{
min-width: 100px;
min-height: 100vh;
background-color: #f8f8f8;
padding: 80px 0 0 0;
list-style: none;
}
.nav__wrapper li{
display: flex;
padding: 10px 16px 10px;
}
.nav__wrapper li:hover{
background-color: #eaeaea;
}
.nav__icon{
border: none;
background-color: transparent;
}
.nav__menu{
margin: 0 0 0 8px;
border: none;
background-color: transparent;
}
@media screen and (max-width: 800px){
.nav__menu{
display: none;
}
.nav__wrapper{
min-width: 0;
}
}
@media screen and (max-width: 400px){
.nav__wrapper{
display: none;
}
}
<reset.css>
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 개인적으로 조금 더 추가 */
*{
box-sizing: border-box;
outline: none;
}
반응형
'HTML · CSS > HTML · CSS 코드 예제 만들기' 카테고리의 다른 글
| 클론 코딩 1. HTML / CSS 로 카카오톡 화면 구현하기 (1) 디자인 구상하기 (0) | 2022.11.22 |
|---|---|
| Html / CSS 로 유튜브 홈 화면 구현하기 (3) 컨텐츠 창 만들기 (0) | 2022.11.14 |
| Html / CSS 로 유튜브 홈 화면 구현하기 (1) 헤더 만들기 (1) | 2022.11.14 |
| 웹 HTML 예제 만들기 2. 로그인 폼 만들기 (0) | 2022.11.09 |
| 웹 HTML 예제 만들기 1. 이미지로 하이퍼링크 만들기 (0) | 2022.11.09 |