🤷♂️ HTML ?
Hyper Text Markup Language 는 웹 페이지를 위한 마크업 언어입니다.
- Hyper Text : 링크를 클릭해 다른 문서나 다른 링크로 이동
- Markup : 태크를 이용해 문서의 요소들이 어떻게 보일지 표시
Public Domain 특성을 가지는 WEB을 html을 통해 모두가 각자의 환경에서 동일한 정보를 확인할 수 있습니다.
📐 구조
<!DOCTYPE html>
<html>
<head>
<title>Page Title2</title>
<meta charset="utf-8">
</head>
<body>
<h1>This is a Heading</h1>
<h2>This is a Heading2</h2>
<p>This is a paragraph.</p>
</body>
</html>
- DOCTYPE :
문서의 형식 선언- html :
head 와 body 를 감싸는 태그- head :
문서의 정보를 다루는 태그 (body를 설명)- body :
문서의 본문을 다루는 태그
모든 웹페이지의 소스코드는 위와 같은 형태로 구성되어 있는 것을 확인 할 수 있습니다.
🏷 태그
위의 코드에서 보이는 <tag> </tag> 는 무엇을 의미할까요?
1) h1 ~ h6
제목을 표현 하는 태그, 실제 링크를 눌러 결과를 확인해보면 h뒤의 숫자가 커질수록 글자가 작아지는 것을 확인 할 수 있습니다.
💡span태그를 통해서 글짜의 크기를 조절할 수 있는데 둘의 차이는 무엇일까?
-> 실제 검색엔진은 제목을 기반으로 검색되기 때문에 제목을 의미하는 태그에 제목을 작성하는 것이 검색엔진에 의해 노출된 가능성이 높아진다!
둘 다 줄바꿈을 표현하는 태그, 하지만 <br> 의 경우 태그가 쌍으로 존재하지 않고 단순히 줄을 바꾸는 기능이라면 <p> </p> 는 태그로 감싸진 영역이 같은 단락임을 의미합니다.
3) a
닻을 의미하는 'anchor'의 약자로 다른 링크로 할 수 있도록 하는 태그입니다.
<a href = " "> </a> 형태를 통해서 다른 링크로 이동할 수 있도록 합니다.
이 밖에도 정말 다양한 tag 들이 존재합니다. 각 태그 빈도 링크를 통해서 각 태그의 빈도수를 확인해서 중요한 태그들을 알 수 있고 각 태그 설명 링크를 통해 각 태그의 설명과 예제 코드를 확인할 수 있습니다.
📄 실습
위의 내용을 실습한 코드와 결과물은 깃허브를 통해서 확인할 수 있습니다.
