HTML / CSS

HTML / CSS

2024. 10. 7. 20:08ㆍ부트캠프

HTML (HyperText Markup Language)

1. HTML의 개념

HTML은 웹페이지를 구성하는 기본적인 마크업 언어입니다. 웹 문서의 구조를 정의하며, 텍스트, 이미지, 링크, 폼 등을 포함한 다양한 콘텐츠를 표현합니다. HTML 문서는 브라우저에 의해 해석되어 사용자에게 웹페이지로 보여지게 됩니다.

HTML은 태그(<tag>)로 구성되며, 각 태그는 웹 페이지의 특정 요소를 정의합니다. 예를 들어, 제목, 단락, 이미지, 링크 등을 표시하기 위한 태그들이 존재합니다.

2. HTML 문서 구조

HTML 문서는 기본적으로 아래와 같은 구조로 구성됩니다:

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>웹페이지 제목</title>
  </head>
  <body>
    <h1>웹페이지 제목</h1>
    <p>이것은 HTML 문서의 단락입니다.</p>
  </body>
</html>

<!DOCTYPE html>: 문서 타입을 선언하여 HTML5 표준 문서임을 명시합니다.
<html>: HTML 문서의 루트 요소입니다.
<head>: 메타데이터 및 문서의 기본 설정을 포함합니다.
<title>: 브라우저 탭에 표시될 제목을 정의합니다.
<body>: 실제 웹 페이지에 표시되는 콘텐츠를 포함합니다.

3. 주요 HTML 태그

제목 태그 (<h1> ~ <h6>): 제목을 정의하며, <h1>이 가장 큰 제목이고 <h6>이 가장 작은 제목입니다.
<h1>큰 제목</h1> <h2>중간 제목</h2> <h3>작은 제목</h3>
단락 태그 (<p>): 문단을 정의합니다.
<p>이것은 문단입니다.</p>
이미지 태그 (<img>): 이미지를 삽입할 때 사용합니다.
<img src="image.jpg" alt="설명 텍스트" />
링크 태그 (<a>): 링크를 생성할 때 사용합니다.
<a href="https://example.com">클릭하세요</a>
리스트 태그 (<ul>, <ol>, <li>): 리스트를 만들 때 사용합니다. <ul>은 순서 없는 리스트, <ol>은 순서 있는 리스트입니다.
<ul> <li>아이템 1</li> <li>아이템 2</li> </ul>

CSS (Cascading Style Sheets)

1. CSS의 개념

CSS는 HTML 요소를 스타일링하기 위한 언어입니다. HTML이 문서의 구조를 정의한다면, CSS는 그 구조를 시각적으로 표현하는 역할을 합니다. 즉, 색상, 폰트, 레이아웃 등을 지정해 웹페이지를 아름답고 보기 좋게 만들어줍니다.

2. CSS의 문법

CSS는 선택자(selector)와 선언(declaration)으로 구성됩니다. 선택자는 스타일을 적용할 HTML 요소를 지정하고, 선언은 그 요소에 적용할 스타일을 정의합니다.

선택자 {
  속성: 값;
}

예시:

h1 {
  color: blue;
  font-size: 24px;
}

선택자 (Selector): h1은 스타일을 적용할 HTML 요소입니다.
선언 (Declaration): color: blue;와 font-size: 24px;는 스타일 속성입니다.

3. CSS 적용 방법

인라인 스타일: HTML 태그 내에서 직접 CSS를 적용하는 방법입니다.
<h1 style="color: red;">인라인 스타일</h1>
내부 스타일 시트: HTML 문서의 <head> 태그 안에 CSS를 작성하는 방법입니다.
<style> p { color: green; font-size: 18px; } </style>
외부 스타일 시트: 별도의 .css 파일을 생성하여 HTML 문서에 링크하는 방법입니다.styles.css 파일의 예시:
body { background-color: #f0f0f0; color: #333; }
<link rel="stylesheet" href="styles.css" />

4. CSS 선택자

요소 선택자: HTML 태그를 직접 선택합니다.
p { color: blue; }
클래스 선택자 (.class-name): 클래스 이름을 기준으로 선택합니다.
.button { background-color: green; color: white; }
아이디 선택자 (#id-name): 아이디 속성을 가진 요소를 선택합니다.
#header { background-color: black; color: white; }
자식 선택자 (>): 특정 요소의 직계 자식을 선택합니다.
div > p { font-size: 16px; }
그룹 선택자: 여러 선택자에 동일한 스타일을 적용할 때 사용합니다.
h1, h2, h3 { color: red; }

5. 박스 모델

CSS에서 모든 HTML 요소는 기본적으로 박스 형태로 취급됩니다. 박스 모델은 웹페이지 레이아웃을 디자인할 때 매우 중요한 개념입니다.

박스 모델은 다음과 같은 네 가지 부분으로 구성됩니다:

Content: 실제 내용이 표시되는 영역입니다.
Padding: 콘텐츠와 테두리 사이의 공간입니다.
Border: 요소의 테두리입니다.
Margin: 요소 바깥의 여백입니다.

아래 예시에서는 박스 모델의 속성을 적용하는 방법을 보여줍니다.

div {
  width: 200px;
  padding: 10px;
  border: 2px solid black;
  margin: 20px;
}

HTML과 CSS의 통합

HTML과 CSS는 함께 사용되어 웹페이지를 구성하고 스타일링합니다. 아래는 HTML과 CSS를 함께 사용한 예제입니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML과 CSS 예제</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
      }
      h1 {
        color: navy;
        text-align: center;
      }
      p {
        color: #333;
        line-height: 1.6;
      }
      .container {
        width: 80%;
        margin: 0 auto;
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>HTML과 CSS를 배워보세요!</h1>
      <p>HTML은 웹페이지의 구조를 담당하고, CSS는 그 구조를 시각적으로 꾸며줍니다.</p>
    </div>
  </body>
</html>

'부트캠프' 카테고리의 다른 글

계산기 웹사이트 만들기 - HTML, CSS, JS (0)	2024.10.15
Javascript 자바스크립트 기본 문법 (2)	2024.10.11
Git/Github 사용법 (2)	2024.10.07
온보딩 프로젝트 - 무료 샘플 배포 플랫폼 (2)	2024.09.28
마크다운 문법 (1)	2024.09.23

AI 코딩