CSS 이론 - 1

컬럼월드·2025년 9월 11일

저희 전 게시글에서 HTML에 대해서 살짝 알아보았습니다.

https://velog.io/@my_yeahjinly_log/HTML%EC%9D%98-%EA%B8%B0%EC%B4%88
HTML에 대해서

즉, 웹 브라우저 화면에 표시되는 거의 모든 콘텐츠를 HTML을 통해 구성할 수 있어요.
무엇을 보여줄지를 정의하는 것이 주된 역할이므로, 컴퓨터에게 명령을 내려 특정 동작을 수행하게 하는 프로그래밍 언어와는 다릅니다.

HTML을 통해 웹 페이지의 '뼈대'와 '구조'를 만들 수 있습니다.
그 이후에 문서의 스타일을 꾸미기 위해서 CSS가 등장합니다.

CSS란,

Cascading Style Sheets의 약자로 HTML이나 XML 같은 마크업 언어로 작성된 문서의 스타일을 꾸미기 위한 스타일 시트 언어입니다. HTML이 문서의 구조와 콘텐츠를 정의한다면, CSS는 그 문서를 시각적으로 꾸미고 스타일을 지정하여 레이아웃을 제어합니다.
즉 웹 문서를 디자인하는 스타일시트 언어입니다.

기본 구조

CSS는 주로 HTML 문서의 <head> 요소 안에서 <style> 태그를 사용하여 정의됩니다. 또는 외부 CSS 파일을 연결하여 사용할 수 있습니다.

인라인 스타일:

<style> 요소 내부에 CSS 속성을 직접 입력할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <style>
        /* 전체 문서의 배경색과 글꼴 지정 */
        body {
	          background-color: #f4f4f4;
	          font-family: Arial, sans-serif;
        }
        /* 제목의 글자색 지정 */
        h1 {
	          color: #333;
        }
        /* 문단의 글자 크기 지정 */
        p {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a sample paragraph with some text.</p>
</body>
</html>

외부 CSS 파일:

<link> 요소에 href 속성으로 css파일명을 입력하면 HTML 문서와 외부에 있는 CSS 파일이 연결됩니다.

<link rel="stylesheet" href="styles.css">

스타일 속성이 많지 않다면 인라인 스타일로 작성할 수 있으나 일반적으로는 외부 CSS파일을 사용하는 것을 권장합니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a sample paragraph with some text.</p>
</body>
</html>

/* style.css */
/* 전체 문서의 배경색과 글꼴 지정 */
body {
  background-color: #f4f4f4;
  font-family: Arial, sans-serif;
}
/* 제목의 글자색 지정 */
h1 {
    color: #333;
}

/* 문단의 글자 크기 지정 */
p {
    font-size: 16px;
}

선택자(Selectors)

CSS는 HTML 요소를 선택하기 위해 선택자를 사용합니다. 선택자는 스타일을 적용할 대상을 지정합니다.

/* 선택자 예제 */
body {
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
}

p {
    font-size: 16px;
}

위의 코드에서 body, h1, p는 각각 <body> 요소, <h1> 요소, <p> 요소를 선택하는 선택자입니다. 같은 요소가 두 개 이상 있어서 각각의 스타일을 지정하고 싶을 때는 id, class 선택자를 사용합니다.

class 선택자

사용법: .클래스
class 선택자는 여러 요소를 그룹화하고, 해당 그룹에 스타일을 적용합니다. 하나의 요소가 여러 클래스를 가질 수 있으며, 여러 요소가 동일한 클래스를 가질 수 있습니다.

<p class="highlight paragraph">이 문장은 강조되고 특별한 스타일이 적용됩니다.</p>

.highlight {
    background-color: yellow;
}

.paragraph {
    font-size: 16px;
}

id 선택자

사용법: #아이디
ID 선택자는 문서 내에서 유일한 식별자를 가진 요소를 선택합니다. HTML 문서 전체에서 동일한 ID를 가지는 두 개 이상의 요소가 있으면 안 됩니다. ID는 유일성을 보장하기 위해 사용됩니다.

<div id="header">
    <!-- 내용 -->
</div>

#header {
    background-color: #333;
    color: #fff;
    font-size: 24px;
}

속성과 값

스타일을 지정하기 위해서는 속성과 값의 쌍을 사용합니다.

/* 속성과 값 예제 */
body {
    background-color: #f4f4f4; /* 배경색 지정 */
    font-family: Arial, sans-serif; /* 글꼴 지정 */
}

h1 {
    color: #333; /* 글자색 지정 */
}

p {
    font-size: 16px; /* 글자 크기 지정 */
}