2024-01-13 (자습) - BMX상단바 구현

TODO

[DBMS]

• 데이터정규화 & TRANSACTION
  • 정리한 노트 훑어보기

[프론트엔드]

• 영상복습
  • <display, 막대구현>
  • <엘리먼트의 관계, a,br, emmet>
  • <선택자 종류, 링크 버튼 만들기>
  • <text align 문제>
  • <nbsp, text-deocration:none>
  • <문제 - div 태그만 사용하여 사과의 색상을 red로 변경해주세요.>
• 개념복습
  • 수업페이지에 있는 개념 훑어보기
• 수업페이지에 있는 문제 다시 풀기
• BNX 상단 메뉴 구현해보기

[WiseSaying]

• CRUD 구현해보기

---

display

결과물

결과물 페이지

HTML

<div><a href="#">BMX</a></div>

<nav> <!--할배-->
  <bar>|</bar> <!--nav의 자식-->
  <section> <!--nav의 자식-->
    <a href="#">BRAND</a> <!--nav의 후손이자, section의 자식-->
  </section>
  <bar>|</bar>
  <section>
    <a href="#">VISUAL</a>
  </section>
  <bar>|</bar>
  <section>
    <a href="#">STYLE</a>
  </section>
  <bar>|</bar>
  <section>
    <a href="#">MEDIA</a>
  </section>
  <bar>|</bar>
  <section>
    <a href="#">NEWS</a>
  </section>
  <bar>|</bar>
  <section>
    <a href="#">STORE</a>
  </section>
  <bar>|</bar>
  <section>
    <a href="#">CUSTOMER</a>
  </section>
  <bar>|</bar>
</nav>

CSS

div { /* BMX의 범위 - block */
  text-align: center;
} 
div > a { /*BMX라는 글자의 속성, a는 inline*/
  color: black;
  text-decoration: none;
  letter-spacing: -3px;
  font-size: 70px;
  font-weight: bold;
}
section { /*링크를 담을 범위, 이 범위 내의 text는 가운데정렬, inline-block*/
  height: 40px;
  width: 120px;
  display: inline-block;
  text-align: center;
}
nav { /*메뉴 링크들이 있을 범위, block, 이 범위 내에 들어가는 text들 가운데 정렬*/
  text-align: center;
}
nav a { /*nav의 손자인 a들의 속성*/
  text-decoration: none;
  font-weight: bold;
  color: black;
  font-size: 18px;
}
bar { /*section의 형제이자 section사이사이에 배치*/
  font-weight: bold;
  color: black;
}
nav a:hover { /*nav의 손자인 a들만 hover 처리*/
  color: red;
}
nav a { /*nav의 손자인 a의 범위를 부모(section)의 가로길이만큼 지정해주기*/
  display: block;
}