[CSS 이해하기] CSS 문법과 적용

[CSS 이해하기] CSS 문법과 적용
/category/%EA%B3%B5%EB%B6%80/HTML%EA%B3%BC%20CSS

2022. 12. 13. 12:42

CSS 구문

h1 { color:red; font-size:2em; }

CSS는 선택자(selector), 속성(property), 값(value), 선언(declaration), 선언부(declaration block), 규칙(rule set)으로 이루어져 있다.

선택자와 선언부 사이, 선언과 선언 사이는 앞뒤로 개행을 해도 상관없다.

하지만 속성이름과 속성값 사이에는 개행을 해서는 안된다.

/*올바른 CSS*/
h1
{ color:red; font-size:2em; }

h1 {
	color:red;
    font-size:2em;
}

/*잘못된 CSS*/
h1 {
	color:
    yellow;
}

HTML와 CSS 둘 다 속성이 있는데 두 가지는 전혀 다른 것이다.

한글로 번역해서 부를 때는 둘 다 속성이라 잘 구분해서 이해해야 한다.

CSS에서 주석은 /*내용*/으로 작성하면 된다.

CSS 적용

CSS와 문서를 연결하는 방법은 4가지가 있다.

1. inline

inline은 해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법이다.

해당 요소에 직접 입력하기 때문에 선택자는 필요하지 않게 되고, 선언부에 내용만 스타일 속성의 값으로 넣어주면 된다.

inline 스타일 속성이라고 부른다.

<p style="color:red;">Hello, CSS</p>

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>css</title>
    </head>
    <body>
        <p style="color:red;">Hello, CSS</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis impedit nam fugiat officiis doloribus, dicta earum, suscipit accusamus voluptate animi non quas placeat eius ipsum. Omnis, qui eum. Maiores, sequi.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, sapiente? Nostrum, asperiores, aliquid magnam quisquam maiores odit quae similique impedit, qui iste hic explicabo quaerat totam architecto quibusdam quas sed.</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut doloribus illum, enim atque a maxime sunt ut tempora sequi saepe, excepturi deserunt est. Saepe alias velit corrupti architecto aspernatur perferendis?</p>
    </body>
</html>

만약 위 예제 코드에서 <p> 태그의 모든 내용을 빨간색으로 바꾸려면 어떻게 해야할까?

모든 <p> 태그에 스타일 속성의 값을 넣어주면 된다.

그런데 보통 웹사이트는 아주 긴 라인의 내용을 가지고 있고 문서또한 하나가 아닌 경우가 많다.

이럴 때 inline 스타일 속성은 비효율적이다.

즉, 코드의 재활용이 되지 않기 때문에 자주 사용하지 않는다.

2. internal

internal은 문서에 <style>을 활용한 방법이다.

<style>
	p { color:red; }
</style>

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>css</title>
        <style>
            p { color:red; }
        </style>
    </head>
    <body>
        <p>Hello, CSS</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis impedit nam fugiat officiis doloribus, dicta earum, suscipit accusamus voluptate animi non quas placeat eius ipsum. Omnis, qui eum. Maiores, sequi.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, sapiente? Nostrum, asperiores, aliquid magnam quisquam maiores odit quae similique impedit, qui iste hic explicabo quaerat totam architecto quibusdam quas sed.</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut doloribus illum, enim atque a maxime sunt ut tempora sequi saepe, excepturi deserunt est. Saepe alias velit corrupti architecto aspernatur perferendis?</p>
    </body>
</html>

모든 p 태그에 같은 스타일을 적용할 수 있게 되었다.

하지만 internal 스타일 속성도 한계가 있다.

많은 페이지가 있는 경우에는 페이지 마다 규칙을 선언해줘야 한다.

페이지가 많고 스타일 규칙 내용이 많아지면 결코 쉬운 일이 아니다.

3. external

external은 외부 스타일 시트 파일을 이용한 방법이다.

외부 스타일 시트는 스타일 규칙들을 별도의 외부 파일을 만들어 넣는 방식이다.

외부 파일은 확장자가 .css가 되며 css 파일이라고 부른다.

css 파일에는 CSS 구문을 그대로 적어놓으면 된다.

p { color:red; }

그 다음 HTML 문서에서 <link>를 통해 연결하면 된다.

<link rel="stylesheet" href="css/style.css">

href 속성에 css파일의 경로를 값으로 준다.

rel 속성은 연결되는 파일이 문서와 어떤 관계인지를 명시하는 속성으로, css 파일은 'stylesheet' 라고 적어야 한다.

/*css파일*/
p { color:blue; }

<!--HTML 파일-->
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>css</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <p>Hello, CSS</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis impedit nam fugiat officiis doloribus, dicta earum, suscipit accusamus voluptate animi non quas placeat eius ipsum. Omnis, qui eum. Maiores, sequi.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, sapiente? Nostrum, asperiores, aliquid magnam quisquam maiores odit quae similique impedit, qui iste hic explicabo quaerat totam architecto quibusdam quas sed.</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut doloribus illum, enim atque a maxime sunt ut tempora sequi saepe, excepturi deserunt est. Saepe alias velit corrupti architecto aspernatur perferendis?</p>
    </body>
</html>

외부 스타일 시트 방식으로 스타일을 선언하면 많은 페이지가 있더라도 <link> 한 줄로 모든 페이지에 같은 스타일을 적용할 수 있다.

또한, 수정이 필요할 때도 css 파일을 수정하면 연결된 모든 페이지에 수정 내용을 반영할 수 있다.

외부 스타일 시트 방식은 파일 관리가 간편하면서도 용량이 작기 때문에 실제로 가장 많이 사용되는 방식이다.

4. import

import는 스타일 시트 내에서 다른 시트 파일을 불러오는 방식이다.

@import url("css/style.css");

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/cs120

비전공자를 위한 HTML/CSS

부스트코스 무료 강의

www.boostcourse.org

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

[CSS 이해하기] 가상 선택자 (0)	2022.12.15
[CSS 이해하기] 선택자 (0)	2022.12.14
[CSS 이해하기] CSS 소개 (0)	2022.12.13
[콘텐츠 모델/시멘틱 마크업/블록&인라인] 블록&인라인 (0)	2022.12.12
[콘텐츠 모델/시멘틱 마크업/블록&인라인] 시멘틱 마크업 (0)	2022.12.12

김철용 기록소

CATEGORIES