CSS selector 활용, 링크 클릭 보라색 흔적 없애기

 

1. selector 사용법

 

사용법 1. 공백

• 공백을 이용해 안에 있는 li 태그인 모든 자손을 선택할 수 있습니다.
• 스페이스바 다음에 tag 셀렉터 말고 class 셀렉터 id 셀렉터 자유롭게 사용가능
• .class .class .class 이런 식으로 무한히 연달아 사용가능

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

.navbar li {
  display : inline-block;
}

 

 

 

사용법 2. 꺾쇠괄호 > 

• 기호를 이용해 .li-inline 바로 밑에있는 자식만 선택

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

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

 

 

 

사용법 3. 더욱 상세히 선택하고 싶다면

• .navbar 안에 있는 모든 li, 그리고 그 안에 있는 모든 직계 자손 span 태그를 선택

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

.navbar li>span {
  color : red;
}

 

 

사용법 4. 연달아 붙여쓰지 않는다!

• 셀렉터를 남발하는 것 보다는 하나의 새로운 클래스를 만드는것이 좋습니다.

.container div div>p>span

• p태그의 class를 headline 으로

.headline>span

 

 

 

2. 링크 디자인

• 링크는 기본적으로 밑줄이 쳐져있는데, 이걸 제거하고싶다면 text-decoration 속성을 사용

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

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

 

• 링크 클릭시 보라색 흔적 없애기
  • 검은색 글씨를 기본값으로 black으로 설정하면 됩니다.
    • 혹은 color를 원하는 색상으로 변경하시면 됩니다.

<style>
    a { text-decoration: none; color: black; }
    a:visited { text-decoration: none; }
    a:hover { text-decoration: none; }
    a:focus { text-decoration: none; }
    a:hover, a:active { text-decoration: none; }
</style>