CSS 튜토리얼)Part2. CSS 기본문법 - CSS 작성하기

Posted Apr 4, 2024 Updated Apr 20, 2024

By kimyih 19 min read

안녕하세요, 여러분! 👋

앞에서 part1 CSS 에 대해 알아보았는데요.

오늘은 Part2 , CSS 시작하기에 대해 알아보도록 하겠습니다.

Part2는 분량이 조금 있기 때문에 나눠서 하나씩 설명하도록 하겠습니다.

CSS 작성 방법
인라인 스타일
내부 스타일 시트
외부 스타일 시트

이 4개를 먼저 소개하도록 하겠습니다.

CSS란?

CSS(Cascading Style Sheets) 는 웹 페이지의 디자인과 레이아웃을 정의하는 스타일 시트 언어입니다.

웹 페이지의 텍스트, 색상, 크기, 간격 등을 조절하여 사이트의 외형을 꾸미는 데 사용됩니다. HTML이 웹 페이지의 구조를 담당한다면, CSS는 그 구조에 ‘옷을 입히는’ 역할을 합니다. 이렇게 함으로써, 웹 개발자는 웹 페이지의 내용과 디자인을 분리하여 관리할 수 있게 됩니다. CSS를 사용하면 다양한 기능을 활용하여 웹페이지를 더욱 풍성하게 만들 수 있습니다.

CSS 작성 방법

1. 선택자(Selector)

선택자는 스타일을 적용하고자 하는 HTML 요소를 지정합니다.
여러 형태의 선택자가 있으며, 가장 일반적인 것들은 태그 선택자, 클래스 선택자, ID 선택자입니다.

태그 선택자: 특정 타입의 모든 요소에 스타일을 적용합니다. 예: p, h1, div
클래스 선택자: 특정 클래스가 적용된 모든 요소에 스타일을 적용합니다. 클래스 선택자는 점(.)으로 시작합니다. 예: .menu
ID 선택자: 특정 ID를 가진 단일 요소에 스타일을 적용합니다. - ID 선택자는 해시태그(#)로 시작합니다. 예: #header

2. 선언 블록(Declaration Block)

선택자 뒤에 오는 중괄호({}) 안에 스타일 선언을 작성합니다.
각 선언은 속성과 그 속성의 값을 포함하며, 세미콜론(;)으로 구분합니다.

selector {
    property: value;
    property: value;
}

속성(Property): 스타일을 정의하는 키워드입니다. 예: color, font-size, margin
값(Value): 속성에 설정될 값입니다. 예: red, 12px, 20px 0 10px 0

3. 스타일 적용 방법

CSS를 HTML 문서에 적용하는 방법은 크게 세 가지입니다:

인라인 스타일: 직접 HTML 요소 내에 style 속성을 사용합니다.
내부 스타일 시트: <head> 태그 내의 <style> 요소를 사용합니다.
외부 스타일 시트: 외부 .css 파일을 만들고 HTML 문서에 링크합니다.

예제 외부 스타일 시트 (styles.css):

  
body {
    background-color: lightgrey;
}

h1 {
    color: navy;
    text-align: center;
}

.menu {
    background-color: black;
    color: white;
    padding: 10px;
}

#header {
    background-color: green;
    color: yellow;
}

HTML 문서에서 CSS 링크하기:

  
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div id="header">헤더</div>
    <h1>제목입니다</h1>
    <p class="menu">메뉴 아이템</p>
</body>
</html>

인라인 스타일

SS 인라인 스타일은 HTML 요소에 직접 스타일 정보를 적용하는 방법입니다.
이 방식은 개별 HTML 요소에만 영향을 미치며, 해당 요소의 style 속성을 통해 스타일 규칙을 직접 작성합니다.
인라인 스타일은 주로 간단한 스타일 변경이 필요할 때 사용되거나, 특정 요소에 대해 매우 구체적인 스타일을 빠르게 적용하고자 할 때 유용합니다.

인라인 스타일 특징

특징	설명
지역성	스타일은 오직 해당 HTML 요소에만 적용됩니다.
우선순위	인라인 스타일은 CSS 파일이나 `<style>` 태그 내의 스타일보다 높은 우선순위를 가집니다.
재사용 불가	같은 스타일을 다른 요소에 적용하려면 각 요소에 스타일을 반복적으로 작성해야 합니다.
유지보수의 어려움	스타일 변경 시 각 요소를 개별적으로 수정해야 하므로 유지보수가 어렵습니다.
코드 중복	비슷한 스타일을 여러 요소에 적용할 경우 중복 코드가 발생할 수 있습니다.
가독성 저하	HTML 문서 내에 스타일 코드가 많아지면 문서의 전반적인 가독성이 저하될 수 있습니다.

인라인 스타일 사용 예

HTML 요소에 직접 스타일을 적용하고 싶을 때, 다음과 같이 style 속성을 사용하여 스타일을 정의할 수 있습니다.

  
<p style="color: red; font-size: 16px;">이 텍스트는 빨간색이고, 글자 크기는 16픽셀입니다.</p>

이 예에서 <p> 태그 내의 텍스트는 빨간색으로 표시되며 글자 크기는 16픽셀로 설정됩니다.
이러한 방식은 특정 요소에 빠르고 간단하게 스타일을 적용할 때 효과적이지만, 대규모 사이트나 여러 페이지에 걸쳐 일관된 스타일을 유지해야 하는 경우에는 비효율적일 수 있습니다.

인라인 스타일 장단점

장점	단점
즉각적인 적용	유지보수가 어려움
특정 요소에 대한 정밀한 제어	스타일 정보의 중복
다른 스타일 규칙보다 우선순위가 높음	코드의 가독성 저하
간단한 스타일 변경에 효과적	CSS의 재사용성과 일관성을 저해
HTML 문서 내에서 바로 볼 수 있음	대규모 사이트 또는 애플리케이션에서 스타일 일관성 유지 어려움

내부 스타일

내부 스타일의 주요 특징

특징	설명
문서 특정 스타일	내부 스타일 시트는 한 HTML 문서 내에서만 사용되며, 해당 문서에 특화된 스타일을 제공합니다.
중앙 집중적 관리	문서 내의 스타일을 한 곳에서 관리할 수 있어 스타일 변경과 유지보수가 용이합니다.
로딩 시간	외부 스타일 시트 파일을 로드하지 않으므로, 약간의 로딩 시간 절약이 가능합니다.
`<style>` 태그 사용	`<style>` 태그를 `<head>` 섹션 안에 넣어 CSS 코드를 작성합니다.
페이지별 스타일 유지	각 HTML 문서에 대해 독립적으로 스타일을 적용할 수 있습니다.

내부 스타일 시트 사용 방법:

<style> 태그 추가: HTML 문서의 <head> 섹션 안에 <style> 태그를 추가합니다.
이 태그 안에 CSS 규칙을 작성합니다.

CSS 규칙 작성: 선택자를 사용하여 스타일을 적용할 요소를 지정하고, 중괄호 {} 안에 스타일 속성과 값을 지정합니다

예제

  
<!DOCTYPE html>
<html>
<head>
    <title>내부 스타일 시트 예제</title>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: navy;
            text-align: center;
        }
        p {
            font-size: 16px;
            color: darkred;
        }
    </style>
</head>
<body>
    <h1>환영합니다!</h1>
    <p>CSS는 웹 페이지를 아름답게 디자인하는 데 사용됩니다.</p>
</body>
</html>

내부 스타일 장점과 단점

장점	단점
문서 특정 스타일	HTML 파일 크기 증가
중앙 집중적 관리	여러 페이지에 대한 스타일 일관성 유지 어려움
`<style>` 태그 내 관리	스타일 시트가 많은 규칙을 포함할 경우 문서의 가독성 저하
로딩 시간 절약	스타일 변경 시 모든 관련 문서를 개별적으로 수정해야 함
페이지별 스타일 적용 용이	대규모 사이트 또는 애플리케이션에서 효율적 관리 어려움

장점 설명:

문서 특정 스타일: 각 HTML 문서에 특화된 스타일을 적용할 수 있어, 페이지별로 다른 스타일을 쉽게 관리할 수 있습니다.
중앙 집중적 관리: 한 HTML 문서 내에서 모든 스타일을 관리할 수 있어, 해당 문서에 대한 변경사항을 빠르게 적용할 수 있습니다.
<style> 태그 내 관리: 스타일 정보를 HTML 문서 내에 포함시켜 외부 리소스 의존도를 줄일 수 있습니다.
로딩 시간 절약: 외부 스타일 시트를 로드하는 대신 내부 스타일을 사용하므로 페이지 로딩 시간을 소폭 절약할 수 있습니다.
페이지별 스타일 적용 용이: 독립적인 페이지 스타일링이 필요할 때 효과적으로 사용할 수 있습니다.

단점 설명:

HTML 파일 크기 증가: 스타일 정보가 HTML 문서 내에 포함되어 파일 크기가 커질 수 있습니다.
여러 페이지에 대한 스타일 일관성 유지 어려움: 내부 스타일 시트는 각 문서마다 다시 작성해야 하므로, 사이트 전체에 걸친 일관된 스타일을 유지하기 어렵습니다.
스타일 시트가 많은 규칙을 포함할 경우 문서의 가독성 저하: 스타일 규칙이 많아질수록 HTML 문서의 가독성이 저하될 수 있습니다.
스타일 변경 시 모든 관련 문서를 개별적으로 수정해야 함: 스타일 변경이 필요할 경우 관련된 모든 HTML 문서를 찾아 개별적으로 수정해야 하는 번거로움이 있습니다.
대규모 사이트 또는 애플리케이션에서 효율적 관리 어려움: 대규모 프로젝트에서는 외부 스타일 시트를 사용하는 것이 더 효율적입니다.

외부 스타일 시트

외부 스타일 시트(External Style Sheet)는 CSS를 별도의 파일에 저장하여 HTML 문서에 링크하는 방법입니다.
이 방식은 웹 페이지의 스타일을 일관되게 관리할 수 있게 해주며, 대규모 웹사이트나 여러 페이지에 걸친 스타일을 효율적으로 적용할 수 있습니다.

외부 스타일의 주요 특징

특징	설명
재사용성	하나의 CSS 파일을 여러 HTML 문서에서 사용하여 스타일의 일관성을 유지할 수 있습니다.
중앙 집중식 관리	모든 스타일 변경을 한 곳에서 관리할 수 있어, 유지보수가 편리합니다.
성능 최적화	CSS 파일을 캐시할 수 있어 사이트의 로딩 속도가 향상될 수 있습니다.
분리된 구조	스타일 코드를 HTML 문서로부터 분리하여 문서의 구조를 더 깔끔하게 유지할 수 있습니다.

외부 스타일 시트 사용 방법:

CSS 파일 생성: .css 확장자를 가진 새 파일을 생성하고, 여기에 모든 CSS 코드를 작성합니다. HTML에 CSS 파일 링크: HTML 문서의 <head> 섹션 내에 <link> 태그를 사용하여 CSS 파일을 링크합니다.

예제

CSS 파일 (styles.css) 작성 예제:

body {
    background-color: lightblue;
}
h1 {
    color: navy;
}
p {
    font-size: 16px;
}

HTML 문서에 CSS 파일 링크하기:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>제목입니다</h1>
    <p>CSS는 웹 페이지를 아름답게 디자인하는 데 사용됩니다.</p>
</body>
</html>

외부 스타일 장점과 단점

장점

장점	설명
일관성 유지	모든 페이지에서 동일한 스타일 파일을 사용함으로써 사이트 전체의 일관성을 유지할 수 있습니다.
유지보수 용이성	스타일 변경이 필요할 때 하나의 파일만 수정하면 되므로, 사이트 전체의 스타일을 쉽게 관리하고 업데이트할 수 있습니다.
페이지 로딩 시간 감소	스타일 정보가 별도의 파일에 저장되기 때문에, CSS 파일이 캐시될 수 있어 페이지 로딩 시간이 단축됩니다.
구조와 표현의 분리	HTML에서 스타일을 분리함으로써, 구조와 디자인을 명확히 구분할 수 있어 웹 개발 및 디자인이 더 체계적으로 이루어집니다.

단점

단점	설명
다수의 HTTP 요청	외부 스타일 시트를 사용하면 각 HTML 문서마다 CSS 파일을 로드하기 위한 추가적인 HTTP 요청이 필요하므로 초기 로딩 시간에 영향을 줄 수 있습니다.
의존성	외부 파일에 의존하므로, 파일이 손상되거나 접근이 불가능할 경우 웹 페이지의 스타일이 제대로 적용되지 않을 수 있습니다.
캐시 이슈	CSS 파일이 캐시되면 좋지만, 캐시된 파일 때문에 최신 스타일 반영에 지연이 발생할 수 있습니다.

이렇게

CSS 작성 방법
인라인 스타일
내부 스타일 시트
외부 스타일 시트

에 대해 알아보았는데요! 다음에는 part2 - 2

기본 문법
선택자
속성
값

에 대해 알아보도록 하겠습니다! 감사합니다.

HTML/CSS

selector

This post is licensed under CC BY 4.0 by the author.