Park Won Il

늦깎이 개발자 지망생

[HTML/CSS] CSS를 HTML에서 사용하는 방법 2

2 분 소요

CSS를 HTML에서 사용하는 방법 2

CSS에서 상속의 개념

  • Tip : div>ul 을 자동완성(ctrl + space) 를 이용하면 아래와 같이 된다.
    • 의미 : div 아래 ul을 만들겠다.
<div>
    <ul></ul>
</div>

padding과 border 같은 속성은 상속을 받지 않는다. 나머지 외 속성들은 상속이 적용되어 효율적으로 CSS 를 구성할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* div ul li div p {
            color: green;
        } */
        div ul {
            color: green;
            font-size: 30px;
            border: 2px solid slategray;
            padding: 30px;
        }
    </style>
</head>
<body>
  
    <div>
        <span>my text is upper!</span>
        <ul>
            <li>
                <span>my text is dummy</span>
                <div>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis fugit eveniet hic labore maxime. Amet illum deserunt ea maiores, quaerat debitis mollitia dignissimos ex repellat harum perspiciatis ut nesciunt libero?</p>
                </div>
            </li>
        </ul>
    </div>
      
</body>
</html>

Castcading - Comuted style이 결정되는 방식

  • CSS는 여러가지 스타일 정보를 기반으로 경쟁 에 의해서 최종적으로 적합한 스타일이 반영된다.
  • 선언 방식에 의한 차이 :
    • inline > internal > external
span {
    color : red;
}
  
span {
    color : blue;
}
  
/* 동일하면 맨 밑에 있는 속성 (Blue) 이 적용됨 */

body > span {
    color : red;
}
  
span {
    color : blue;
}
  
/* 아래의 span 속성보다, body > span 이 더 구체적이기 때문에 red 가 적용됨 */
/* Score 제도로, 구체적일 수록 우선순위가 높아짐 (점수가 높아짐) */

<style>
	#a {
        color : red;
	}
  	
	.b {
        color : blue;
	}
</style>
  
...
  
<div id="a" class="b">
	text ...
</div>
  
<!-- id 와 class 가 같은 노드를 가리키고 있음 -->
<!-- 우선순위 id > class > element 이므로 red 가 적용됨 -->
  • google search!
    • CSS Specificity
  • 예를들어, id는 10점, class는 5점으로 Score가 부여되어 최종적으로 계산하는 방식 (Cascading)

Selector를 활용한 DOM 탐색

  • CSS Selector
    • HTML의 요소를 tag, id, class, html 태그 속성등을 통해 쉽게 찾아주는 방법
    • Tree 구조, DOM Tree, tag Name, Class Property, 부모 자식 관계
  • element에 Style을 지정하기 위해서 3가지 기본 선택자를 사용할 수 있음
    • tag: tag를 style태그 안에 써주면 됨(기본)
    • id: #태그id값 Unique한 속성을 지켜주는것이 좋다
    • class: 태그 .태그Class값
  • 그 외
    • id, class요소 선택자와 함께 사용
    • span#태그id값: span 태그에 지정된 id를 사용할 때 쓰이기도 한다
    • div.태그클래스명
  • 그룹 선택
    • h1, span, div
    • h1, span, div#id
    • h1.span, div.classname
  • 하위 요소 선택
    • #id값 span { color: red }
    • #id > span {color : red }
  • n번째 자식요소를 선택
<body>
    <div id= "test" >
        <h2>단락 선택</h2>
        <p>11111</p>
        <p>22222</p>
        <p>33333</p>
        <p>44444</p>
    </div>
</body>
  • #test p:nth-child(2){ color : red }

결과

댓글남기기

참고