HTML 공부하기
HTML 이란?
Hypertext Markup Language의 줄임말로 우리가 보는 웹페이지가 어떤 구조로 되어있는지 브라우저(Chrome, Edge, Brave, Firefox, Opera)가 알 수 있도록 해주는 마크업 언어이다.
HTML은 elements(요소)로 구성되어있으며 tags(태그)는 여러 추가 기능들을 부여해준다.
1
<p>Hello world</p>
HTML 요소
1
<p>Hello world</p>
- <p> 여는 태그 (Opening tag) : 요소가 시작되는 곳.
- </p> 닫는 태그 (Closing tag) : 여는 태그와 이름이 같고 요소의 끝을 나타낸다.
- Hello world 콘텐츠 (Content) : 요소의 내용
- <p>Hello world</p> 요소(Element) : 요소는 여는 태그, 닫는 태그, 콘텐츠로 이루어져있다.
추가로
1
<p class = "~~">Hello world</p>
- class = “” , 속성 (Attribute) : 속성에는 콘텐츠로 표시되지는 않지만 영향을 줄 수 있는 정보들을 담고있다.
속성의 규칙 (class = “”)
- 요소 이름과 속성 사이에 공백이 있어야 한다.
- 속성 이름 뒤에는 등호(=)가 와야 한다.
- 속성 값의 앞 뒤에 열고 닫는 인용부호(“ 또는 ‘)가 있어야 한다.
요소의 중첩
1
<p>Hello<strong>World</strong></p>
요소 안에 다른 요소를 중첩해서 넣을 수 있다.
빈 요소
1
<img src="https://s.pstatic.net/static/www/mobile/edit/20230516_0/upload_1684217675277OZzsu.gif" alt="My test image" />
</img>(이미지 요소)는 효과를 주기위해 콘텐츠를 감싸지 않고 그저 이미지를 넣어주는 것이기 때문에 닫는 요소 없다.
블럭 레벨 요소, 인라인 요소
블럭 레벨 요소(Block-level elements)
블럭 전체를 차지
인라인 요소(Inline lements)
필요한 칸만 차지
블럭 레벨 요소 설면 전체
블록 레벨 요소(Block-level elements) 는 웹페이지 상에 블록(Block)을 만드는 요소입니다. 블록 레벨 요소는 앞뒤 요소 사이에 새로운 줄(Line)을 만들고 나타납니다. 즉 블록 레벨 요소 이전과 이후 요소사이의 줄을 바꿉니다. 블록 레벨 요소는 일반적으로 페이지의 구조적 요소를 나타낼 때 사용됩니다. 예를 들어 개발자는 블록 레벨 요소를 사용하여 단락(Paragraphs), 목록(lists), 네비게이션 메뉴(Navigation Menus), 꼬리말(Footers) 등을 표현할 수 있습니다. 블록 레벨 요소는 인라인 요소(Inline elements)에 중첩될(Nested inside)수 없습니다. 그러나 블록 레벨 요소는 다른 블록 레벨 요소에 중첩될 수 있습니다.
인라인 요소 설명 전체
인라인 요소(Inline elements)는 항상 블록 레벨 요소내에 포함되어 있습니다. 인라인 요소는 문서의 한 단락같은 큰 범위에는 적용될 수 없고 문장, 단어 같은 작은 부분에 대해서만 적용될 수 있습니다. 인라인 요소는 새로운 줄(Line)을 만들지 않습니다. 즉 인라인 요소를 작성하면 그것을 작성한 단락내에 나타나게 됩니다. 예를 들어, 인라인 요소에는 하이퍼링크를 정의하는 요소인 a , 텍스트(Text)를 강조하는 요소인 em,strong (en-US) 등이 있습니다.
기본 작업
vscode에서 index.html 기본 설정법 ! 를 입력해서 아래와 같은 기본 세팅이 된다.
1
2
3
4
5
6
7
8
9
10
11
<!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>
</body>
</html>
많이 쓰는 태그 종류
html 태그 : 웹페이지의 시작과 끝 ```html <!DOCTYPE html>
1
2
3
4
5
6
7
8
<br/>
---
> head 태그 : 페이지를 열 때 웹 브라우저에 표시되지 않는다. head 태그안에 있는 내용은 페이지에 대한 metadata 즉 정보를 포함하게 하는 태그이다.
```html
<head>
</head>
body 태그 : 문서의 몸통, 주로 화면에 보이는 내용을 담는다.
1
2
<body>
</body>
title 태그
웹페이지의 제목을 나타내는 태그. 브라우저 탭에서 확인 할 수 있고 검색엔진에 나타나는 것이다.
1
<title>호롱고양이의 개발일지</title>
meta 태그
head안에서 웹페이지에는 보이지 않는 정보를 제공하는데 사용되는 태그, img처럼 닫는 태그가 없다.
charset=”UTF-8”은 웹페이지의 인코딩 방식을 utf-8 즉 한국어로 설정했다는 뜻이다.
1
<meta charset="UTF-8">
div 태그
division, 영역이나 구획을 나눌 때 사용한다. 여러 HTML을 하나로 묶어서 css로 한번에 스타일을 변경하거나, 자바스크립트로 특정 작업을 하기 위한 덩어리, 컨테이너로 사용된다.
1
<div></div>
a 태그
anchor(닻), 웹페이지 내에서 외부 사이를 연결하는 태그이다. Hyperlink 혹은 link라고 한다.
1
<a href="naver.com">네이버</a>
script 태그
자바스크립트와 같은 클라이언트 사이드 스크립트를 정의할 때 사용한다.
1
<script src = "helloworld.js"></script>
link 태그
아 현재 문서와 외부 리소스(링크 아님)관계를 연결해 줄 때 사용한다.
”<link>는 스타일 시트를 연결할 때 제일 많이 사용하지만, 사이트 아이콘(“파비콘”과 홈 화면 아이콘, 모바일 앱 아이콘) 연결 등 여러가지로 쓰일 수 있습니다.” 라고 한다.
1
<link href="test.css" rel = "sylescheet"/>
img 태그
이미지를 정의할 때 사용한다. html문서에 이미지가 링크되는 형태이다. 그래서 반드시 src(url 넣는 태그), alt(이미지 실패시 가져오는 텍스트)를 넣어줘야 한다.
1
<img src = "테스트.jpg" alt = "이미지 오류"/>
span 태그
div와 비슷한 녀석, 하지만 div는 블럭요소(block-elements, 한줄을 다 차지)이지만 span은 인라인 요소(inline-elements, 필요한 만큼만 차지)로 쓰임에 따라 사용하면 될 듯 하다.
1
<span></span>
1
2
span 사용시 ->
<span>hello world</span>
div 사용시 ->
1
2
span 사용시 ->
<span>hello world</span>
span 사용시 -> hello world
p태그
paragraph, 문단을 나눌 때 사용한다.
1
<p>hellowold</p>
리스트 태그
list, 리스트에 포함되는 아이템을 정리할 때 사용한다.
- 순서가 있는 리스트(ordered list, ol)
- 순서가 없는 리스트(unordered list, ul)
- 메뉴 리스트(menu)
1
<li></li>
1
<ul></ul>
1
<ol></ol>
style 태그
문서의 스타일 정보를 정의할 때 사용된다. css를 명시하고 있으며 html문서에는 여러개의 style 요소가 있을 수 있다.
1
2
<style>
</style>
br 태그
line-braak, 줄 바꿈
1
<br/>
h* 태그
h1 ~ h6 태그는 제목을 정의하고 커질수록 중요도가 내려가며 크기가 작아진다.
1
2
3
4
5
6
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
input 태그
입력칸(input filed)을 정의할 때 사용.
1
<input type = "text" name = "name">
form 태그
“form태그는 사용자로부터 입력받을 수 있는 html입력 양식(form)를 정의할 때 사용하는데 input과는 다른게 뭐냐면 이게 더 큰 개념이다. form 안에 input, label, button, select 등등이 들어간다. form태그 안에 들어가는 것.” 이라고 한다.
1
<form></form>
nav(navigation link) 태그
다른 페이지 또는 현재 페이지의 다른 부분과 연결시켜준다. (메뉴, 목차, 인덱스 등등)
footer 태그
페이지 맨 아래 추가정보를 다룬다.
header 태그
문서나 특정 섹션(section)의 헤더(header)를 정의할 때 사용한다.
1
2
3
4
5
6
7
8
9
10
<article>
<header>
<h3>날씨 정보</h4>
<h4>2월 19일</h4>
<p>- 기상청 제공 -</p>
</header>
<p>서울 : 맑음</p>
<p>대전 : 흐림</p>
<p>부산 : 비</p>
</article>
iframe 태그
인라인 프레임(inline frame)을 정의할 때 사용된다.
인라인 프레임은 현재 HTML 문서에 다른 문서를 포함시킬 때 사용합니다.
1
2
3
<iframe>
hello
</iframe>
</br>
button 태그
말 그대로 클릭할 수 있는 버튼이다.
1
<button type="button" onclick="alert('Hello World!')">hello world</button>
strong 태그와 b 태그
해당 내용을 강조할 때 사용한다.
b 태그는 텍스트 자체에 강조
strong은 콘텐츠 자체에 강조
1
2
<strong>hello world</strong>
<b>hello world</b>
hello world
hello world
i 태그
기본 텍스트와는 다른 분위기나 음성을 위한 텍스트 영역을 정의할 때 사용합니다.
“다음과 같은 의미 요소(semantic element) 중에서 사용하기에 적당한 요소를 찾지 못했을 때만 <i> 요소를 사용할 수 있습니다.
<cite> : 창작물의 제목
<dfn> : 용어(term)의 정의
<em> : 강조된 텍스트
<mark> : 하이라이트된(highlighted) 텍스트
<strong> : 긴급하거나 중요한 텍스트
이라고 한다.
1
2
3
4
5
<p>
<i>hello world</i>
<br/>
hello earth
</p>
hello world
hello earth