CSS [CSS란?]

Lellow_Mellow·2021년 3월 23일

📚CSS

📝CSS가 뭐야?

이제까지 문서의 내용을 HTML로 작성했다면, CSS는 Cascading Style Sheets의 줄임말로, 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어다.

이전에는 HTML 하나로 문서의 스타일까지 만들어 일일히 하나씩 수정해야 했지만 CSS로 문서 스타일을 분리해 작성하게 되면서 CSS파일만 수정하면 모든 스타일을 바꿀 수 있어 편리하다.

📝CSS의 기능

CSS의 기능은 아래와 같다.

선택자(selectors)

박스 모델(Box Model)

배경 및 경계선(Backgrounds and Borders)

텍스트 효과(Text Effects)

2차원 및 3차원 변환(2D/3D Transformations)

애니메이션(Animations)

다중 컬럼 레이아웃(Multiple Column Layout)

사용자 인터페이스(User Interface)

📝CSS의 문법

CSS의 기본적인 문법은 아래와 같다.

p {background-color: yellow;}
/* 주석 처리 */

코드의 각 부분은 다음에 해당된다.

p : 선택자(Selector)
background-color : 속성(Property)
yellow : 값(Value)

코드의 열고 닫기는 { }를 사용하며, 하나의 속성값이 끝날 때마다 ;(세미콜론)을 쓴다.

📝CSS를 이용해 스타일을 꾸미는 방법

CSS를 사용하는데는 크게 3가지 방법이 있다.
속성처럼 style을 적용하는 방법과 style 태그를 사용하는 방법, CSS 파일을 별도로 작성하는 방법이다.

이 중에서는 style 태그를 사용하는 방법과 CSS 파일을 별도로 작성하는 방법이 좋으며, CSS 파일을 별도로 작성하는 방법이 가장 좋다.

👉속성처럼 style을 적용(In-line)

html 작성 시에 각 태그에 style 속성을 사용해 하나씩 넣어주는 방식이다.
이를 인라인 스타일 시트라고도 한다.

다음 예시는 h1 태그로 작성된 텍스트의 색상을 blue로 지정해주는 코드이다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Inline 예시</title>
    </head>
    <body>
        <h1 style = "color:blue;">예시 텍스트</h1>
    </body>
</html>

👉style 태그를 사용(Internal)

html 작성 시에 <head> 태그 내부에 <style> 태그를 이용하여 작성해주는 방식이다.
이를 내부 스타일 시트라고도 한다.

위와 동일한 역할을 하는 코드를 작성한 예시이다.

<!DOCTYPE html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Internal 예시</title>
        <style>
            h1 {color: blue;}
        </style>
    </head>
    <body>
        <h1>예시 텍스트</h1>
    </body>
</html>

👉CSS 파일을 별도로 작성(External)

CSS 파일을 별도로 만들어 작성한 후에 html 문서와 연결해주는 방법이다. CSS 파일은 확장자가 .css이며, Internal 방식에서 <style> 태그 안에 있는 내용만 적어주면 된다.
이를 외부 스타일 시트라고도 한다.

아래는 CSS 파일 작성의 예시이다.

h1 { 
color: blue;
}

위와 같이 작성한 CSS 파일은 다음과 같이 연결해준다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Internal 예시</title>
        <link rel="stylesheet" type="text/css" href="example.css">
    </head>
    <body>
        <h1>예시 텍스트</h1>
    </body>
</html>