CSS Selector

navbar 디자인 하면서 배우는 css selector

HTML5 에서 새롭게 추가된 태그들

• Header

• Footer

• Nav

• Section

• Article

• Figure

• Aside

[HTML5] header / nav / footer / section / article / figure 의 사용법TISTORY

상단 nav 바

<nav>
  <ul class="navbar">
    <li>영화</li>
    <li>맛집</li>
    <li>IT</li>
    <li>개발</li>
  </ul>
</nav>

.navbar li{
    display: inline-block;
}

css selector 문법

1. .navbar>li { } : ~안에 있는 직계 자식

2. .navbar li { } : ~안에 있는 모든 자식

<nav>
  <ul class="navbar">
    <li>
      <a href="#">영화</a>
    </li>
    <li><a href="#">맛집</a></li>
    <li><a href="#">IT</a></li>
    <li><a href="#">개발</a></li>
  </ul>
</nav>

.navbar li{
    display: inline-block;
    width: 60px;
    background: #eee;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
}

.navbar a {
    font-size: 16px;
    text-decoration: none;
}

셀렉터 잘 쓰면 클래스 추가선언 없이도 내가 원하는 요소에 스타일을 쉽게 줄 수 있습니다.

하지만 이렇게 4~5개 이상 연달아 붙여쓰지 않길 권장합니다.

.container div div>p>span

셀렉터를 남발하는 것 보다는 하나의 새로운 클래스를 만드는게 훨씬 더 나을 수 있습니다.

차라리 그냥 span 윗부분에 클래스를 하나 만들어서 사용

.headline>span

CSS 셀렉터부분만 읽어도 내가 어떤 요소를 스타일넣고 있는지 바로 이해가 가능합니다.

읽기만 해도 어떤 스타일을 주는지 알 수 있는 셀렉터가 좋은 셀렉터 사용법입니다.

셀렉터 4~5개 연달아 작성하면 나중에 파일이 커지면 쓸데없는 버그의 원인일 수 있기 때문에 재사용성, 확장성을 염두에 둔다면 저렇게 쓰면 안됩니다