(webFront) BNX 모작

💼📝🔑⏰ 📙📓📘📒🎓

모작 url : https://bnx.oa.gg/

See the Pen BNX 모작 by RichardKim (@hiddenevent) on CodePen.

💼 최초 작업

CSS 전체 폰트 적용 및 노말라이즈 작업 등 기초 작업을 먼저 시작한다

/* 폰트적용 */
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

html {
    font-family: "Noto Sans KR", sans-serif;
}

/* 노말라이즈 */
body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}

a {
  color:inherit;
  text-decoration:none;
}

💼 상단 로고바

• 로고 이미지를 div > a > img 로 넣어준다.
• img 테그는 기본적으로 inline 속성이므로 아래에 여백이 생긴다.
  1. img 테그를 block으로 width:100%로 만들어준다.
  2. 감싸는 a 테그 또한 inline-block으로 만들어 준다.
  3. 또 그 상위 div 테그에 line-height:0으로 만들어줘야 여백이 없어진다.
  4. 그 후 line-height 속성은 상속 되기 때문에 > * 자식속성들에 대해 line-height:normal로 다시 바꿔줘야한다.
  5. 여백 제거 완료

💼 상단 메뉴바

• div.menu-bar>nav.menu-box-1>ul.row>li.cell*7>a.block[href="#"]으로 메뉴 갯수만큼 만들어 준다.
• 메뉴 들의 width를 메뉴의 갯수 만큼 분할 하기

  .menu-bar > .menu-box-1 > ul > li {
    width:calc(100% / 7);
  }
  

• a테그는 block으로 만들고 그 부모인 li 테그는 float:left로 만드는 것이 핵심.