HTML의 기본 마크업은 웹 페이지를 구조화하는 데 사용되는 가장 핵심적인 요소입니다. 여기 깔끔하게 정리해볼게요 👇
🧱 HTML의 기본 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>페이지 제목</title>
</head>
<body>
<h1>제목</h1>
<p>본문 내용입니다.</p>
</body>
</html>
🗂 주요 마크업 요소
| 요소 | 설명 |
|---|---|
<!DOCTYPE html> |
HTML5 문서 선언 |
<html> |
HTML 문서의 시작과 끝을 표시 |
<head> |
문서의 메타데이터 포함 (제목, 문자 인코딩 등) |
<title> |
브라우저 탭에 표시될 제목 |
<meta> |
문서 정보 설정 (예: 문자 인코딩) |
<body> |
실제 화면에 보이는 콘텐츠 영역 |
<h1>~<h6> |
제목 (숫자가 작을수록 중요도 높음) |
<p> |
문단 텍스트 |
<a> |
하이퍼링크 |
<img> |
이미지 삽입 |
<ul>, <ol>, <li> |
리스트 (순서 없는/있는/항목) |
<div> |
블록 영역 구분 |
<span> |
인라인 영역 구분 |
🎯 이 마크업들을 조합하면 다양한 형태의 웹 페이지를 만들 수 있어요. 예를 들면 개인 블로그, 포트폴리오, 메뉴판 등 어떤 콘셉트든 OK 😊
HTML에 CSS를 추가하는 방법은 크게 세 가지
✨ 1. 인라인 스타일 (Inline Style)
HTML 태그 내부에 직접 스타일을 적용하는 방법
<p style="color: blue; font-size: 16px;">이 문장은 파란색이에요!</p>
- 간단한 스타일에 유용하지만 코드가 지저분해질 수 있어요.
- 유지보수가 어려워서 추천하지는 않아요 😅
📦 2. 내부 스타일 시트 (Internal Style Sheet)
<head> 태그 안에 <style> 태그를 이용해 정의
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>이 문장은 초록색이에요!</p>
</body>
</html>
- 하나의 HTML 문서에서만 적용됨
- 학습이나 테스트할 때 간편하게 사용 가능해요
🌐 3. 외부 스타일 시트 (External Style Sheet)
별도의 .css 파일을 만들어 연결하는 방식 (가장 권장되는 방식!)
1). style.css 파일 내용:
p {
color: red;
font-size: 20px;
}
2). HTML 파일에서 연결:
<head>
<link rel="stylesheet" href="style.css">
</head>
- 여러 HTML 파일에 동일한 스타일을 적용할 수 있어요
- 유지보수가 편하고 깔끔한 구조를 만들어줘요 ✅
이해도를 점검할 수 있는 퀴즈
🧠 HTML & CSS 기초 퀴즈
1️⃣ HTML 문서의 시작을 알리는 선언은 무엇인가요?
<start>
<html5>
<!DOCTYPE html>
<begin>
2️⃣ 다음 중 HTML에서 문단을 나타내는 태그는 무엇인가요?
<text>
<paragraph>
<p>
<content>
3️⃣ CSS에서 글자 색을 파란색으로 지정하려면 어떤 속성을 사용해야 하나요?
font-color: blue;
text-color: blue;
color: blue;
background-color: blue;
4️⃣ 다음 중 외부 스타일 시트를 HTML에 적용하는 방법으로 올바른 것은?
<css href="style.css">
<stylesheet link="style.css">
<link rel="stylesheet" href="style.css">
<style src="style.css">
5️⃣
<h1> 태그의 역할은 무엇인가요?- 이미지 삽입
- 하이퍼링크 생성
- 가장 큰 제목 표시
- 목록 항목 표시
✅ HTML & CSS 기초 퀴즈 정답
문항 번호 |
정답 |
설명 |
|---|---|---|
1️⃣ |
c) |
HTML5 문서를 선언하는 태그입니다. |
2️⃣ |
c) |
문단(Paragraph)을 나타내는 태그예요. |
3️⃣ |
c) |
글자 색을 지정할 때 사용하는 CSS 속성입니다. |
4️⃣ |
c) |
외부 스타일 시트를 HTML에 연결하는 방법이에요. |
5️⃣ |
c) 가장 큰 제목 표시 |
|
![[독후감] AGI, 천사인가 악마인가: 인류에게 주어진 마지막 골든 아워에 대한 성찰](https://blogger.googleusercontent.com/img/a/AVvXsEi2kTs1mAJ7TA6CXouzyvcZzkba7__Rf4PwZVQbDFELV-LKRDcEHHqO_SJ3IBA8Tcxu9PbPvNxXG2Cpzlg7iIKYwaMmLlDIJxZZkDQnLSoRpuIBk_ESHNam6b32slcjKE_5z_D6lndM8FgkoTsAmxmRz2EHPWocVwqMAKQe2t74OHLnQepFueBEjPrsHF9d=w72-h72-p-k-no-nu)
0 댓글