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 |
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 |