2021년 6월 18일에 작성된 문서 입니다.
HTML 배운 내용을 정리했습니다.
HTML
HTML이란?
- HyperText Markup Language 의 약자.
- 웹 페이지의 툴을 만드는 마크업 언어
- 웹 문서를 구조적으로 표현하기 위한 언어
HTML의 사용 방법?
- HTML은 tag들의 집합이다.
* Tag : 부등호(<>)로 묶인 HTML의 기본 구성 요소 - html 확장자 사용
HTML Tree Structure
-
HTML 문서의 시작
- html
- head
- title : Page title
- body
- h1 : Hello world
- div : Contents here
- span : Here too!
-
위의 구조를 실제 코드로 나타내 보자!
<!DOCTYPE html> <!--이 문서가 html문서임을 명시-->
<html> <!--html : 시작 태그 (문서의 전체 툴을 구성)---->
<head> <!--head : 문서의 메타 데이터를 선언-->
<title>Page title</title>
<!--title : 문서의 제목, 브라우저 탭에 보임-->
</head> <!--</태그이름>은 해당 태그가 끝남을 의미-->
<body> <!--body : 문서의 내용을 담는 곳-->
<h1>Hello World</h1>
<!--h는 heading. 크기 따라 h1부터 h6까지-->
<div>Contents here
<!--div: content division 줄바꿈됨-->
<span>Here too!</span>
<!--span : 줄바꿈이 없는 content 컨테이너-->
</div>
</body>
</html>이 코드를 실제로 실행 시켜보면 아래와 같은 결과가 나온다.
Self Closing Tag
태그 내부에 내용이 없다면, (와 같이 표현되는 경우) 와 같이 표현 가능하다. 아래는 예시다.
<img src = "codestates-logo.png"></img>
<img src = "codestates-logo.png"/>많이 쓰이는 TAG들 모음
| 태그 | 설명 |
|---|---|
<div> | Division |
<span> | Span |
<img> | Image |
<a> | Link |
<ul>&<li> | Unordered List |
<input> | Input (Text,Radio,Checkbox) |
<textarea> | Multi-line Text input |
<button> | Button |
div VS span
div: 한 줄을 꽉 차지한다.span: 컨텐츠의 크기만큼의 공간을 차지한다.
(비교 결과는 아래에!)
img : 이미지 삽입
<img src="https://i.imgur.com/JVAj4t0.jpg">(결과는 아래에!)
이미지는 아쉽지만.. 안나왔다...
a : 링크 삽입
<a href="https://codestates.com" target="_blank">코드스테이츠</a>여기서 target="_blank"는 새 탭에서 열린다는 뜻.
a는 anchor(닻)의 약자. 하이퍼링크를 표시할 때 쓰임.
(결과는 아래에!)
ul,li : 리스트
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3 has nested list
<ul>
<li>Item 3-1</li>
</ul>
</li>
</ul>ul은 순서가 정해져있지 않은 리스트, ol은 순서가 있는 리스트다.
(결과는 아래에!)
input, textarea : 다양한 입력폼
<input type="text" placeholder="type here">
<div>
<input type="radio" name="choice" value="a">
<input type="radio" name="choice" value="b">
</div>
<textarea></textarea>
<div>
<input type="checkbox" checked> checked
<input type="checkbox"> unchecked
</div>(결과는 아래에!)
button : 버튼
<button>Submit</button>(결과는 아래에!)
script : javascript 실행용
<script src = "my-javascript.js"></script>HTML의 요소
<p class = "paragraph">This is an apple</p>
-
구성
시작 태그 (opening tag) :<p class = "paragraph">
속성 (attribute) :class = "paragraph"
콘텐츠 (contents) :This is an apple
종료 태그 (closing tag) :</p> -
html의 속성 (attribute)
attribute name : 속성의 이름class
attribute value : 속성의 값paragraph
Written with StackEdit.
