최원종의 개발 블로그

CSS(Cascading Style Sheets) - 7 본문

HTML_CSS/사전학습

CSS(Cascading Style Sheets) - 7

chl6698 2026. 4. 16. 16:13

 

CSS(Cascading Style Sheets) 개념

  • CSS는 웹 페이지의 스타일을 정의하는 언어
  • CSS3는 2005년 정의되었으며, 참고로 CSS2는 1998년, CSS1은 1996년에 제정됨

 

CSS의 역할

  • TML로 구조화된 콘텐츠를 예쁘게 브라우저 상에 렌더링 처리
  • HTML은 구조와 의미(Semantic Web)를 담당.
  • CSS는 이를 통해 화면에 보이는 부분의 스타일을 정의
  • JavaScript는 사용자 인터페이스 등을 조정

 

핵심 개념

  • 웹페이지는 HTML, CSS, JavaScript로 표현됨
  • HTML: 구조
  • CSS: 스타일
  • JavaScript: 동적 기능

Selector (선택자)

 

CSS Selector란

  • HTML 문서의 특정 부분에 대해 렌더링 방법을 정의하기 위해서는 특정 부분을 선택할 수 있어야 함
  • CSS Selector는 이런 특정 부분을 선택하기 위한 문법

 

CSS 기본 구조

예시코드

<!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 {
        color: black;
      }

      #temp-01 {
        color: blue;
        font-size: 26px;
        font-weight: bold;
      }

      .temp-02 {
        color: green;
        font-size: 26px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>CSS 선택자란</h2>
    <p>여기는 첫번째 p 태그야</p>
    <p id="temp-01">여기는 두번째 p 태그야</p>
    <p class="temp-02">여기는 세번째 p 태그야</p>
    <p class="temp-02">여기는 네번째 p 태그야</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>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      h1 {
        color: red;
        font-size: 26px;
        font-weight: bold;
      }
      p {
        color: blue;
      }
      div {
        background-color: gray;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <h1>안녕하세요</h1>
    <p>첫 번째 문단입니다</p>
    <div>박스 영역 입니다</div>
  </body>
</html>

도전문제 코드

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>기본 선택자 연습 2</title>
    <link rel="stylesheet" href="styles1.css" />
    <style>
      /* 문제 1: 모든 요소 글자 색상 회색 */
      * {
        color: gray;
      }

      /* 문제 2: 모든 <span> 태그 배경색 연한 파란색 */
      span {
        background-color: aqua;
      }

      /* 문제 3: note 클래스 스타일링 */
      .note {
        color: red;
        font-size: 20px;
        font-weight: bold;
      }
      /* 문제 4: main-content ID 를 선택해서 원하는 대로 스타일링 */
      #main-content {
        color: green;
        font-size: 17px;
      }
      /* 문제 5: 모든 <header> 태그를 선택해서 원하는 대로 스타일링 */
      header {
        color: blueviolet;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <header>헤더 영역입니다.</header>
    <h2>제목입니다.</h2>
    <span class="note">중요한 메모입니다.</span>
    <p>일반 문단입니다.</p>
    <span class="note">또 다른 메모입니다.</span>
    <section id="main-content">메인 콘텐츠입니다.</section>
  </body>
</html>

 

'HTML_CSS > 사전학습' 카테고리의 다른 글

CSS 선택자(가상 클래스 선택자) - 9  (0) 2026.04.16
CSS 선택자(결합 선택자) - 8  (1) 2026.04.16
시멘틱 태그란 - 6  (1) 2026.04.15
HTML 주요 body 내의 태그 - 5  (0) 2026.04.15
HTML 속성 - 4  (0) 2026.04.15
'HTML_CSS/사전학습' Related Articles more