[HTML/CSS] 셀렉터를 이용해 CSS 코드 양 줄이기

🐳Coding apple HTML/CSS All-in-one : 기초부터 Bootstrap, SASS, 고급 animation 까지 강의를 보고 정리한 글입니다 🐳

💫 div 대신 쓸 수 있는 태그

• <nav>
• <section>
• footer
   

💫 HTML 태그에 클래스 두 개 이상 붙이기

<div class="container text-center"> </div>

💫 셀렉터 사용법

⭐ 1. 공백

<ul class="navbar">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

.navbar li {
  display : inline-block;
}

안에 있는 <li> 태그인 모든 자손을 선택할 수 있다.

⭐ 2. 꺾쇠 괄호 >

<ul class="navbar">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

.navbar>li {
  display : inline-block;
}

.li-inline 바로 밑에 있는 자식만 선택할 수 있다.

⭐ 3. 더욱 상세히 선택하고 싶다면

<ul class="navbar">
  <li> <span>안녕</span> </li>
  <li></li>
  <li></li>
  <li></li>
</ul>

.navbar li>span {
  color : red;
}

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

💫 간단한 링크 디자인

<a href="#" class="link">링크</a>

.link {
  text-decoration : none;
}
.link:visited {
  color : black;
}

text-decoration : 링크의 기본적인 밑줄 제거