[CSS] CSS 선언방법

CSS를 선택하는 방법은 크게 3가지가 존재한다.

: inline / internal / external

※ 어떤 방식으로 선언하든 CSS는 아래 형태로 작성된다.

① span : selector (선택자)

② color : property (속성)

③ red : value (값)

1. inline

HTML태그 안에 직접 작성하는 방식이다.

<p style="color: red; background-color: greenyellow">테스트!!!!!!!!!!!</p>

* 하나의 웹 문서에서 HTML이 순수한 데이터만을 의미하지 않고, 디자인과 관련된 정보를 가지면 가독성이 떨어질 수 있다.

* 다른 CSS 선언 방식보다 높은 우선 순위를 가진다.

2. internal

HTML 문서 상단에 <style></style>안에 정의하는 방식이다.

<head>
<style>
p {
    font-size : 2em;
    border:1px solid gray;
    color: red;
}
</style>
</head>


<body>
<div>...</div>
</body>

별도의 CSS 파일로 관리하지 않기에 브라우저가 서버에 CSS 파일 요청을 하지 않는다.　

3. external

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

CSS 코드 양이 많거나 동일한 스타일을 여러 페이지에 적용하는 경우,

유지보수 측면에서 external 방식을 이용하는 것이 좋다.

『style.css』 파일을 따로 보관하고 link 태그로 불러온다.

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div>
            <p>...</p>
        </div>
    </body>
</html>

※ [경로]는 절대/상대 경로 상관없이 적용된다.

<link rel="stylesheet" type="text/css" href="경로" media="all"/>

CSS 선언 방식의 우선순위

동일한 스타일을 주었을 때, 선언 방식에 따라 적용되는 우선순위가 다르다.

inline > internal = external

(internal 과 external은 우선순위가 동등)

저작자표시 비영리 변경금지

'Web > HTML과 CSS' 카테고리의 다른 글

[HTML] html 태그 사용시 주의사항 (0)	2021.03.04
[HTML] 시멘틱 태그 (Semantic Tag) (0)	2021.03.04
[HTML] 로렘 입숨 (Lorem Ipsum) (0)	2021.03.04
[HTML] HTML이란? (0)	2021.03.03
[HTML] HTML 기본 구조 (0)	2021.03.03