7월8일36일차 - 다단메뉴 반응형, 웹코딩5(식품)

만들고 보니 뒷부분에서 뭔가를 넣으려고만 한 것 같습니다.

이미지 크기도 너무 큼직큼직하고 한 눈에 들어오지 않습니다.

좀 빼고 작게 만들 필요가 있어 보입니다.

[220706 식품코딩Mc] [ 220706 식품코딩Mc html / css / js ]

 

 

 

레이아웃 구조를 만들 때 나중에 추가로 넣을 내용을 대문자로 표시해두면 구분하기 쉽습니다.
              <a href="">HOME</a>
              <a href="">LOGIN</a>
          
          
vscode가 업데이트 되면서 emmet 설정이 바뀌었습니다.
emmet은 더 이상 예상 shortcut을 보여주지 않게 되어 엔터로 작동하지 않습니다.
Emmet: Trigger Expansion On Tab의 체크박스에 체크하고 나면 tab 키로 작동합니다.
inline completion 기능이 생겨 결과를 미리 볼 수 있습니다.

다단메뉴의 화면 전체를 가로지르는 배경 스크린은 ::after로 만듭니다.
.gnb>ul::after { content: ""; position: absolute; top: 51px; left: 0; width: 100%; height: 0; background: #f00; transition: 0.5s; z-index: 998; } 
.gnb>ul:hover::after { height: 250px; } 

메뉴도 함께 나타나도록 합니다.
.gnb .sub_menu { position: absolute; top: 50x; left: 0; width: 100%; height: 0; background: #ff0; transition: 0.5s; z-index: 999; } 
.gnb>ul:hover .sub_menu { height: 250px; } 

overflow: hidden;으로 빈 화면에서 감지되지 않도록 합니다.
.gnb .sub_menu {  overflow: hidden;  } 

이제 반응형으로 만듭니다.  원리는 같습니다.

 

메뉴를 fixed로 띄웁니다.
필요한 width를 auto로 바꿉니다.
menu가 공간을 차지하도록 dispaly: static; 속성으로 바꿉니다.

 

 

order 속성을 이용하면 형제의 위치를 바꿀 수 있습니다.
<ul> <logo> <ul> 의 구조가 
 #header .top > ul { order: -1; } 
<ul> <ul> <logo>가 되었습니다.

 

웹 디자인 팁입니다.

쉐도우 약하게 하고
라인 얇게 하고
애니메이션 빼고
공간 넓게 하고
크기 작게하고

어쩔 때는 크게하고 어쩔 때는 작게하고.. 어렵습니다...

웹 코딩 팁입니다.
main에는 class나 id를 주지 않습니다. 관습적으로도 그래왔고 쓰이는 일이 거의  없습니다.
이미지는 무조건 고화질 이미지를 씁니다. 고화질 이미지가 없다면 그냥 쓰지 않습니다.
애니메이션은 겹치지 않도록 합니다.


혼자서 추가로 공부할 내용
부드러운 스크롤
마우스 따라다니는 효과