기타/(기타) 헷갈리는거, 어려운코드, 효율적인코드

CSS 기본 선택자 & 우선순위

Lethargin 2023. 3. 16. 18:55

*선택자 : 웹 문서에서 어느 부분에 스타일을 적용할지 알려주는 것

 

여러 요소에 스타일을 적용하고 싶을 때

 전체 선택자 * {
   }

-스타일을 문서의 모든 요소에 적용하고 싶을 때 씀
-모든 하위 요소에 스타일을 한꺼번에 적용
타입 선택자
(=태그 선택자)
(=요소 선택자)		 p {
   }

-p태그를 사용한 모든 p요소에 스타일을 적용
       
일부 요소는 다른 스타일을 개별적으로 적용하고 싶을 때

 클래스 선택자 .블라블라 {     }   ~   class="블라블라"

1. 하나의 요소에 한개의 클래스를 적용하는 경우
2. 하나의 요소에 두개 이상의 클래스를 적용하는 경우 
3. <span 태그>를 쓰는 경우





-일부는 다른 스타일을 적용하고 싶을 때 씀
-클래스 선택자를 사용해 만든 스타일 = 클래스 스타일 -> 이 클래스 스타일을 적용할 때에는 class="accent"와 같이 씀
id 선택자 #블라블라 {     }     ~     id="블라블라"

-클래스 선택자와 마찬가지로, 특정 부분만 스타일을 다르게 하고 싶을 때 적용
(단, 클래스 선택자는 여러번 적용 가능하지만, id 선택자는 한번만 적용 가능)
       
(보기좋게
묶어서 쓰고싶을때
)
(그룹 선택자)		 -예를 들어 h1요소와 p요소가 같은 스타일 규칙을 갖고 있다면 => h1, p {   }로 묶음

*적용순서: !important > 인라인 스타일(body) > id 스타일(head) > 클래스 스타일(head) > 타입 스타일(head)

단, 같은 p타입 스타일일 경우, 뒤에 오는게 우선순위가 더 높으므로 black대신 blue가 됨

 

①인라인 스타일 

  • <p style = "color: blue;">  =>얘처럼 스타일을 적용하고 싶은 body부분에 직접 style="속성, 속성값;" 형태로 적는 것

②내부 스타일 시트

  • <head>에 <style> ~ </style>로 적는 것

③외부 스타일 시트

  • <style>태그 대신 <link>태그를 씀
  • <link rel="stylesheet" href="블라/블라"> =>이 파일은 스타일시트와 관련되어 있고, 외부파일을 가져올 예정이라는 뜻