Study Record

CSS 개념과 기초 본문

웹/HTML + CSS

CSS 개념과 기초

초코초코초코 2025. 2. 9. 21:40
728x90

 

 

스타일(style)이란?

웹 에서의 스타일(style)은 미리 약속한 스타일 속성을 입력해 웹을 디자인하는 것을 말한다. 한 문서에서 반복해 쓰이는 스타일들을 모아 놓은 것을 '스타일 시트'라고 부른다.

 

HTML 로 스타일 작업을 하지 않고 따로 스타일을 사용하는 이유로는 다음과 같다.

  • 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.
  • 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다.

 

 

 스타일 형식

선택자 { 속성: 값; }

/* 예시 */
h2 { font-soze: 20px; }
p {
    font-size: 20px;
    color: orange;
}

 

 

 스타일과 스타일 시트

웹 문서 안에는 여러 개의 스타일 규칙이 사용되는 경우가 많은데 이런 스타일 규칙들을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한 군데 묶어 놓은 것을 '스타일 시트'라고 한다. 웹 문서 안에서 사용할 스타일 규칙들을 정의한 '내부 스타일 시트' 와 별도의 스타일 파일을 만들어 연결해 사용하는 '외부 스타일 시트'로 나뉜다.

 

 

내부 스타일 시트

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            color: indigo;
            list-style-type: square;
        }
    </style>
</head>

<body>
    <h1>나라 이름</h1>
    <ul>
        <li>대한민국</li>
        <li>중국</li>
        <li>미국</li>
        <li>일본</li>
    </ul>
</body>

</html>

 

 

외부 스타일 시트

웹 문서마다 내부 스타일 시트를 만든다면 서버 공간은 물론 문서를 다운로드하는 시간까지 낭비된다. 따라서 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용하는 것이 일반적이다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    /* 외부 스타일 파일 연결 코드 */
    <link rel="stylesheet" href="test.css" type="text/css">
</head>

<body>
    <h1>나라 이름</h1>
    <ul>
        <li>대한민국</li>
        <li>중국</li>
        <li>미국</li>
        <li>일본</li>
    </ul>
</body>

</html>

 

 

인라인 스타일

간단한 스타일 정보일 경우 스타일 시트를 사용하지 않고 스타일을 적용할 대사엥 직접 표시할 수 있다. 이런 방법을 인라인 스타일이라고 한다. 해당 태그에 style 속성을 사용해 style="속성:속성 값;" 형태로 스타일을 바꿀 수 있다.

<p style="color: darkolivegreen;">아시아 나라 이름 종류에는 대한민국, 중국, 일본 등이 있습니다.</p>

 

 

주요 선택자

스타일 속성을 적용하는 요소를 선택자(selector)라고 부른다. 이 선택자는 태그 하나가 될 수도 있지만 여러 개의 요소를 묶어 별도의 선택자로 지정할 수 있다.

선택자 { 속성: 값; }

/* 예시 */
h2 { font-soze: 20px; }

 

 

 전체 선택자(universal selector)

전체 선택자는 말 그대로 스타일 모든 요소에 적용할 때 사용한다. 전체 선택자로는 *(별표)를 사용한다. 또한 문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 때 사용한다.

 

예시) 브라우저의 기본 마진 값과 패딩 값

* {
    margin: 0;
    padding: 0;
}

 

 

 태그 선택자(tag selector)

특정 태그가 쓰인 모든 요소에 스타일을 적용한다. 예를 들어 p 선택자를 정의하면 웹 문서의 모든 p 요소들 즉 모든 문단에 스타일이 적용된다.

p {
    font-size: 20px;
    color: orange;
}

 

 

+ 태그와 요소의 차이점

태그는 말 그대로 태그 자체를 가리키는 반면, 요소는 태그가 적용된 것을 가리킨다. 다음 소스에서 <p> 태그와 </p> 태그 자체가 "태그" 이며 "나라 이름" 부분이 p 요소이다. 따라서 p태그에 적용되는 스타일이라는 표현은 태그 자체를 가리키는 말이기 때문에 잘못되었고 p요소에 적용되는 스타일이라는 표현이 맞는 것이다. 

<p> 나라 이름 </p>

 

 

 클래스 선택자(class selector)

같은 태그라도 다른 스타일을 적용하고 싶을 때, 즉 특정 부분에만 스타일을 적용할 때 사용하는 것이 클래스 선택자이다. 태그 대신 클래스 이름을 따로 지정하는데 태그 이름과 겹치면 안된다. 또한 클래스 이름 앞에 반드시 마침표(.)를 붙여야 한다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p_content { font-size: 16px; color: blueviolet; }
    </style>
</head>

<body>
    <h1>나라 이름</h1>
    <p class="p_content">아시아 나라 이름 종류에는 대한민국, 중국, 일본 등이 있습니다.</p>
</body>

</html>

 

만약 다른 태그에 클래스 선택자를 적용하고 싶지 않다면 클래스 선택자 앞에 태그를 써서 해당 태그에만 클래스 스타일을 적용할 수 있다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1.content { color: blueviolet; }
    </style>
</head>

<body>
    <h1 class="content">나라 이름</h1>
    <p class="content">아시아 나라 이름 종류에는 대한민국, 중국, 일본 등이 있습니다.</p>
</body>

</html>

 

예시)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content { color: blueviolet; }
    </style>
</head>

<body>
    <h1>나라 이름</h1>
    <p>아시아 나라 이름 종류에는 <span class="content">대한민국, 중국, 일본</span> 등이 있습니다.</p>
</body>

</html>

 

 

 id 선택자(id selector)

클래스 선택자와 마찬가지로 웹 문서 안의 특정 부분에 스타일을 지정할 때 사용한다. 마침표(.) 대신 (#)기호를 사용한다. 클래스 선택자는 문서 안에서 여러번 반복해 적용할 수 있는 반면 id 선택자는 문서 안에서 한 번만 적용할 수 있다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content { color: blueviolet; }
        
        #container {
            background-color: bisque;
            width: 400px;
            height: 300px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <h1>나라 이름</h1>
    <p class="content">아시아 나라 이름 종류에는 대한민국, 중국, 일본 등이 있습니다.</p>
    <div id="container"></div>
</body>

</html>

 

 

 그룹 선택자

여러 선택자에 같은 스타일이 사용되는 경우 쉼표(,)로 구분해 여러 선택자를 나열한 후 스타일은 한 번만 정의할 수 있다.

h1, h2 { text-align: center; }

 

 

캐스캐이딩 스타일 시트(CSS)

CSS 는 '스타일 시트' 앞에 캐스캐이딩이라는 용어가 붙은 말이다. CSS 의 C 는 캐스캐이딩(Cascading)의 약자로 위에서 아래로 흐르는 스타일 시트라는 뜻이다. 캐스캐이딩은 선택자에 적용된 많은 스타일 중에 어떤 스타일을 나타낼지 결정함을 뜻한다.

 

예를 들어, 텍스트 단락의 글자의 색은 문서 전체의 글자 색을 정해 놓은 스타일 규칙을 따를 수도 있고 브라우저에서 기본으로 정해 놓은 글자 색을 따를 수도 있고 웹 제작자가 정해 높은 p 선택자의 글자 색을 따를 수도 있다. 이렇게 스타일 간의 충돌을 막기 위한 방법으로 위에서 아래로 흐르며 적용되는 방법이다. 이 방법은 스타일 우선순위와 스타일 상속 원칙이 있다.

 

 

 스타일 우선순위

스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일이 적용된다. 우선순위란 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙을 말한다.

 

 

중요도(importanve)

 

아래의 순서는 가장 중요한 것부터 차례로 나열한 것이다.

 

 

사용자 스타일 시트의 중요 스타일 -> 제작자 스타일 시트의 중요 스타일 -> 제작자 스타일 시트의 일반 스타일

-> 사용자 스타일 시트의 중요 스타일 -> 브라우저 스타일 시트의 스타일 

 

 

 

▶ 사용자 스타일 시트

사용자 스타일 시트는 저시력자나 색약자 등과 같이 특별한 조건이 필요한 사용자에게 맞게 구성해 놓은 스타일 시트를 말한다. 예를 들어, 윈도우의 고대비 설정 기능을 사용했을 경우다. 이 스타일 시트는 가장 중요하며 시스템을 통해 만들어진 것이기 때문에 제작자가 제어할 수 없다.

 

 

▶ 제작자 스타일 시트

사이트를 제작하면서 만든 스타일 시트를 뜻한다. 

 

 

▶ 브라우저 스타일 시트

브라우저들마다 기본적으로 지정하고 있는 스타일 시트이다.

 

 

▶ 중요 스타일(!importance)

스타일 시트에서 "!importance" 가 붙은 스타일이다. 중요 스타일은 일반 스타일보다 우선시된다.

 

 

명시도(specificity)

 

스타일이 충돌할 때 스타일 적용 범위에 따라 우선순위를 정할 수 있다. 스타일 적용 범위가 좁을수록 즉, 정확히 필요한 요소에만 적용할 스타일일수록 우선순위가 높아진다.

 

인라인 스타일 > id 스타일 > 클래스 스타일 > 태그 스타일

 

*인라인 스타일 : HTML 태그 안에 style 속성을 사용해 해당 태그에 스타일을 적용한 경우

 

 

소스에서의 순서(Source Order)

 

스타일 시트에서 중요도와 명시도가 같으면 소스에서 나중에 나온 스타일이 먼저 나온 스타일을 덮어쓴다. 가장 나중에 적힌 스타일이 적용된다.

 

 

 스타일 상속

태그들은 서로 포함관계가 있는데 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라 부른다. 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다. 이것을 스타일 상속이라고 부른다. 단, 스타일의 모든 속성이 부모 요소에서 자식 요소로 상속되는 것은 아니다. (ex. 배경색, 배경 이미지 상속 안됨)

 

다음 예시에서는 body 태그는 <h1>, <ul> 태그의 부모 요소이기 때문에 결과를 확인해보면 글자색이 모두 brown 으로 나온다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            color: brown;
        }
    </style>
</head>

<body>
    <h1>나라 이름</h1>
    <p>아시아 나라 이름 종류에는 대한민국, 중국, 일본 등이 있습니다.</p>
</body>

</html>

 

 

CSS3와 CSS 모듈

CSS3란 HTML5 가 HTML의 웹 표준이 되었듯 CSS3의 3도 버전 표기를 넘어 웹 표준 기술의 핵심을 지칭하는 용어가 되었다. HTML5와 달리 CSS3는 계속 변하고 있다. CSS3는 작은 CSS 모듈들로 이루어져 있다.

 

+ CSS 규약들을 볼 수 있는 페이지

https://www.w3.org/Style/CSS/ 

 

Cascading Style Sheets

Soft­ware Nearly all browsers nowadays support CSS and many other applications do, too. To write CSS, you don't need more than a text editor, but there are many tools available that make it even easier. Of course, all software has bugs, even after several

www.w3.org

 

 

 CSS3와 브라우저 접두사(prefix)

CSS3는 CSS 모듈들이 많고 표준 규약이 오나성되지 않은 부분도 많지만 모던 브라우저에서 지원하기 위해 계속 개발되고 있다. 아직 표준 규약이 아닌 속성들은 브라우저에 따라 다른 방식으로 지원되기 때문에 속성 앞에 접두사를 붙여 브라우저별로 구분해야 한다. 또 한 표준 규약이 만들어졌어도 이전의 모던 브라우저 사용자를 고려해 계속 브라우저 접두사를 붙여 사용하기도 한다.

 

접두사 설명
-webkit- 웹키트 방식 브라우저용(크롬, 사파리 등)
-moz- 게코 방식 브라우저용(모질라, 파이어폭스 등)
-o- 오페라 브라우저
-ms- 마이크로소프트 인터넷 익스플로러

 

 

예시)

/* 표준이 정해진 경우 */
column-count: 3;

/* 접두사 붙인 모양 */
-webkit-column-count: 3;
-mpz-column-count: 3;
-o-column-count: 3;
-ms-column-count: 3;
column-count: 3;

 

 

728x90

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

HTML 기타 폼 요소들(button, progress, meter)  (0) 2025.02.08
HTML 여러 데이터 나열해 보여 주기  (0) 2025.02.08
HTML input 태그  (0) 2025.02.05
HTML 폼 관련 태그들  (0) 2025.02.04
HTML 목록과 테이블 태그  (1) 2025.02.04
'웹/HTML + CSS' Related Articles more