왠만한 건 자바스크립트 안쓰고 css에서 처리해야 가볍고 빠름.
[아이콘 박스 중 두번째꺼 없애기]
width: 0; -> 공간 없앰
opacity: 0; -> 투명한 상태
overflow: hidden; -> 깔끔하게 보이지 않도록
[350px이하로 내려가면 mo-nav사라짐(@madia)]
여기서
이렇게 되는 코드
->media.css
@media screen and (max-width:350px){
.mo-section {
opacity: 0; visibility: hidden;
}
.mo-nav ul {
height: 0;
}
/* .menu-icon-box{width: 0; opacity: 1; overflow: visible;} */
.menu-icon-box .menu-icon{font-size: 28px;}
}
->des.css
.container{max-width: 1440px; height: 70px; margin-left: auto; margin-right: auto; display: flex; justify-content: space-between;}
.des-nav{width: 600px;}
.des-nav>ul{height: 100%; justify-content: space-between;}
.des nav a{display: flex; align-items: center; gap: 4px;}
.icon-box{width: 250px;padding-left: 10px; padding-right: 10px; display: flex; justify-content: flex-end; align-items: center; gap: 8px;}
.icon-box a{display: flex; align-items: flex-start;}
.icon-box a:hover span{color: #aa65d0;}
.icon-box .material-symbols-outlined{font-size: 28px;}
/* .menu-icon-box{width: 0; opacity: 0; overflow: hidden;} */
.menu-icon-box .menu-icon{font-size: 0;}주석 처리 된 부분은 필요 없는 코드를 나중에 써야하나? 생각할까봐 적어둔 것임.
즉, 주석 처리 된 코드는 필요 없다는 뜻.
[사이드 섹션]
가장 마지막에 나옴
[사이드 섹션]
개발자모드(f12)에 사이드 섹션은 뜨지만 오른쪽에 보이지 않음.
position사용. ->
섹션 나옴.
★ ★ ★ [겹겹이 쌓여있는 position]
-코드가 겹겹이 쌓여있는 absoiute, relative, fixed 경우 밑에 구조가 깔려서 보이지 않는 경우가 많기 때문에 html레 항상 문자를 작성하고 개발자 모드로 css가 제대로 작동되고 있는지 확인해야한다.
ㄴ z-index순서로 헷갈릴 수 있기때문에 수업시간에 배운 포토샵으로 그림을 그려서 구조를 예상하거나 메모장에 버튼 형식을 배치해서 구조를 예상하고 그 후에 코들르 구현해야 제대로 구현할 수 있다.
※ z-index는 15 안쪽에서 구현하기
[top-bar-section(탑바)높이 퍼센트로 설정하기]
1. top-bar-section 높이 찾아보기
-> 높이가 없다. 그럼 어디에? 높이가 container에 있나?
2. container를 찾아본다.
height: 70px;
70px로 고정되어있다. 그럼 화면 크기를 줄이거나 늘렸을 때 사용자가 매우 불편하므로 %로 바꿔준다.
%계산은 어떻게 하나?
width: 1080px; height: 70px;이니 퍼센트를 계산해 높이에 이를 적용시킨다.
3. 네이버> 퍼센트 계산기 > 높이를 반응형으로 계산하기
값: 6.45....대략 7%로 적용시키기.
height: 7vh;
dec.css->
->
화면 크기를 줄이거나 늘려도 top-section이 7vh대로 움직이며, 사이드 섹션부분은 top-section바로 밑에 붙어서 나옴.
- 밑에 붙어서 나올 수 있는 코드 : left: 0; top: 7%;
- 가장 상단으로 나올 수 있는 코드 : z-index: 3;
[사이드 박스]
1)
- 화면 오른쪽으로 붙여주는 코드 : margin-left: auto;}
2)
350px아래로 떨어지면 오른쪽에서 나와야 함. 그런데 이 코드 상태로는 왼쪽에서 나와서 오른쪽에 붙음. left: 0; 때문임.
right로 바꾸어주면 됨.
3) 천천히 나올 수 있도록 transition적용하기.
width(너비): 0;으로 해주어야 너비가 350px이하일 때 사이드 섹션이 나오게 되는 것임.
※ 이 정도는 제이쿼리말고 css로 처리하는 것이 가볍다.
1. 제이쿼리 링크를 가져온다.
2. 자바스크립트 파일을 생성한다.
3. html에 자바스크립트 파일을 연결한다.
4. 조건을 먼저 설정한다.
5. 제이쿼리 클릭이벤트를 실행시킨다.
(어떤 것을 클릭했을 때 사이드바가 나오고, 어떤 것을 클릭했을 때 사이드바가 삭제 되는 지 체크하기)
숙제->
// menu-icon-box 클릭하면 사이드바 구현
// 사이드바 구현 조건: .side-section{width: 100%;} .side-box{width: 85%;}