HTML & CSS 비긴즈 02 ( CSS 의 우선순위 )

2023. 3. 8. 17:48· '국비지원'의 시작

CSS( Cascading Style Sheet ) 로 앞선 블로그 글에서도 봤듯이, CSS는 HTML에 스타일, 즉 , 디자인을 붙여주는 언어이다. CSS에서 중요한 것은  '우선순위' 에 대하여 이해하여야 한다는 것입니다. CSS 우선순위가 중요한 이유는 여러 곳에 스타일을 주다 보면, 중복되는 상황이 발생하는 경우가 다반사이다. 이 우선순위를 이해하지 못하면,  스타일 규칙이 제대로 적용되지 않을 수도 있습니다. 그렇다면, 어떻게 우선순위가 정해지는 지 확인해보도록 하자. 

1. 중요도(Importance) : !importance 키워드가 지정된 스타일 규칙은 다른 규칙보다 우선합니다.

2. 직접적 우선순위(Specificity) : 스타일 규칙의 선택자가 명시적이고 구체적일수록 우선순위가 높습니다. 그러하여, 아이디 > 클래스 > 태그  해당 순으로 우선순위가 높게 됩니다.

3. 선언 순서(Source Order) : 스타일 규칙이 나중에 선언될수록 우선순위가 높습니다. 즉, 같은 우선순위를 가지는 스타일 규칙중에서 나중에 선언된 규칙이 우선권을 가집니다

이외에도, CSS가 따르는 우선순위가 있는데 살펴보면 다음과 같습니다

1. !important (CSS 강제적용)

2.해당 태그에 직접 준 것 ( 인라인 방식)

EX) <span style="color : red ; " > 1234 </span>

3. HTML 파일에서 준 style 태그 (임베디드 방식)

=> 위의 의미는 <head> 태그 안에 주로 <style> 태그 안에 정의하는 방식을 의미한다.

4. 외부에 있는 .CSS 파일을 로드한 것

EX) <link rel = "stylesheet" href = "mycss.css">

 

위에서 이렇게 설명하면, 이해하기 쉽지 않을 수도 있기에 , 밑에 처럼 직접 예시를 만들어서 보여주려고 한다. 

 

 

 

''국비지원'의 시작' 카테고리의 다른 글

자바스크립트(JS) 비긴즈 01 문자열( String )  (0) 2023.03.10
자바스크립트(JS) 비긴즈 02 함수 선언 방법  (0) 2023.03.10
HTML,CSS 비긴즈 01 ( INLINE 요소 , BLOCK 요소 )  (0) 2023.03.02
자바 & 오라클 01 ( 자바를 통해 SQL문 실행하기 )  (0) 2023.02.21
오라클 비긴즈 11 ( 정규화 과정 )  (0) 2023.02.21
''국비지원'의 시작' 카테고리의 다른 글
  • 자바스크립트(JS) 비긴즈 01 문자열( String )
  • 자바스크립트(JS) 비긴즈 02 함수 선언 방법
  • HTML,CSS 비긴즈 01 ( INLINE 요소 , BLOCK 요소 )
  • 자바 & 오라클 01 ( 자바를 통해 SQL문 실행하기 )
개발할 결심
개발할 결심
백엔드와 프론트엔드의 조화를 이루는 프론트엔드 개발자 입니다.
개발할 결심
개발할 결심
개발할 결심
전체
오늘
어제
  • 분류 전체보기
    • '국비지원'의 시작
    • '취준' 시작

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 수동적X
  • 국비지원학원
  • 백엔드
  • 비전공자
  • 프론트엔드
  • 자바
  • react
  • 쌍용강북교육센터
  • 오라클
  • 비동기
  • 자바스크립트
  • fetcting data with Effects
  • 리액트
  • 국비it학원
  • 이뮤터블 메서드
  • 생성자의오버로딩
  • Java
  • SQL
  • 국비지원
  • 개발자

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.0
개발할 결심
HTML & CSS 비긴즈 02 ( CSS 의 우선순위 )
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.