본문 바로가기
Programming/HTML & CSS & JavaScript

CSS 1일차 - 적용방법3가지, 캐스캐이딩 & 명시도

by yoon9i 2024. 4. 22.

# CSS

1. 환경설정
1)  node 설정
https://nodejs.org/ 다운받고 설치(기본설치)

cmd 창에서 node -v 입력하고 버전확인.

2) VSC( Visual Studio Code ) 설치
https://code.visualstudio.com/ 다운받고 설치(기본설치)

3) 워크스페이스 작성


2. CSS 역할 및 버전
역할: html 에 시각적 표현을 지정해서 스타일 관리.
css1: 1996년
css2: 1998년
css3: 현재까지도 개발중. ( 표준화 버전 )

 

3. CSS 적용 방법 3가지
1) 인라인 스타일( inline style )
- html 의 시작태그에서 style 속성으로 스타일을 지정하는 방법.
ex) <p>Hello</p>
     <p style="color: red" >Hello2</p>
     <span style="color: red" >Hello2</span>

2) 내부 스타일 ( internal style )
- html 내의 <head> 에 <style> 태그 이용해서 스타일을 지정하는 방법.
ex)
<head>
   <style>
         p, span {
            color: red;
         }
   </style>
</head>
<body>
   <p>Hello2</p>
   <span>Hello3</span>
</body>

- <style> 태그의 css 속성들이 길어질 수 있음.
  다른 html 에서 동일한 css 일지라도 중복 정의해야 된다.

3) 외부 스타일 ( external style )
- html 외부에 *.css 가진 외부 파일로 작성하고
  필요한 html 에서 불러다가 사용. ( <link> 태그 이용 )
- 같은 *.css 파일을 사용하는 여러 html 페이지는 맨 처음 요청한 페이지에서
  다운로드 받은 css 파일을 웹브라우저에 저장 ( 캐시메모리 ) 해두고 
  다른 페이지에서 재사용한다.

ex) #main.css
     p, span {
        color: red;
     }
    
    # a.html ( b.html )
    <head>
        <link rel="stylesheet type="text/css" href="main.css">
    </head>

     <body>
        <p>Hello2</p>
        <span>Hello3</span>
    </body>

 

<!DOCTYPE html>
<html lang="en">

<head>
    <title>CSS 적용방법 3가지</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="test.css">
    <style>
        /* class 명으로 css 를 설정할때는 '.클래스명' 사용한다. */
        .x {
            /* COLOR: BLUE; 속성명과 속성값은 대소문자 구별 안함.*/
            color: blue;
        }
    </style>
</head>

<body>
    <!-- 인라인 스타일 -->
    <p style="color: red;">Hello1</p>
    <span style="color: red; background-color: yellow;">Hello2</span>

    <!-- 내부 스타일(internal style) - <style> 태그사용 -->
    <p class="x">Hello3</p>
    <span class="x">Hello4</span>

    <!-- 외부 스타일(external style) - link 사용 -->
    <p id="a">Hello5</p>
    <span id="b">Hello6</span>
</body>

</html>




4) 우선순위 

인라인 스타일 > 기본적으로는 내부 스타일 > 외부 스타일
- 단, 내부 와 외부는 뭘 먼저 선언하는가에 따라서 달라진다.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>CSS 적용방법 3가지</title>
    <!-- 2,3. <link> | <style> 중 뭐가 먼저 선언됬냐에 따라서 순위가 바뀜(순차문) -->
    <link rel="stylesheet" href="test2.css">
    <style>
        p {
            color: blue;
        }
    </style>

</head>

<body>
    <!-- 1. 우선순위가 가장높음 -->
    <p style="color: aqua;">Hello</p>

</body>

</html>

 

4. CSS ( Cascading Style Sheet )
1) 캐스캐이딩 ( Cascading )
html
head                body
                           |
                         div
                           |
                           p

- 개념:
DOM 트리의 상위요소에서 정의한 스타일이 하위 요소로 전달되는 개념이다. ( 상속개념 )
하나의 요소에 여러 스타일이 지정될 수 있음을 뜻함.
이러한 규칙은 충돌을 발생시킴. 해결방법은 명시도( Specificity ) 를 사용한다.
하위에서 재정의 가능

 

- 기본적인 CSS 명시도
인라인스타일 > id > css의 class, 속성 > 태그

ex) <a href=""></a>
     <p class="y"></p>
     <span id="x"></span>

* 다음은 명시도 가중치 표현식이다. 
( visual studio code 에서 css 선택자 위에서 마우스 오버하면 확인이 가능 )
# id 의 명시도 값: ( 1, 0, 0 ) ==> 가중치: 100 이라고 생각하자
.class 와 속성 의 명시도 값: ( 0, 1, 0 ) ==> 가중치: 10 이라고 생각하자
태그의 명시도 값: ( 0, 0, 1 ) ==> 가중치: 1 이라고 생각하자

 

<!DOCTYPE html>
<html lang="en">

<head>
    <title>캐스캐이딩과 명시도</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body style="color: red;">
    <div>
        111
        <div style="color: blue;">
            222
            <div style="color: aqua;">
                333
            </div>
        </div>
    </div>

</body>

</html>

 

- !import
=> 권장안함
=> 기본적인 명시도의 가중치값을 완전히 무시하고 최우선 순위를 가짐.
( 인라인 스타일보다 우선권이 더 높음 )
ex) div {
         color: aqua !important;
     }

 

<!DOCTYPE html>
<html lang="en">

<head>
    <title>캐스캐이딩과 명시도</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #xxx {
            color: red;
        }

        .yyy {
            color: blue;
        }

        div {
            color: aqua !important;
        }

        [herf] {
            color: bisque;
        }
    </style>
</head>

<body>
    <div>
        111
        <div id="xxx" class="yyy">
            222
            <div style="color: brown;">
                333
            </div>
        </div>
        <a href="">daum.net</a>
    </div>

</body>

</html>

 

선택자를 결합해서 구체적으로 지정할 수록 명시도가 올라간다.
  지정된 선택자를 모두 사용하기 때문임.


명시도 참조사이트:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

<!DOCTYPE html>
<html lang="en">

<head>
    <title>캐스캐이딩과 명시도2</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #xxx h1 {
            color: red;
        }

        h1 {
            color: blue;
        }
    </style>
</head>

<body>
    <div id="xxx">
        <h1>Hello</h1>
    </div>
</body>

</html>

 

 

'Programming > HTML & CSS & JavaScript' 카테고리의 다른 글

CSS 2일차 - 선택자(2), BEM, 의사클래스, 의사요소  (0) 2024.04.23
CSS 1일차 - 선택자  (0) 2024.04.22
HTML 2일차 - 시멘틱 태그, 사용자 입력, form, img, iframe, 특수문자  (0) 2024.04.22
HTML 2일차 - table, list, span  (0) 2024.04.22
HTML 2일차 - 1일차 요점  (0) 2024.04.22

관련글

티스토리툴바