반응형
HTML 태그
- HTML은 크게 head와 body로 구성되며, head 안에는 페이지의 속성정보를, body안에는 페이지의 내용을 담는다.
- Head 안에 들어가는 대표적인 요소 : meta, script, link, title
- 페이지의 속성을 정의하거나, 필요한 스크립틀을 호출한다.
- Body 안에 들어가는 대표적인 요소 : 아래 html 코드를 확인하자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상단 바 타이틀 | HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>구역을 나누는 태그. 그룹화</div>
<p>문단 변경</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html>위 HTML 코드의 결과값이다.
이를 응용해서 로그인 페이지를 만들어보겠다.
Login.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>
</body>
html의 부모-자식 구조
- html은 감싸고 있는 태그가 바뀌면, 그 안의 내용물 모두 영향을 받는다.
- 빨간색 div를 가운데로 옮기면, 초록 - 파랑 div 모두 함께 이동한다.
- 파란 div의 글씨색을 바꾸면, 버튼2의 글시 색도 바뀐다.
반응형
'웹 기초 > HTML, CSS, Javascript' 카테고리의 다른 글
| JavaScript 자료형, 조건문, 반복문, 함수, 백틱 (0) | 2021.06.12 |
|---|---|
| Bootstrap (0) | 2021.06.12 |
| CSS 기초 (0) | 2021.06.08 |
| 브라우저란? (0) | 2021.06.08 |
댓글