HTML : Hyper Text Markup Language
HYPER: 단순한 텍스트를 넘어서 웹페이지의 특정 부분과 연결할 수 있는 기능을 자니 텍스트, 즉 링크를 의미
MARKUP LANGUAGE: 프로그래밍 언어의 한 종류로 구조적, 계층적으로 표현 가능하다는 특징이 있음
- 웹 페이지를 만드는 언어
- 태그들의 집합
* 웹 크롤러 : HTML로 만들어진 웹 페이지 속에는 수 많은 정보가 들어 있습니다. 이런 정보를 수집하는 기계를 웹 크롤러(Web Crawler)라 하고, 이 웹 크롤러가 웹을 탐색하며 정보를 수집하여 저장하는 일을 크롤링(Crawling)이라고 합니다
웹 크롤러는 html 구조로 웹 페이지의 콘텐츠 내용을 확인한다
즉, 정보를 수집하기 위해 웹 페이지 속의 HTML을 확인하고 분석합니다
예를 들어 <section> 태그 안에 <h1> 태그가 작성되어 있으면 제목이 있는 콘텐츠임을 웹 크롤러가 인지하고 콘텐츠를 분류하여 저장합니다
1) 태그(TAG)
- html 내에서 가장 중요하고 기본이 되는 규칙이다
- 꼬리표, 이름표 또는 무언가를 인식하기 위한 이름표
<태그> 내용입니다 </태그>▶ 태그의 시작
<태그2><태그1>내용입니다.</태그1></태그2>▶태그 2라는 큰 태그에 태그 1이 들어가 있는 것
그 태그 1에는 "내용입니다."라는 글자가 들어가 있는 것
<p>▶Paragraph, 문단의 약자, 한나의 문단을 만들 때 사용, 줄 바꾸기 기능을 하는 가장 일반적인 태그,
글씨를 표현하는 가장 기본적인 태그
* < p> : 글의 단락
개행
<p>를 사용해서 단락으로 구분하면 자연스럽게 개행이 된다
html 문법 중 공백 시간에 배운대로 html은 한 칸 이상의 공백 및 개행을 무시하기 때문에 실제 코드 창에 개행을 하더라도 화면에 나타나지는 않는다
따라서 개행을 위해 쓰이는 태그가 바로 <br> 이다
linebreak를 줄여서 br이라고 한다
<br>은 닫기 태그와 내용이 존재하지 않는 빈 태그이다
개행하고자 하는 곳에서 <br>을 선언하면 개행이 된다
이 처럼 <p>를 이용하면 태그 자체에서 자연스럽게 개행이 되지만 <p> 내부에서 강제로 개행을 하기 위해서는 <br>을 이용해야 한다
<h1>▶ heading, h1는 가장 큰 제목을 쓸 때 사용, 글씨를 가장 크게 표현해주는 태그(제목 태그)
→ 제목의 레벨에 따라서 <h1> ~ <h6>까지 있다
보통 <h1>은 해당 페이지를 대표하는 큰 제목으로 주로 사용되며 숫자가 올라갈수록 조금 더 낮은 수준의 소제목을 나타내게 된다
* 숫자가 낮을수록 더 큰 단위의 제목으로 사용이 된다
하지만 현재 웹 페이지의 내용은 제목과 본문 식의 문서 형태보다는 주로 이미지나 그림처럼 시각적인 형태로 표현되고 있다
제목 태그를 <h6>까지 쓰는 경우는 거의 없다
<h1> hello, html </h1>
// html 코드→ 이 내용이 포함한 이 전부를 요소(element)라고 부른다
태그와 요소는 의미가 다르지만 많은 사람이 태그와 요소를 같은 의미로 혼동하지 않도록 주의해야한다
→ 태그는 어떤 표시, 인식을 하기 위한 꼬리표 같은 것이고 우리가 다양한 태그들을 이용해서 코드를 작성하면 브라우저가 그것을 인식해서 내용을 표현하게 된다
→ 먼저 태그는 키보드의 꺾쇠(<,>) 기호를 이용하여 선언한다
→ 이렇게 태그들은 두 개가 한 쌍으로 선언된다
hello,html → 내용, 실제의 화면 브라우저에 나타나는 부분이다
- 속성
속성 (Attribute) : 태그에 추가로 정보를 제공하거나 태그의 동작이나 표현을 제어할 수 있는 설정값을 의미
* 속성을 사용하는 방법
=> 속성은 이름과 값으로 이루어져 있다
시작 태그에서 태그 이름 뒤에 공백으로 구분 후 속성 이름= “속성값”으로 표현한다
속성값은 홑 따옴표(‘)와 쌍 따옴표(“”)로 감싸 표현한다
<h1 id = “title”> Hello, HTML </h1>-> <h1>에 id 속성을 추가해 title 값을 선언한 코드
* 여러 속성을 사용하는 방법
-> 의미가 용도에 따라 여러 속성을 선언할 수 있다
여러 속성을 선언할 때는 공백으로 구분해서 사용한다
<h1 id = “title” class = “main”> Hello.HTML </h1>-> 위의 <h1>에 id와 class 2개의 속성을 선언한 코드
속성의 선언 순서는 태그에 영향을 미치지 않으며 class를 id보다 먼저 선언해도 결과는 같다
* id와 class 속성은 글로벌 속성
* 속성의 종류
속성은 종류에 따라 모든 태그에 사용할 수 있는 글로벌 속성과 특정 태그에서만 사용할 수 있는 속성으로 구분된다
또한 선택적으로 쓸 수 있는 속성과 특정 태그에서 필요한 필수 속성으로 구분된다
https://developer.mozilla.org/ko/docs/Web/HTML/Attributes
HTML 특성 참고서 - HTML: Hypertext Markup Language | MDN
HTML의 요소들은 특성을 가지고 있습니다. 특성은 사용자가 원하는 기준에 맞도록 요소를 설정하거나 다양한 방식으로 요소의 동작을 조절하기 위한 값을 말합니다.
developer.mozilla.org
태그 중첩?
- 태그 안에 또 다른 태그를 사용하는 것
태그 -> 중첩을 통해 부모 태그와 자식 태그의 관게가 만드렁진다
: 이 때 태그의 열리고 닫히는 시점이 중요하다
* 주의할 점은 안에서 선언된 태그는 반드시 부모 태그를 벗어나지 말아야 한다
올바른 예
<h1> Hello, <i> HTML </i></h1>
잘못된 예
<h1> Hello, <i> HTML </h1></i>
-> 엇갈리게 중첩이 되어서는 안된다, 기본적으로 태그 안에 중첩이 얼마나 되는 지 또 어떤 태그가 중첩이 되어도 상관이 없다. 다만 경우에 따라서는 정해진 태그들만 중첩이 가능한 경우도 있다
빈 태그 (EMPTY TAG)
<br>
<img src=“”>
태그 -> 시작 태그와 종료 태그 2개가 1쌍으로 이루어져 있으며 그 사이에 내용이 들어가 있다
하지만 태그 중에는 그렇지 않은 태그가 존재하기도 한다
이러한 태그를 내용이 없는 빈 태그라고 한다
<br>
<img src = “ “>
<input type = “ “>
* <br> 과 <img src = “ “> -> 닫는 태그가 존재하지 않다는 것
-> 위의 빈 태그의 예시이다 빈 태그는 내용이 없어서 종료 태그가 필요하지 않다
* 빈 태그의 특징
빈태그 -> 내용만 비어있을 뿐 속성은 통해서 화면에 나타나거나 화면에 표시되지 않더라도 다른 용도로 사용되는 태그이다
빈 태그의 대표적인 경우는 브라우저가 직접 화면에 내용이 그려줘야 하는 경우이다
이런 태그는 브라우저가 내용을 대처한다고 하며 replacement 태그, 대체되는 태그라고 한다
빈 태그에 대체되는 태그만 있는 것이 아니며 실제 화면에 출력될 내용이 없어 다른 용도로 쓰이는 태그도 존재한다
위 예시 코드의 <br>이 바로 이 경우이다
* 빈태그의 특징 -> 종료 태그가 없는 태그이다
공백
* HTML에서의 공백 - 기본적으로 HTML은 두 칸 이상의 공백을 모두 무시한다
-> html은 두 칸 이상의 공백과 개행을 모두 무시하기 때문에 위 세가지 모두 같은 텍스트가 화면에 나타나게 된다
* 각 요소는 저마다 공백과 개행을 다르게 해서 선언을 했다
주석(comment tags)
<! - - 내용 - - >
html에서의 주석
주석-> 화면에 노출하지 않고 메모의 목적으로만 사용하는 것을 의미한다
html 파일 내에 주석으로 표시를 해주면 브라우저는 해당 부분을 인식하여 해석하지 않는다
* 실제 서비스를 이용하는 사용자들을 위한 것은 아니고 그것을 개발하는 개발자들을 위한 기능이다
◈ 제일 먼저 쓰이는 태그 : HTML 태그
<HTML> </HTML>▶이 문서는 HTML 문서다 라는 것을 말함
HTML 태그와 쌍으로 묶이는 태그
<!DOCTYPE html>▶이 코드는 맨 위에 한 줄 추가해야 함
* 이 코드가 없어도 크롬과 같은 최신 브라우저에서는 작동하는데 하나도 문제가 없다
하지만, 그래도 작성해야함
- 이 문서가 어떤 버전으로 작성되엇는지 브라우저에게 알려주는 선언문이며 반드시 문서 내 최상단에 선언되어야 한다
정리하자면
<!DOCYPTE html>
<html>
</html>▶이 세줄은 html 문서라면 어떤 문서를 막론하고 꼭 써줘야 한다 (암기)
<head>- 이 문서에 대한 정보를 담는 부분, 누가 문서를 작성했는지, 이 문서를 정확히 표현하려면 어떤 걸 참고해서 실행해야 하는지 문서의 제목은 무엇인지 어떤 키워드를 검색해야 나오는 문서인지 등을 잔득 써 놓은 공간
- 문서의 기본 설정을 선언하는 태그나 외부 파일을 연결하는 역할을 하는 태그들이 위치해야 하는 태그
<body>html, css 문서에는 표현되는 모든 내용이 이 <body> 태그 안으로 들어간다
* 정리
html 문서에는 크게 두가지 부분으로 나누는데 부가 정보를 담긴 <head> 태그와 contents 내용이 담긴 <body> 태그가 그 두 부분이다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
// 기본적인 html 문서의 뼈대▶눈에 꼭 익혀둬야 함, 가장 기본적인 코드
그 다음에 이 문서에는 영어가 아닌 한국말이 있어야 한다는 것을 표시해야함
html, css 문서도 독같다 → 영어에 기반하여 문서가 동작하기 때문에 한글로 슬려면 추가 작업을 해야 한다
그 코드가
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body> </body>
</html>이것이다
charset: 문자셋, 해당 문서의 문자 인코딩 방식을 명시함
<meta> 태그 : 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용한다
<meta> 요소는 언제나 <head> 요소 내부에 위치해야 한다
<meta> 태그 → <meta> 태그의 charset 속성은 해당 HTML 문서의 인코딩 방식을 명시
* <meta> 태그는 내용이 없는 빈 태그이다
<!DOCTYPE html>
<html lang = “ko”> // lang 속성은 언어 코드가 들어가게 된다. 이 부분은 검색 엔진이나 브라우저들이 참고할 수있도록 이 해당문서가 어느 언어로 작성되었는지 나타내는 속성이다
<head>
<meta charset=“UTF-8”>
<title> HTML </title>
</head>
<body>
<h1> hello, HTML </h1>
</body>
</html>그리고 그 밑에는 이 웹문서의 제목을 나타내는 <title> 이라는 태그가 있다
이 <title> 태그에는 이 문서의 제목이 들어간다
인코딩 : 내가 작성한 구문을 컴퓨터가 해석할 수 있게 변환해주는 것 (데이터(문자, 기호, 숫자)를 부호화하는 것)
UTF-8 : 이 해당 문서가 어느 언어로 작성되엇는 지 나타내는 속성, 전세계 문자와 기호를 원할하게 인코딩하는 방식, utf로 인코딩하지 않으면 글자가 깨져보이는 현상이 발견한다
* 텍스트 표현 태그
웹 표준화가 대두되면서 웹 문서의 구조와 표현도 분리하였다
그 과정에서 많은 표현용 태그들이 사라졌고 지금은 표현용 태그가 얼마 남지 않았다
그 중 <b>, <i>, <u>, <s>에 대해 살펴보도록 하겠다
- <b> : bold 태그는 글자를 굵게 표현하는 태그
- <i> : italic 태그는 글자를 기울여서 표현하는 태그
- <u> : underline 태그는 글자의 밑줄을 표현하는 태그
- <s> : strike 태그는 글자의 중간선을 표현하는 태그
(예전에 존재했던 strike 태그와는 다른 태그로 strike 태그는 폐기되어 더는 사용할 수 없다)
=> 위 태그들은 의미가 없는 표현용 태그이기 때문에 사용하실 때는 각별히 주의해야 한다
* <i> 태그가 단순 표현용 태그에서 의미를 가지는 태그로 변경되었다
시맨틱 태그
- 헤더 영역을 나타내는 <header> 태그
: 헤더 영역을 의미, 사이트 전체의 헤더도 있지만 특정 영역의 헤더도 있다
사이트에서 헤더는 주로 맨 위쪽이나 왼쪽에 있으며 검색 창이나 사이트 메뉴를 삽입한다
* 웹 문서의 정보를 담는 <head> 태그와 헷갈리지 않도록 주의
- 네비게이션 영역을 나타내는 <nav> 태그
: 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만든다
흔히 네비게이션을 만들 때 사용한다
웹 문서의 위치에 영향을 받지 않으므로 헤더나 푸터, 사이드 바 안에 포함할 수도 있고 독립해서 사용할 수도 있다
<header> 태그 안에 <nav> 태그가 포함되었음
- 핵심 콘텐츠를 담는 <main> 태그
: 웹 문서에서 핵심이 되는 내용을 넣는다
여기에는 메뉴, 사이드 바, 로고처럼 페이지마다 똑같이 들어간 정보를 넣을 수 없고, 웹 문서마다 다르게 보여 주는 내용을 구성한다
<main> 태그는 웹 문서에서 한 번만 사용할 수 있다
- 독립적인 콘텐츠를 담는 <article> 태그
: 웹에서 실제로 보여주고 싶은 내용을 넣는다
ex) 블로그의 포스트, 뉴스 사이트의 기사처럼 독립된 웹 콘텐츠 항목
문서 안에서 <article> 태그를 여러 개 사용할 수 있음, 이 안에 <section> 태그를 넣을 수도 있음
- 콘텐츠 영역을 나타내는 <section> 태그
: 웹 문서에서 콘텐츠 영역을 나타낸다
<section> 태그는 <article> 태그와 비슷해 보이지만 몇 개의 콘텐츠를 묶는 용도로 사용하고 <article> 태그는 블로그의 포스트처럼 독립된 콘텐츠로 사용한다
* 단순히 스타일을 적용하려고 콘텐츠를 묶으려면 <section> 태그 대신 <div> 태그를 사용한다
- 사이드 바 영역을 나타내는 <aside> 태그
: 본문 내용 외에는 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만든다
- 푸터 영역을 나타내는 <footer> 태그
: 웹 문서에서 맨 아래쪽에 있는 푸터 영역을 만든다
푸터에는 사이트 제작 정보나 저작권 정보, 연락처를 넣는다
* 검색 엔진 최적화 : 웹 페이지 검색 엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업을 말한다
'Full-Stack > HTML' 카테고리의 다른 글
| 검색 엔진 최적화와 HTML (0) | 2024.07.29 |
|---|---|
| HTML - 2 (0) | 2022.08.01 |
