Notice
                              
                          
                        
                          
                          
                            Recent Posts
                            
                        
                          
                          
                            Recent Comments
                            
                        
                          
                          
                            Link
                            
                        250x250
    
    
  | 일 | 월 | 화 | 수 | 목 | 금 | 토 | 
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 | 
| 9 | 10 | 11 | 12 | 13 | 14 | 15 | 
| 16 | 17 | 18 | 19 | 20 | 21 | 22 | 
| 23 | 24 | 25 | 26 | 27 | 28 | 29 | 
| 30 | 
                            Tags
                            
                        
                          
                          - SasS
 - hash table
 - sorting
 - Python
 - array
 - 파이썬
 - math
 - vue.js
 - 자료형
 - scss
 - Algorithm
 - CSS
 - JS
 - HTML
 - JavaScript
 - github
 - string
 - java
 - 백준
 - greedy
 - 알고리즘
 - 컴포넌트
 - 프로그래머스
 - computed
 - dynamic programming
 - 코딩테스트
 - 자료구조
 - JavaSceipt
 - 변수
 - leetcode
 
                            Archives
                            
                        
                          
                          - Today
 
- Total
 
Posis
[CSS] 선택자와 우선순위 본문
class 선택자
- 요소의 특정 부분에만 스타일 적용
 - 마침표(.) 다음에 클래스 이름 지정
 - 문서 안에서 여러 번 반복해서 사용할 수 있음, 중복 가능
 
id 선택자
- 요소의 특정 부분에만 스타일 적용
 - 파운드(#) 다음에 id 이름 지정
 - 문서 안에서 한번만 사용할 수 있음, 중복 불가
 
스타일 충동을 막는(Cascading)의 원칙
- 스타일 우선순위: 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일 적용
 - 스타일 상속: 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달
 
Style 우선순위(높은 순서부터 작성)
- !important: 어떤 스타일보다 우선 적용되는 스타일
 - 인라인 스타일: 해당 태그에만 적용되는 스타일
 - id 스타일: 문서 안에서 단 한번만 사용하는 스타일
 - class 스타일: 문서 안에서 여러번 사용할 수 있는 스타일
 - HTML 태그 스타일: 문서 안의 같은 태그에 모도 적용
 - 부모 요소에 의해 상속된 속성
 
728x90
    
    
  'HTML, CSS' 카테고리의 다른 글
| [HTML] 이미지 사용하기 (0) | 2023.01.04 | 
|---|---|
| [HTML] 표 만들기 (0) | 2023.01.04 | 
| [HTML] 목록 만들기 (0) | 2023.01.04 | 
| [HTML] 텍스트 태그 (0) | 2023.01.04 | 
| [HTML] 시맨틱 태그(Semantic Tag)란? (0) | 2023.01.03 |