[HTML/CSS] 3. CSS 기본

최재원

Mar 11, 2025

Contents

1. CSS를 사용하는 이유 2. 레이아웃 3. CSS 태그 <style></style> 태그

1. CSS를 사용하는 이유

HTML만으로 페이지를 만들면 흑백 문서처럼 단순한 레이아웃이 되며, 가독성이 낮고 사용자 경험이 좋지 않다.

색상, 폰트, 배경, 여백 등을 설정할 수 있어 더 보기 좋은 디자인을 만들 수 있음.

CSS는 웹사이트의 외관을 개선하고 사용자 경험을 향상 시키는 필수 요소

2. 레이아웃

레이아웃을 설정하고 각 레이아웃의 요소를 컴포넌트로 만드는게 좋음

컴포넌트로 만들면 여러 곳에서 재사용 가능

컴포넌트로 만들면 새로운 기능 추가 시 코드 수정이 최소화됨

컴포넌트로 구조화를 잘 하면 코드를 이해하기 쉬워짐

3. CSS 태그

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.

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

<style></style> 태그


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      #box {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="box">Hello World</div>
    <div>Hello World</div>
    <span id="box">Hello World</span>
    <span>Hello World</span>
    <div class="red-box">빨간 박스</div>
  </body>
</html>

<head> 태그 안에 들어감

각 요소의 스타일을 설정할 수 있음

Contents

1. CSS를 사용하는 이유 2. 레이아웃 3. CSS 태그 <style></style> 태그

HTML/CSS

[HTML/CSS] 3. CSS 기본

최재원

Mar 11, 2025

Contents

1. CSS를 사용하는 이유 2. 레이아웃 3. CSS 태그 <style></style> 태그

1. CSS를 사용하는 이유

HTML만으로 페이지를 만들면 흑백 문서처럼 단순한 레이아웃이 되며, 가독성이 낮고 사용자 경험이 좋지 않다.

색상, 폰트, 배경, 여백 등을 설정할 수 있어 더 보기 좋은 디자인을 만들 수 있음.

CSS는 웹사이트의 외관을 개선하고 사용자 경험을 향상 시키는 필수 요소

2. 레이아웃

레이아웃을 설정하고 각 레이아웃의 요소를 컴포넌트로 만드는게 좋음

컴포넌트로 만들면 여러 곳에서 재사용 가능

컴포넌트로 만들면 새로운 기능 추가 시 코드 수정이 최소화됨

컴포넌트로 구조화를 잘 하면 코드를 이해하기 쉬워짐

3. CSS 태그

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.

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

<style></style> 태그


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      #box {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="box">Hello World</div>
    <div>Hello World</div>
    <span id="box">Hello World</span>
    <span>Hello World</span>
    <div class="red-box">빨간 박스</div>
  </body>
</html>

<head> 태그 안에 들어감

각 요소의 스타일을 설정할 수 있음

Contents

1. CSS를 사용하는 이유 2. 레이아웃 3. CSS 태그 <style></style> 태그