IT/웹개발 (100일 도전)
Udemy section 8 (23일) - 미디어쿼리, 햄버거버튼, 사이드바
김숭늉이
2023. 2. 28. 21:09
728x90
1. 만약에 desk first인 경우는 max-with(desk first)를 정해주고 브레이킹 포인트를 작성한다!
@media (max-width: 768px) { 최대 768px인 경우 = 스크린의 최대 넓이가 최대 768px 보다 작다는 의미
#latest-products ul {
grid-template-columns: 100%;
}
}
2. 미디어쿼리는 css의 순서 속성에 영향을 받는다!
그리서 미디어쿼리의 작성위치는 매우 중요!
3. h1 글씨작게, grid 위아래 일렬 배열 하기 (픽셀 768 아래일때)
@media (max-width: 768px) {
main h1 {
font-size: 1.5rem;
}
#latest-products ul {
grid-template-columns: 100%;
}
}
4. header 영역의 nav 숨기기 (픽셀 768 아래일때)
@media (max-width: 768px) {
#main-header nav a {
display: none;
}
main h1 {
font-size: 1.5rem;
}
#latest-products ul {
grid-template-columns: 100%;
}
}
******* @media (max-width: 768px) <- 768 px은 계산해서 48rem(기본픽셀 16px)으로 바꿀수 있음 !
5. 햄버거 버튼 만들기
<header id="main-header">
<a href="index.html" id="logo">WebFood</a>
<nav>
<ul>
<li>
<a href="">Browse Meals</a>
</li>
<li>
<a href="">My Orders</a>
</li>
</ul>
</nav>
<a href="" class="menu-btn">
<span></span>
<span></span>
<span></span>
</a>
</header>
-> 헤더 영역안에 nav를 하나 더 추가해주기!
-> 햄버거 메뉴 만들기의 간단한 방법은 span를 사용하는것!
.menu-btn {
width: 3rem;
height: 3rem;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.menu-btn span {
width: 100%;
height: 3px;
background-color: white;
}
인라인은 필요한 공간만 차지하잖아~ 텍스트를 입력하지않으면 당연히 화면에는 아무것도 나오지 않지!
.menu-btn span {
display: block;
width: 100%;
height: 3px;
background-color: white;
}
--> 인라인을 블록요소로 바꾸꺼나, 혹은 아래의 우아한 방법이 있음!
dispaly : flex를 주는것! -> 안에 내용이 블록인것처럼 바뀌게 된다! + flex box 기능으로 꾸며줄수 있음!
.menu-btn {
width: 3rem;
height: 3rem;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.menu-btn span {
width: 100%;
height: 3px;
background-color: white;
}
5. 사이드바 만들기! (햄버거 메뉴 누르면 나오는 화면)
사이드는 헤더의 일부라고 생각할수있는데 아니다!
웹사이트의 실제 문맥에서 벗어난 사이드 컨텐트!
그래서 헤더와 메인부분에 aside 요소로 추가해준다!
* html 적용
<header id="main-header">
<a href="index.html" id="logo">WebFood</a>
<nav>
<ul>
<li>
<a href="">Browse Meals</a>
</li>
<li>
<a href="">My Orders</a>
</li>
</ul>
</nav>
<a href="" class="menu-btn">
<span></span>
<span></span>
<span></span>
</a>
</header>
<aside id="side-drawer">
<nav>
<ul>
<li>
<a href="">Browse Meals</a>
</li>
<li>
<a href="">My Orders</a>
</li>
</ul>
</nav>
</aside>
<main>
*css 파일에 적용
#side-drawer {
width: 100%;
height: 100%;
background-color: rgb(29, 26, 27);
position: fixed;
top: 0;
left: 0
}
position 을 absolute나 fixed로 위치 속성을 추가한다!
그리고 정확한 시작점을 설정해준다!
#side-drawer {
width: 100%;
height: 100%;
background-color: rgb(29, 26, 27);
position: fixed;
top: 0;
left: 0
}
#side-drawer ul {
list-style: none;
margin: 0;
padding: 4rem 1rem;
display: flex;
justify-content: center;
text-align: center;
flex-direction: column;
}
#side-drawer li {
margin: 1rem 0;
}
#side-drawer a {
color: rgb(25, 23, 213);
font-size: 2rem;
}
6. 사이드바 프로젝트의 마지막 부분!
**개념 이해하기!
https://academind.com/tutorials/sending-an-email-with-react-and-cloud-functions
https://academind.com/tutorials/sending-an-email-with-react-and-cloud-functions#creating-the-contact-form
-> 기존 웹사이트의 내부 네비게이션 ! 이 개념을 사이드바에 적용하겠다!
<a href="#side-drawer" class="menu-btn">
<span></span>
<span></span>
<span></span>
</a>
728x90
반응형