반응형 웹 메뉴 만들기 @media css / html css
취업을 위해 포트폴리오를 준비 중인데, 국비 지원을 받아 배우는 이 곳에서는 반응형을 알려주지 않았습니다.
오로지 퍼블리셔가 되기 위한 기초적인 것들만을 배우더라구요!
저의 목표는 퍼블리셔를 넘어 프론트앤드가 되는 것이기 때문에 따로 반응형을 공부해봤습니다.
html 소스
<body>
<div id="wrap">
<header>
<div class="logo">
<p><a href="#"><i>logo</i></a></p>
</div>
<ul class="nav">
<li><a href="#">View my work</a></li>
<li><a href="#">Get to know me</a></li>
<li><a href="#">Say hello</a></li>
</ul>
<div class="ham_img">
<p><a href="#"><img src="img/ham.png" alt="hma_logo"></a></p>
</div>
</header>
</div>
</body>메뉴 부분을 만들 것이기 때문에 header 시멘틱 태그를 사용했고, Logo를 아직 정하지 않아서 logo라고만 넣어주었습니다.
<i> 태그를 이용해서 logo라는 텍스트를 기울여봤습니다.
<ul>을 감싸는 박스를 항상 넣었는데 이번엔 반응형을 만들기 위해서 <ul>에 직접 class를 넣어주었습니다.
<li>에 제가 포트폴리오를 보는 사람들에게 하고 싶은 말을 적었구요.
제일 오른쪽에 햄버거 메뉴를 넣어서 나중에 클릭시 메뉴들이 전체화면으로 나오게 만들기 위해서 햄버거 메뉴 이미지를 가져와서 넣어주었습니다.
css 소스
@charset "utf-8";
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
div#wrap {
width: 100%;
background-color: white;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
padding: 8px 12px;
}
div.logo {
font-size: 24px;
color: black;
}
.nav {
display: flex;
padding-left: 0;
}
.nav li {
padding: 8px 24px;
font-size: 24px;
font-weight: 500;
}
.nav li:hover {
background-color: yellow;
border-radius: 10px;
}
.ham_img {
padding-left : 0px;
display: flex;
}
.ham_img img {
width:30px;
height: 30px;
}
@media screen and (max-width:786px) {
header {
flex-direction: column;
align-items: flex-start;
padding: 8px 24px;
}
.nav {
flex-direction: column;
align-items: center;
width: 100%;
}
.nav li {
width: 100%;
text-align: center;
}
header .ham_img {
justify-content: center;
width: 100%;
}
}
기본적으로 입력하는 a 까지 넣어주고 wrap은 똑같이 100% 주었습니다.
header 부분 부터 제가 아는 내용이랑 달랐는데 display : flex 를 써봤습니다.
항상 float : left 후 가상요소로 clear : both를 해줬는데 이 방법 보다 더욱 간편하고 장점이 많아서 실무에서 제일 많이 쓰이는 정렬 방법이라고합니다.
justify-content : space-between를 써서 자식 요소를 일정한 간격으로 정렬시켜주었고, align-items : center 로 교차축의 중앙에 정렬해 주었습니다.
padding: 8px 12px 을 써서 공간 값을 잡아주었습니다.
logo는 폰트 크기와 색상만 만져주었습니다.
nav를 왼쪽으로 쭉 정렬할 것이기 때문에 dispaly: flex를 주었고, 왼쪽에 붙이기 위해서 padding-left: 0을 주었습니다.
<li>에 호버시 색상과 배경 꼭지점을 둥글게 만들어 주었습니다.
이미지도 display: flex 를 주어서 왼쪽 정렬 해줬습니다.
이제부터 @media css 시작입니다.
@media screen and (max-width:786px)을 주어서 786px을 넘었을 때 변화를 아래 적어주었습니다.
786px보다 작아졌을 때, header에 flex-direction: column 속성으로 수직 방향으로 정렬하라고 설정 해 주었고, align-items: flex-start 속성으로 flex 항목의 첫 열을 교차축 방향의 시작선에 정렬시켰습니다. padding은 공간 값입니다.
786px보다 작아졌을 때, nav에 header와 같이 flex-direction: column 속성으로 수직 방향으로 정렬했고, align-items: center를 주어 메뉴들은 가운데로 정렬시켜 주었습니다.
<li>들의 텍스르를 가운데 정렬 해주었고, ham_img는 justify-content: center를 주어 786px보다 작아졌을 때, 정가운데로 정렬시켰습니다.
첫 반응형 웹이라서 많이 어려웠는데 이렇게 또 정리하다 보면 이해도 되고 다음번엔 수월해집니다.
다들 같이 따라하면서 이해해보면 좋을거같습니다.
마지막은 이렇게 코드 작업을 했을 때 어떤 변화가 있는지 영상으로 마무리 하겠습니다.
'디노 code.html' 카테고리의 다른 글
| 혼자 공부하는 자바스크립트 예제 정리 inch 를 cm 단위로 변경하기 (0) | 2021.08.10 |
|---|---|
| 웹디자인 기능사 실기 modal layer popup(레이어 팝업) / html css jQuery (0) | 2021.08.10 |
| 웹디자인 기능사 실기 탭 메뉴 구현 / html css jQuery (0) | 2021.08.06 |
| 웹디자인 기능사 실기 슬라이드 fade / html css jQuery (0) | 2021.08.06 |
| 웹디자인 기능사 실기 자동 슬라이드 top / html css jQuery (0) | 2021.08.05 |
댓글