카테고리 없음

1일차 - HTML과 CSS 배우기

idea5595 2025. 2. 17. 20:00

안녕하세요  1일차에는 HTML과 CSS에 대해서 배워봤습니다.

 HTML과 CSS란?

1. HTML (HyperText Markup Language)

HTML은 웹 페이지의 구조를 담당하는 언어입니다. 쉽게 말해서, 우리가 웹에서 보는 글, 이미지, 링크, 버튼 등 모든 내용을 만들어주는 역할을 합니다.

예를 들어, 웹 페이지에 제목을 넣거나, 본문을 만들 때, HTML로 코딩

2. CSS (Cascading Style Sheets)

CSS는 HTML로 만든 구조를 꾸미는 역할을 합니다. 색깔을 바꾸거나, 글자 크기를 키우거나, 여백을 조정하는 등 디자인과 관련된 부분을 담당합니다. CSS 덕분에 우리가 웹 페이지를 보기 좋게 꾸밀 수 있습니다.

공부한 내용!

1. HTML 기본 구조

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>
</head>

<body>
    <h1>로그인 페이지</h1>
</body>
</html>

 

 

  • <!DOCTYPE html>: HTML5 문서임을 선언합니다.
  • <html>, <head>, <body>: HTML 문서의 기본적인 틀을 만듭니다.
  • <h1>, <p>: 제목과 본문을 정의하는 태그입니다.

2. CSS 기본 사용법

CSS는 HTML과 다르게 스타일을 적용하는 역할을 합니다. HTML 코드에 CSS를 추가하려면 <style> 태그 안에 작성할 수 있습니다.

 

예시:

<!DOCTYPE html>
<html>
<head>
  <title>나의 첫 웹 페이지</title>
  <style>
    body {
      background-color: lightblue;
      font-family: Arial, sans-serif;
    }

    h1 {
      color: darkblue;
    }

    p {
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>html css 공부</h1>
  <p>스파르타 1일차 </p>
</body>
</html>

 

 

  • background-color: 페이지 배경색을 바꿔줍니다.
  • font-family: 글꼴을 설정합니다.
  • color: 글자 색상을 바꿔줍니다.
  • font-size: 글자 크기를 설정합니다.

 

3. 부트스트랩 활용하기

부트스트랩은 웹 페이지를 빠르게 만들 수 있게 도와주는 CSS 프레임워크입니다. 이미 디자인이 잘 되어 있어서, 코드만 넣으면 예쁜 레이아웃을 쉽게 만들 수 있습니다

 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

 

이 코드 한 줄만 추가하면, 부트스트랩의 스타일을 사용할 수 있게 됩니다 이제 버튼이나 그리드 레이아웃을 쉽게 만들 수 있습니다

 

 

마무리

웹 개발은 어렵게 느껴지지만, 한 단계씩 차근차근 배우다 보면 어느새 익숙해지고 잘 할것같습니다 오늘 배운 내용은 기본적인 HTML과 CSS지만, 이게 바로 웹 개발의 시작입니다