[🎨Front-end] HTML, CSS 기초

Bae minkyung 2025. 2. 20. 23:00

2025. 2. 20. 23:00

🎨 HTML, CSS

Live Server 설치하기
HTML 기본 구성
HTML 기본 요소
CSS 기초

시작 전에!

Extensions에서 Live Server를 설치해 주세요!

밑에 Go Live 누르시면 server로 진행 상황이 실시간으로 확인 가능해요!

자!

한 번 해보러 갑시다 😋

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>
    
</body>
</html>

HTML 기본 요소들

⚙️ 헤더 :

<h1>, <h2>,... : 제목 태그
<p> : 문단

⚙️ 링크 :

<a href="URL">링크 텍스트</a>

⚙️ 이미지 :

웃다가 쓰러질 뻔 했네 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

<img src="이미지 경로" alt="이미지 설명">

이미지 크기 조절 : width=""

⚙️ 리스트 :

순서 없는 리스트: <ul>, <li>
순서 있는 리스트: <ol>, <li>

⚙️ 폼 :

<form>, <input>, <button>
form, input, submit → 서버에 전송할 POST 양식
input 종류
- 텍스트 입력 (text, textarea)
- 비밀번호 입력 (password)
- 라디오 버튼 (radio)
- 체크 박스 (checkbox)
- 파일 선택 (file)
- 선택 입력 (select)
- 버튼 (button)
- 전송 (submit)
- 필드셋 (fieldset)

CSS 기초

CSS 문법

CSS는 HTML 요소의 스타일을 정의하는 데 사용됩니다. 기본 문법은 다음과 같습니다:

선택자 {
    속성: 값;
}

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

CSS 선택자

태그 선택자: body, h1, p 등
클래스 선택자: .class-name
아이디 선택자: #id-name

CSS 적용 위치

1. 인라인 스타일

HTML 요소 내에서 직접 스타일을 정의하는 방법
style 속성을 이용해 요소에 직접 CSS 스타일 적용

<h2 style="color:blueviolet">오늘 먹은 음식 리스트</h2>

2. 내부 스타일 시트

HTML 문서의 <head> 섹션 내에 <style> 태그를 이용해 정의된 스타일

# 기본 문법
<style>
	/* 주석 */
		p {
	    color: <색깔>;
	  }
</style>

# 적용한 내용
<style>
        /* 주석 */
            p {
            color: orange;
          }
    </style>
    
<body>
    <p>햄스터가 너무 귀여운 것 같아</p>
</body>

3. 외부 스타일 시트

별도의 CSS 파일을 생성하여 웹 페이지에 링크하는 방법
여러 HTML 문서에서 동일한 스타일을 적용할 때 사용

<link rel="stylesheet" href="style.css">

스타일 속성 예시

텍스트 스타일: font-size, color, text-align
박스 모델: padding, margin, border, width, height
배경색 및 이미지: background-color, background-image
플렉스 박스: display: flex, justify-content, align-items

'🔥 공부 > 🎨 Front-end' 카테고리의 다른 글

[🎨Front-end] DRF와 JS 연동 방법 (1)	2025.03.24
[🎨Front-end] HTML/CSS/JS, JavaScript 통신 (0)	2025.03.17

AI 공부 일기장