HTML 구조
웹페이지의 틀을 만드는 마크업 언어는 HTML이다. HTML은 태그들의 집합으로 구성되어 있으며, 태그란 `<`와 `>`로 묶인 HTML의 기본 구성 요소를 말한다. 예를 들어, `<h1>` 태그는 가장 큰 제목을 나타내고, `</h1>`는 그 태그의 끝을 나타낸다. HTML 요소를 하나의 건물로 비유하면, HTML은 그 건물의 구조를 만드는 역할을 한다.
CSS 스타일
CSS는 HTML 요소들의 스타일을 정의하는 언어이다. CSS는 HTML의 시각적인 부분을 담당하여, 웹페이지가 어떻게 보일지를 결정한다. 예를 들어, CSS를 사용하여 글자의 색상, 크기, 배경 색 등을 설정할 수 있다.
JS 상호작용
JavaScript(JS)는 HTML과 CSS로 구성된 웹페이지에 동적인 상호작용을 추가하는 언어이다. JS를 사용하면 버튼을 클릭했을 때 이벤트를 처리하거나, 사용자의 입력에 따라 페이지 내용을 업데이트할 수 있다. 비교 연산자 '==='는 두 값이 같은지 엄격하게 비교할 때 사용한다.
HTML 요소
HTML의 각 구성 요소는 엘리먼트라고 한다. 시멘틱 요소는 HTML5에서 추가된 개념으로, 의미를 명확하게 전달하는 태그들을 말한다. 예를 들어, `<header>`, `<footer>`, `<article>`, `<section>` 등이 시멘틱 요소이다.
기본 태그
HTML은 다양한 태그들로 이루어져 있다. 다음은 몇 가지 기본 태그들이다:
- `<h1>` ~ `<h6>`: 제목 태그로, 숫자가 작을수록 더 큰 제목을 나타낸다. 예를 들어, `<h1>`은 가장 큰 제목이고, `<h6>`는 가장 작은 제목이다.
- `<p>`: 단락 태그로, 문단을 나타낸다.
- `<div>`: 블록 레벨 요소로, 줄바꿈이 일어나며 한 줄을 차지한다.
- `<span>`: 인라인 요소로, 줄바꿈이 일어나지 않는다.
- `<textarea>`: 줄 넘김이 가능한 텍스트 입력 상자를 나타낸다.
- `<a>`: 하이퍼링크 태그로, `href` 속성을 사용하여 연결할 주소를 지정할 수 있다. `target` 속성은 링크를 클릭했을 때 창을 어떻게 열지 설정하며, `title` 속성은 해당 링크에 마우스 커서를 올릴 때 도움말 설명을 설정한다.
셀프 클로징 태그
셀프 클로징 태그는 닫는 태그가 필요 없는 태그이다. 예를 들어, 이미지 태그는 다음과 같이 사용할 수 있다:
<img src="cat-logo.png" />
목록 태그
목록을 만드는 태그로는 `<ul>`과 `<li>`가 있다:
- `<ul>`: 정렬되지 않은 목록을 나타낸다.
- `<li>`: 목록의 각 항목을 나타낸다.
입력 폼 태그
HTML에는 다양한 입력 폼 태그들이 있다. 예를 들어: - `<input>`: 텍스트 입력, 버튼, 체크박스 등의 다양한 입력 요소를 나타낸다. placeholder 속성은 입력 필드에 사용자가 적절한 값을 입력할 수 있도록 도와주는 짧은 도움말을 나타낸다. 사용자가 입력을 시작하기 전까지 입력 필드 안에 표시된다.
<input type="text" placeholder="이름을 입력하세요" />
- `<textarea>`: 여러 줄의 텍스트를 입력할 수 있는 상자를 나타낸다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>웹페이지 예시</title>
<style>
body { font-family: Arial, sans-serif; }
.container { width: 50%; margin: auto; }
h1 { color: navy; }
p { color: gray; }
</style>
</head>
<body>
<div class="container">
<h1>안녕하세요!</h1>
<p>이것은 예시 웹페이지입니다.</p>
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ul>
<input type="text" placeholder="이름을 입력하세요" />
<textarea placeholder="여기에 의견을 남겨주세요"></textarea>
</div>
</body>
</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>
<input type="text" placeholder="type here">
<div>
<input type="radio"name="choice"value="a"> a
<input type="radio"name="choice"value="b"> b
</div>
<textarea></textarea>
<div>
<input type="checkbox" checked> checked
<input type="checkbox" > unchecked
</div>
</body>
</html>