회색 사이트, 메뉴바 구현 - 1차 메뉴

<!-- nav>section>div*4>a[href="#"]{메뉴아이템 $}[tab 키 입력] -->
<!-- 메뉴 박스(메뉴를 감싸는 박스, 메뉴를 다른 것들 로부터 격리시키는 역할) -->
<h1>1차 메뉴</h1>

<nav>
  <!-- 메뉴 -->
  <section>
    <!-- 메뉴 아이템 -->
    <div>
      <!-- 메뉴 아이템 텍스트 -->
      <a href="#">Home</a>
    </div>
    <div>
      <a href="#">Tutorials</a>
    </div>
    <div>
      <a href="#">Articles</a>
    </div>
    <div>
      <a href="#">Inspiration</a>
    </div>
  </section>
</nav>

<!-- nav>section>div*4>a[href="#"]{메뉴아이템 $}[tab 키 입력] -->
<!-- 메뉴 박스(메뉴를 감싸는 박스, 메뉴를 다른 것들 로부터 격리시키는 역할) -->
<h1>1차 메뉴</h1>

<nav>
  <!-- 메뉴 -->
  <section>
    <!-- 메뉴 아이템 -->
    <div>
      <!-- 메뉴 아이템 텍스트 -->
      <a href="#">Home</a>
    </div>
    <div>
      <a href="#">Tutorials</a>
    </div>
    <div>
      <a href="#">Articles</a>
    </div>
    <div>
      <a href="#">Inspiration</a>
    </div>
  </section>
</nav>

실행 화면

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<button onclick="배경변경();">배경색 변경</button>

<div>
  <section></section>
  <section>
    <nav></nav>
    <nav></nav>
    <nav></nav>
    <nav></nav>
  </section>
</div>

div > section > nav {
  display:inline-block;
  padding:20px;
  border:20px solid blue;
}

function 배경변경() {
  $('body').css('background-color', 'green');
}

var $nav = $('nav');
$nav.css('background-color', 'red');

실행 화면