[CSS] CSS 기본개념과 렌더링원리

CSS를 HTML에서 사용하는 방법

CSS 기본사용법

span { color : red; }
selector(선택자) property value

1. inline

html 태그 안에다가 <inline>

같은 selector로 동일한 속성값에 다른 value를 넣을 땐 inline이 "최우선"으로 적용됨

구조랑 css 태그가 섞여있어서 관리가 어렵고 유지보수가 어렵다.

2. internal

<head>안에 <style>태그를 쓰는것

별도의 css파일을 관리하지 않아도 되고, 서버에 css 파일을 불러오기 위해 서버에 별도의 브라우저가 요청을 따로 하지 않는 장점이 있다.

3. external

외부파일(.css)로 지정하는 방식

css.test1.html

<html>
<head>
    <!-- 2.internal -->
    <style> 
        div>p{
            font-size:20px;
        }
    </style>
     <!-- 3.external -->
    <link rel="stylesheet" href="css_test1.css">
</head>
<body>

    <div> 
        <!-- 1.inline 태그 -->
        <p style="color:blue">예제</p>
    </div>

</body>
</html>

css_test1.css

div>p{
    color:red; /*inline이 최우선으로 적용되기 때문에 이는 적용되지 않음*/
    border: 1px solid slategray;
}

CSS에서의 상속개념

상위에 설정된 style을 하위에서도 쓴다. -> 재사용 측면에서 좋다.

color, font-size같은 대부분의 속성은 상속을 받으나, border나 padding같은 배치와 관련된 속성은 상속을 받지 않는다.

캐스캐이딩(Cascading)- computedstyle이 결정되는 방식

CSS(Cascading Style Sheet)는 여러가지 스타일정보를 기반으로 최종적으로 '경쟁'에 의해서 적절한 스타일이 반영된다.

브라우저가 처리하는 일이지만 규칙이 있어서 개발할 때 그 규칙을 따르면됨. 즉, 하나의 엘리먼트에 대해서 다양한 스타일이 영향력을 행사하려고 할때 우선순위를 어떻게 설정하는지에 대한 규칙이 캐스캐이딩이다.

1. 선언방식에 따른 차이

inline > internal > external

2. 동일하면 나중의 것

body {
	color : red;
}
body {
	color : blue;
}

=> blue (파랑색)으로 적용됨

3. 구체적으로 표현한 것

body > span {
	color : red;
}
body {
	color : blue;
}

=> red(빨간색)으로 적용됨

4. id > class > element

<div id="a" class="b">
	text..
</div>

#a{ /*1순위*/
	color: red;
}
.b{ /*2순위*/
	color:blue;
}
div { /*3순위*/
	color:green;
}

=> red(빨간)으로 적용됨

더 많은 걸 알고싶으면 구글에 "CSS specificity" 서치해보기~

Selector를 활용한 DOM탐색

CSS Selecort

HTML 요소를 tag, id, class, html 태그속성등을 통해 쉽게 찾아주는 방법

element에 style을 지정하기 위해서, 3가지 기본 선택자를 사용할 수 있음

1. tag로 지정하기

태그이름 써주면됨

<html>
    <head>
        <style>
            span{
                color : red;
            }
        </style>
    </head>
    <body>
 		<span id="#myspan">my text is upper!</span>
    </body>
</html>

2. id로 지정하기

html 페이지에 하나만 쓰는게 좋다. unique, identify하기때문에..

<html>
    <head>
        <style>
            #myspan{
                color : red;
            }
        </style>
    </head>
    <body>
         <span id="#myspan">my text is upper!</span>
    </body>
</html>

3. class로 지정하기

<html>
    <head>
        <style>
          	.spanClass{
                color : red;
            }
        </style>
    </head>
    <body>
         <span class="spanClass">my text is upper!</span>
    </body>
</html>

css selector 활용

- id, class 요소 선택자와 함께 사용

        <style>
            span#myspan{
                color : red;
            }
            div.myclassname{
            	color : red;
            }
        </style>

- 그룹 선택

h1, span, div {color:red}
h1, span, div#id {color:red}
h1, span, div.classname {color:red}

- 하위 요소 선택 (공백)

- 자식 선택(>)

- n번째 자식요소 선택(nth-child)

<html>
    <head>
        <style>
            #mydiv > p:nth-child(2){
                color:red;
            }
        </style>
    </head>
    <body>

        <div id="mydiv">
            <h2>단락 선택</h2>
                <p>1</p>
                <p>2</p>
                <p>3</p>
                <p>4</p>
        </div>

    </body>
</html>

=> 숫자 2 에 style 적용됨

이 글은 inflearn의 <HTML,CSS개발을 위한 핵심가이드> 강의를 들으며 정리한 내용입니다.

'WEB > HTML+CSS' 카테고리의 다른 글

[CSS] CSS 애니메이션 (Transform, Transition, Animation) (0)	2022.04.11
[CSS] Layout 설정 (0)	2020.07.15
[CSS] CSS color, font style 적용 (0)	2020.07.15
[CSS] HTML 웹 페이지에 style 주기 (0)	2020.07.11
[HTML] HTML 태그 정리 (0)	2020.07.10