HTML CSS

CSS(Cascading Style Sheets)

jiyoon12 2025. 5. 28. 17:36

1. CSS란?

  • CSS(Cascading Style Sheets)
    • CSS는 웹 페이지의 스타일을 정의하는 언어입니다.
    • CSS3는 2005년 정의되었으며, 참고로 CSS2는 1998년, CSS1은 1996년에 제정되었습니다.
  • CSS의 역할
    • HTML로 구조화된 콘텐츠를 예쁘게 브라우저 상에 렌더링 처리합니다.
      • HTML은 구조와 의미(Semantic Web)를 담당.
      • CSS는 이를 통해 화면에 보이는 부분의 스타일을 정의합니다.
    • JavaScript는 사용자 인터페이스 등을 조정합니다.
  • 핵심 개념
    • HTML: 구조
    • CSS: 스타일
    • JavaScript: 동적 기능
  • 웹페이지는 HTML, CSS, JavaScript로 표현됩니다.

 

 

    • 2. 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>CSS 선택자 연습하기</title>
    
    <!-- 내부 스타일 시트 -->
    <style>
    /* 선택자 -> 태그 선택자 */
    p {
        color: yellow;
    }

    /* 선택자 -> 아이디 선택자: id가 temp-01 요소에 스타일을 적용(# 아이디를 의미한다) */
    
    #temp-01 {
        color: blue;
        font-size: 20px;
        font-weight: bold;
    }

    /* 선택자 -> 클래스 선택자: class="temp-02"인 요소들을 선택한다 */
    .temp-02 {
        color: gold;
        font-size: 22px;
        font-weight: 800;
    }

    </style>
</head>
<body>
    <h2>CSS 선택자란</h2>
    <p id="temp">여기는 첫번째 p태그야</p>
    <p id="temp-01">여기는 두번째 p태그야</p>
    <p class="temp-02">여기는 세번째 p태그야</p>
    <p class="temp-02">여기는 네번째 p태그야</p>


</body>
</html>