CSS 1-이론

Elvia SY Choi·2025년 4월 1일

학습-비기너 트랙

8. CSS 1-이론

1. 오늘의 학습 키워드

오늘은 오즈코딩스쿨의 여덟 번째 시간으로 CSS 이론 첫 학습에 들어갔습니다. 오늘 학습한 내용과 실습한 과제까지 작성하겠습니다.

2. 오늘 학습 한 내용

✏️ CSS 이론(1)

2-1) 웹 문서를 디자인하는 스타일시트 언어
CSS(Cascading Style Sheets)는 HTML이나 XML과 같은 마크업 언어로 작성된 문서의 스타일을 지정하는 스타일 시트 언어입니다. HTML이 문서의 구조와 콘텐츠를 정의하면, CSS는 그 문서를 좀 더 시각적으로 보이게 꾸미고 레이아웃을 제어하는 역할을 합니다.

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

- 내부 스타일 시트(Internal Style Sheet)
: HTML 문서의 <head>요소 안에서 <style> 태그를 사용하여 정의합니다.
<head>
    <style>
        p {
            color: red;
        }
    </style>
</head>

- 외부 스타일 시트(External Style Sheet)
: 별도의 CSS 파일을 생성하고, 이를 HTML 문서에서 <link> 태그를 사용하여 불러옵니다.
<head>
  <link rel="stylesheet" href="styles.css">
</head>

외부 스타일 시트는 사용하면 여러 HTML 문서에서 동일한 CSS 파일을 공유할 수 있어 유지 보수와 관리가 용이하다는 장점이 있습니다.

2-2) CSS의 주요 선택자(Selector)

전체 선택자(Universal Selector): 모든 요소를 선택합니다.
* {
    margin: 0;
    padding: 0;
}

태그 선택자(Type Selector): 특정 태그 이름의 모든 요소를 선택합니다. 아래 예시는 p 태그를 선택한 경우 입니다.
p {
    font-size: 16px;
}

클래스 선택자(Class Selector): 특정 클래스 속성을 가진 모든 요소를 선택합니다.
아이디 선택자(ID Selector): 특정 아이디 속성을 가진 요소를 선택합니다.

🔤 HTML

<h2 class="section-title">클래스 선택자 적용</h2>
<h2 id="main-title">아이디 선택자 적용</h2>

🎨 CSS

.section-title {
  color: blue;
  font-size: 20px;
}

#main-title {
  color: red;
  font-size: 28px;
  font-weight: bold;
}

🔍 결과

.section-title은 파란색이고 작고 일반적인 제목
#main-title은 빨간색에 크고 굵은 강조된 제목

클래스 선택자(.class)는 여러 요소에 동일한 스타일을 적용할 때 사용하며, 여러 번 사용이 가능합니다. 반면, 아이디 선태갖(#id)의 경우 고유한 하나의 요소에만 스타일 적용이 가능하여 한 페이지에서 한 번만 사용합니다.

✅ 주요 스타일 속성

CSS는 다양한 스타일 속성을 제공합니다. 몇 가지 주요 속성들은 다음과 같습니다:

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

📂 모든 CSS 속성을 암기해야 할까?
HTML 요소와 마찬가지로 현재 시점에 CSS 속성을 모두 암기할 필요는 없지만, 직접 다양한 CSS 속성을 사용해보면서 충분한 연습이 필요합니다.

w3school

3. 실습 과제

👉 아래의 과제를 수행한 후 과제를 제출 합니다.

아래 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 속성

<link rel="stylesheet" href="styles.css" />
- 이 태그가 무슨 뜻인지 알아보고 css파일을 추가하세요!
: CSS파일을 외부 스타일 형식으로 만든다는 의미입니다.

1. 배경색은 #f4f4f4로 지정하세요.

2. 폰트는 Arial로, Arial이 없는 경우 sans-serif로 지정하세요.

3. 제목(오늘의 할 일)이 하이퍼링크라서 자동으로 적용된 스타일(파란색 글씨, 밑줄)을 제거하세요.

4. 제목의 글자색은 #3498db로 지정하세요.

5. 할 일 목록의 글자 크기는 18px, 아래 마진(margin)을 10px로 지정하세요.

6. ‘실습 도전하기’만 bold처리 하세요.