(2) - CSS 정리

* 생활코딩 강의를 바탕으로 정리한 내용 (잘못된 부분이 있다면 알려주세여)

 

CSS (Cascading Style Sheet)

 : HTML언어를 디자인하기 위해 고안된 언어

 

HTML과 CSS는 완전 독립적인 언어이다. 그렇다면 어떻게 공존할 수 있을까?

  -> <style> 태그 !! 

 이 태그 아래 내용은 CSS문법으로 작성한다. 

 밑에 코드 처럼 

{ 
  color : red;
  font-size : 10px;
  text-decoration : underline;
  border : 1px solid red;
}

 

1. CSS 선택자의 기본 

 

ex) 모든 링크 검은색으로 하기 

(사용자가 방문한적 있었던 페이지는 회색, 현재 사용자가 머무르고 있는 링크는 빨간색으로 바꾸고싶다)

 

  1) 모든 <a> 태그 color를 black으로

  2) 같은 그룹으로 묶어서 회색 color로 (태그를 class="saw"로 지정하고 class="saw"인 모든 태그에 대해 적용한다)

    

         

.saw {
    content~
    
}

  3) 현재 페이지는 class="saw active"로 지정 (class 에는 여러값 올 수 있고, 띄어쓰기로 구분)

 

.active {
   content~
   
}

    하지만 class에 여러값을 주면 어떤 css를 주는지 더 나중에 선언된 값으로 결정된다.. <- 안좋은 방법 

 

  

 

 그래서 id 선택자 사용 !! (id는 단 한번만 등장할 수 있음)

class = "saw" id ="active"로 주면

 

 

#active {
 content~
 
}

   우선순위가 id 선택자가 더 높아서 class = "saw" css 내용말고 id css내용이 적용된다

 

정리하자면

 

선택자에는  태그, 클래스, id 가 있는데 오른쪽으로 갈 수록 우선순위가 높아진다.