BD 27일차
HTML과 CSS 기초 강의 내용을 정리해 보겠습니다.
🚀 HTML & CSS 기초 강의 정리
1. 들어가며
자바스크립트의 기초(변수, 함수, 배열, 반복문)를 익혔다면, 이제는 웹 화면을 구성하는 HTML과 CSS를 배워볼 차례입니다! 😃
- HTML (HyperText Markup Language): 웹사이트의 구조를 정의하는 언어
- CSS (Cascading Style Sheets): HTML 요소의 디자인과 스타일을 지정하는 언어
이번 강의에서는 HTML 문법과 CSS 적용 방법을 살펴보겠습니다.
2. HTML 기본 구조
📌 HTML 파일 생성하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>나의 첫 웹사이트</title>
</head>
<body>
<h1>안녕하세요!</h1>
</body>
</html>📌 HTML 태그 기본 개념
<!DOCTYPE html>→ HTML5 문서를 선언<html>→ HTML 문서의 시작과 끝을 감싸는 태그<head>→ 문서의 메타 정보 포함 (제목, 인코딩, CSS 파일 등)<body>→ 웹사이트에 표시될 실제 내용 포함
3. HTML 필수 태그
📌 제목 태그 (Heading)
<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>💡 h1부터 h6까지 존재하며, 숫자가 클수록 글자가 작아집니다.
📌 문단 및 줄바꿈 태그
<p>이것은 단락(paragraph)입니다.</p>
<br> <!-- 줄바꿈 -->
<hr> <!-- 가로선 -->📌 텍스트 스타일 태그
<strong>굵은 글씨</strong>
<em>기울어진 글씨</em>
<mark>형광펜 효과</mark>
<del>취소선</del>
<u>밑줄</u>📌 목록 태그 (리스트)
<ul>
<li>순서 없는 리스트 항목 1</li>
<li>순서 없는 리스트 항목 2</li>
</ul>
<ol>
<li>순서 있는 리스트 항목 1</li>
<li>순서 있는 리스트 항목 2</li>
</ol>📌 링크 및 이미지
<a href="https://www.google.com">구글로 이동</a>
<img src="image.jpg" alt="이미지 설명" width="200">📌 입력 폼
<form>
<label for="name">이름:</label>
<input type="text" id="name" name="name">
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password">
<input type="submit" value="제출">
</form>📌 테이블
<table border="1">
<tr>
<th>이름</th>
<th>나이</th>
</tr>
<tr>
<td>홍길동</td>
<td>25</td>
</tr>
</table>4. HTML 메타 정보 설정
📌 meta 태그 활용
<meta charset="utf-8"> <!-- 한글 인코딩 설정 -->
<meta name="keywords" content="HTML, CSS, 웹 개발">
<meta name="description" content="이 웹사이트는 HTML과 CSS 기초를 다룹니다.">💡 SEO(검색 엔진 최적화)에 유용한 태그! 검색 결과에 영향을 줍니다.
5. CSS 기초
📌 CSS 적용 방법 3가지
1️⃣ 인라인 스타일
<p style="color: blue;">파란색 글씨</p>2️⃣ 내부 스타일 시트
<style>
p {
color: red;
}
</style>3️⃣ 외부 스타일 시트 (가장 권장되는 방식)
<!-- HTML 파일에서 CSS 파일 연결 -->
<link rel="stylesheet" href="style.css">/* style.css 파일 */
p {
color: green;
}6. CSS 기본 속성
📌 색상 & 배경
body {
background-color: lightgray;
color: black;
}📌 글꼴 & 텍스트 스타일
p {
font-size: 16px;
font-weight: bold;
text-align: center;
}📌 박스 모델 (여백과 테두리)
div {
width: 200px;
height: 100px;
padding: 10px;
margin: 20px;
border: 2px solid black;
}📌 위치 조정
.position-fixed {
position: fixed;
top: 0;
left: 0;
}📌 반응형 웹 (미디어 쿼리)
@media (max-width: 600px) {
body {
background-color: yellow;
}
}7. 정리 및 다음 학습
🔹 HTML은 웹사이트의 뼈대, CSS는 디자인을 담당
🔹 메타 태그를 활용해 SEO 최적화
🔹 박스 모델 개념을 이해하면 디자인 조정이 쉬움
💡 다음 단계에서는 CSS 레이아웃과 Flexbox, Grid를 다뤄보겠습니다!👉 웹사이트 스타일을 더 멋지게 만들고 싶다면 계속해서 학습을 진행해 봅시다! 🚀
