본문 바로가기
학습 내용

웹 페이지에 생명을 불어넣는 마법! CSS 기초 이론 1

by 초록대디 2025. 6. 13.

HTML이 건물의 뼈대라면, CSS(Cascading Style Sheets) 는 그 건물의 외관 디자인과 인테리어를 담당한다고 할 수 있습니다.

 

오늘은 웹 문서를 아름답고 사용자 친화적으로 디자인하는 핵심 언어인 CSS의 기본 개념과 구조, 그리고 특정 요소를 선택하여 스타일을 적용하는 방법에 대해 학습 하고자 합니다. 

 

CSS: 웹 문서를 디자인하는 스타일시트 언어

HTML이 문서의 구조와 콘텐츠( <h1>, <p>, <ul> 등)를 정의하는 마크업 언어라면, CSS는 그 HTML 문서의 시각적인 스타일을 꾸미고 레이아웃을 제어하기 위한 스타일시트 언어입니다. 마치 제가 VScode를 활용하여 코드를 구조화하고, 워크플로우를 구성하는 것처럼, CSS는 HTML 구조에 시각적 질서를 부여합니다.

 

CSS의 기본 구조: 스타일을 적용하는 다양한 방법

CSS는 주로 HTML 문서의 <head> 요소 안에서 <style> 태그를 사용하여 직접 정의하거나, 외부 CSS 파일을 연결하여 사용합니다.

  • 인라인 스타일 (Inline Style):
    <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 파일 (External CSS File):
    가장 권장되는 방식입니다!   <link> 요소를 사용하여 HTML 문서와 외부에 있는 CSS 파일을 연결합니다. 이렇게 하면 HTML과 CSS 코드가 분리되어 관리하기 용이하고, 여러 HTML 페이지에서 동일한 CSS 파일을 재사용할 수 있어 효율적입니다. 마치 Vercel로 여러 프로젝트를 관리하는 것처럼, 외부 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>
    <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 (CSS 파일) */
/* 전체 문서의 배경색과 글꼴 지정 */
body {
  background-color: #f4f4f4;
  font-family: Arial, sans-serif;
}
/* 제목의 글자색 지정 */
h1 {
    color: #333;
}
/* 문단의 글자 크기 지정 */
p {
    font-size: 16px;
}

선택자(Selectors): 스타일을 적용할 대상을 지정하다

CSS의 핵심은 '어떤 HTML 요소에 어떤 스타일을 적용할 것인가?'를 정확히 지정하는 것입니다. 이때 사용되는 것이 바로 선택자(Selectors)입니다.

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

h1 { /* h1 선택자 */
    color: #333;
}

p { /* p 선택자 */
    font-size: 16px;
}

 

위 코드에서 body, h1, p는 각각 <body> 요소, <h1> 요소, <p> 요소를 선택하는 선택자입니다. 만약 같은 종류의 요소가 여러 개 있는데 각각 다른 스타일을 지정하고 싶을 때는 class 선택자와 id 선택자를 사용합니다.

 

class 선택자: 그룹에 스타일을!

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

  • 사용법: .클래스이름 
HTML

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



CSS

.highlight { /* .highlight 클래스를 가진 모든 요소에 적용 */
    background-color: yellow;
}

.paragraph { /* .paragraph 클래스를 가진 모든 요소에 적용 */
    font-size: 16px;
}

 

 

id 선택자: 오직 하나, 고유한 스타일을!

id 선택자는 문서 내에서 유일한 식별자를 가진 요소를 선택합니다. HTML 문서 전체에서 동일한 id를 가지는 두 개 이상의 요소가 있어서는 안 됩니다. id는 특정 요소를 고유하게 식별해야 할 때 사용됩니다.

  • 사용법: #아이디이름
HTML

<div id="header">
    </div>
    
    
CSS

#header { /* #header 아이디를 가진 단 하나의 요소에 적용 */
    background-color: #333;
    color: #fff;
    font-size: 24px;
}

 

속성과 값: 스타일의 구체적인 표현

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

/* 속성과 값 예제 */
body {
    background-color: #f4f4f4; /* background-color는 속성, #f4f4f4는 값 */
    font-family: Arial, sans-serif; /* font-family는 속성, Arial, sans-serif는 값 */
}

h1 {
    color: #333; /* color는 속성, #333은 값 */
}

p {
    font-size: 16px; /* font-size는 속성, 16px는 값 */
}

 

주요 스타일 속성들

CSS는 정말 다양한 스타일 속성을 제공합니다. 몇 가지 핵심적인 속성들은 다음과 같습니다.

  • color: 텍스트 색상 지정
  • background-color: 배경색 지정
  • font-family: 글꼴 지정
  • font-size: 글자 크기 지정
  • margin, padding: 요소 주위의 바깥 여백(margin) 및 안쪽 여백(padding) 지정
  • border: 테두리 지정
  • width, height: 요소의 너비와 높이 지정
  • display: 요소의 표시 방식 지정 (예: block, inline, flex 등)

모든 CSS 속성을 암기해야 하나? HTML 요소와 마찬가지로, 현재 시점에 모든 CSS 속성을 암기할 필요는 없다고 한다. 다만, 다양한 CSS 속성을 직접 사용해보면서 충분히 연습하는 것이 중요하므로 필요할 때마다 검색하고 적용해 보는 습관을 들여야겠습니다!

 

 CSS 학습에 유용한 참고 사이트

  • W3Schools: CSS Tutorial | W3Schools
    저는 W3Schools를 통해 새로운 CSS 속성을 탐색하고 다양한 예제를 접하며 저의 개발 역량을 강화하고 있습니다. 이 사이트를 즐겨찾기에 추가하고 자주 방문하여 마음껏 CSS를 실험해 보세요!

https://www.w3schools.com/css/default.asp

 

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

실습 과제: 나의 첫 CSS 스타일 입히기

오늘 학습한 CSS 기초 이론을 바탕으로 실제 HTML 문서를 디자인해보는 실습 과제를 수행해 보려합니다. HTML 뼈대에 CSS로 '옷을 입히는' 경험을 해볼거에요. (해당 실습은 오즈코딩스쿨 학습 내용 입니다.)

 

사전 체크: HTML 문서의 <head> 태그 안에 <link rel="stylesheet" href="styles.css" /> 이 태그가 있는지 확인! 이 태그는 HTML 문서와 외부에 있는 styles.css 파일을 연결해 주는 역할을 합니다. 이 태그가 없으면 CSS가 적용되지 않으니 꼭 확인해야합니다!

 

HTML 문서 (beginner.html 또는 해당 파일에 붙여넣기):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML 실습</title>
    <!-- style.css 파일과 연결 -->
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!-- 이곳에 작성하세요. -->
    <!-- ozcodingschool 사이트로 이동하는 링크 -->
    <a href="https://ozcodingschool.com/" id="oz-link">
      <h1 class="daily-title">오늘의 할 일</h1>
    </a>
    <ul>
      <li class="task">HTML 예습하기</li>
      <li class="task">MDN 사이트 접속하기</li>
      <li class="task">w3school 사이트 접속하기</li>
      <li class="task" id="challenge-task">실습 도전하기</li>
    </ul>
  </body>
</html>

 

 

적용할 CSS 속성 (styles.css 파일 생성 후 작성):

  1. 전체 문서의 배경색: #f4f4f4로 지정.
  2. 폰트: Arial로, Arial이 없는 경우 sans-serif로 지정.
  3. 제목 (오늘의 할 일) 스타일 초기화: 하이퍼링크라서 자동으로 적용된 파란색 글씨와 밑줄을 제거.
  4. 제목 글자색: #3498db로 지정.
  5. 할 일 목록 ( li 요소):
    • 글자 크기는 18px로 지정 .
    • 아래쪽 여백(margin)을 10px로 지정 .
  6. '실습 도전하기' 항목만: bold 처리.

 

아래에는 실습 결과물 입니다 :)

 

 

styles.css

'학습 내용' 카테고리의 다른 글

CSS 기초 완전 정복 가이드! 🎨  (2) 2025.06.19
HTML 기초 완전 정복 가이드! 🚀  (2) 2025.06.18
웹 페이지에 생명을 불어넣는 마법! CSS 기초 이론 2  (0) 2025.06.16
웹 문서의 시작: HTML 기초 이론 정복하기  (0) 2025.06.12
나만의 코딩 환경을 만들자! VSCode 확장 도구로 개발 생산성 극대화하기  (0) 2025.06.11

관련글

티스토리툴바