반응형

CSS란?

  • CSS는 Cascading Style Sheet 의 약자입니다.

 

CSS적용 방법

CSS를 적용하는데에는 3가지 방법이 있습니다.

  1.  Inline Style Sheet 
    • HTML 태그의 style속성을 사용하여 CSS코드를 넣는 방법입니다.
    • 단점으로는 꾸미는데 한계가 있고, 재사용이 불가능 합니다.

    •  

      1
      <p style="color:red;"> Shnav.tistory.com </p>
  2.  Internal Style Sheet
    • 문서 head안 <style>과</style> 사이에 CSS코드를 넣는 방법입니다.
    • HTML문서안의 여러 요소를 꾸밀수 있는것이 장점이지만, 다른 HTML문서에 적용할 수 없다는 단점이 있습니다.
    • 1
      2
      3
      p{
          color:red;
      }
  3.  Linking Style Sheet
    • 이는 별도의 CSS파일을 만들어 HTML문서와 연결하는 방법 입니다.
    • 어러 HTML문서에 사용할 수 있습니다.
    • 1
      <link rel="stylesheet" href="css/style.css">

 

Cascading ?

  • HTML요소는 하나 이상의 스타일에 영향을 받을 수 있는데 어떤 스타일을 적용 받을지에 대한 우선순위가 정해져야합니다. 이를 Cascading이라고 합니다.

캐스캐이딩 (cascading)은 다음 3가지에 의해 결정 됩니다.

  1. CSS가 어디에 선언되어있나 (중요도)
  2. 대상을 명확하게 지정할수록 높은 우선순위를 가지고 있습니다 (명시도)
  3. 코드 순서

중요도

  •  태그내에서 style속성
  •  <head> 의 <style> 
  •  <head>의 <style>안에 @import
  •  <link>로 연결된 CSS 파일
  •  <link>로 연결될 CSS파일 내의 @import

<link>로 연결된 css파일보다 head내의 style이 우선순위가 더 높습니다.

html요소 style속성을 사용하는것보다 style이나 외부 css파일로 빼는것이 더 좋습니다.

※ style이나 외부 css파일로 빼는 이유는 다음과 같습니다.

  • 스타일과 마크업을 명확하게 구분합니다 (마크업에 관한 설명은 해당 링크를 타고 들어가시면 확인이 가능합니다)
  • 선택자를 사용하면 페이지 여러요소에 규칙을 적용하여 관리를 개선하며 중복을 피할 수 있습니다.

 

명시도

  • !important
  • id 선택자
  • class 선택자
  • 태그 선택자

!important는 명시도 자체와 아무 관련이 없지만, 명시도에 직접적인 영향을 미칩니다.

!important는 남용하면 안됩니다.

※ !important를 남용하게되면 캐스캐이딩을 깨트려 디버깅을 어렵게 합니다.

 

 

명시도 계산법

!important (10000) > inline-style(1000) > id(100) > class(10) > tag(1) > * (0)

계산법에 의하면 !important는 나와있지않지만 어찌되었든 가장 강력하게 적용됩니다.

inline-style은 흔히 우리가 태그에 style 속성을 부여하여 css를 입혔을때를 의미합니다.

 

몇가지 예를 들어보겠습니다.

div p span 3개의 요소이므로 3점 입니다.
#nav ul li id1개와 요소2개 이므로 102점 입니다.
#nav .photo li id 1개와 class 1개 그리고 요소 1개 이므로 111점 입니다.
#header h1 .logo id 1개와 요소 1개 그리고 class 1개이므로 111점 입니다.
.recipe a:hover class 1개와 가상클래스 1개 요소 1개 이므로 21점입니다.

 

코드 순서

1
2
3
4
5
6
7
8
9
<style>
  p {
    color: red;
  }
  p {
    color:blue;
  }
</style>
<p>Hello</p>

 

이러한 상태에서 Hello는 어떤 색깔이 될까요?

이는 늦게 선언된 스타일이 우선 적용 됩니다. 즉 Hello는 파란색이 됩니다.

 

 

반응형

'Language' 카테고리의 다른 글

[Java] 자바를 이용한 구구단 게임 만들기  (0) 2020.08.27
알아두면 좋은 CSS 선택자  (0) 2020.08.27
[HTML] HTML 기초설명  (0) 2020.08.27
[자바스크립트] 클로저( Closure )함수 쉽게 이해시켜드립니다  (0) 2020.08.27
[자바스크립트]Virtual Dom이란?  (0) 2020.08.27

+ Recent posts

티스토리툴바