[210531 TIL] HTML

21575 단어 html html

HTML의 개념 📃

HTML은 Hyper Text Markup Language의 약자입니다. Hyper Text는 기존의 목차대로 읽어내려갔던 문서의 형식에서 벗어나 링크를 이용해 주제와 주제를 넘나드는 문서의 형식입니다. 대표적인 예로 위키사이트가 있습니다. Makrup Language는 태그(tag)를 이용해 문서나 데이터의 구조를 나타내는 언어입니다.

HTML 태그(tag)

밑의 사진은 우리가 많이 사용하는 네이버의 페이지 소스 사진입니다.

문서의 글을 감싸고 있는 <> 들이 보이시나요? (ex. <!doctype html>, <span>, <head>) 괄호로 감싸진 것들이 바로 html의 태그입니다. 이 태그들은 html 문서를 구성하는 중요한 역할을 합니다.

제목 : html란 무엇인가 
- html의 개념 
html이란 hyper text markup language의 약자입니다.

이런 글을 HTML 문서로 만들고 싶다면 태그를 이용하면 됩니다.

<제목 tag> html란 무엇인가 </제목 tag>
<목차 tag> html의 개념 </목차 tag>
<단락1 tag> html이란 hyper text markup language의 약자입니다.</단락1 tag>

태그는 기본적으로 여는 태그<>와 닫는 태그</>로 구성되어있습니다. <>로 태그의 문을 열고 들어갔다면 </>로 다시 닫고 나와주어야하는 것입니다. 이렇게 태그를 이용해 문서의 구성요소들을 효과적으로 구조화할 수 있습니다.

HTML의 역할 📃

HTML은 웹브라우저에게 문서나 정보를 어떤 형식으로 보여주어야 하는지를 전달해주는 역할을 합니다. HTML 문서는 위에서 설명했던 하이퍼텍스트의 링크(link)와 마크업랭귀지의 태그(tag)로 구성됩니다. 링크와 태그가 합쳐진다면 밑의 모습이 되겠죠.

<제목 tag> html란 무엇인가 </제목 tag>
<목차 tag> html의 <링크 tag>개념</링크 tag> </목차 tag>
<단락1 tag> html이란 hyper text markup language의 약자입니다.</단락1 tag>

우리가 HTML을 이용해 이렇게 문서를 작성하면 웹페이지에는 우리에게 익숙한 문서의 모습으로 바꿔줍니다.

html란 무엇인가

html 개념

html이란 hyper text markup language의 약자입니다.

이렇게요! 이런 html 문서들이 합쳐져 우리가 보는 웹사이트가 됩니다.

HTML을 통해 문서를 만들고 그 문서들이 합쳐져 웹사이트를 구성합니다. 즉, HTML은 웹사이트를 구성하는 가장 기본 언어가 되는 것이죠.

자주 쓰이는 HTML 태그(tag)의 종류들

위에서 HTML 문서는 태그로 구성되어있다고 했습니다.

<제목 tag> html란 무엇인가 </제목 tag>
<목차 tag> html의 <링크 tag>개념</링크 tag> </목차 tag>
<단락1 tag> html이란 hyper text markup language의 약자입니다.</단락1 tag>

여기서 괄호로 둘러쌓여 있는 것이 바로 태그입니다. 위의 예시에 써져있는 <제목 tag> </제목 tag>가 보이시나요? 태그안에 있는 내용이 제목이라는 것을 나타내는 태그인데요. 너무 길다고 생각하지 않으신가요? 위의 예시는 이해를 돕기 위한 예시이고 사실 태그들은 각자 이름을 가지고 있답니다. 태그들의 진짜 이름을 찾아주겠습니다.

<h1> html란 무엇인가 </h1>
<li> html의 개념 </li>
<p> html란 hyper text markup language의 약자입니다. </p>

짠. 태그들이 진짜 이름을 찾았습니다. <제목 태그>는 <h1></h1> <목차 태그>는 <li></li> <단락 태그>는 <p></p>가 진짜 이름이었습니다. 이렇게 HTML 문서에는 다양한 태그들이 존재하는데요. 수많은 태그 중 자주 쓰이는 HTML 태그들만 살펴보겠습니다.

사진 출처 - https://www.advancedwebranking.com/html/

HTML 태그 중 많이 쓰이는 태그의 순위입니다. 맨 위의 최상위 사용률을 자랑하는 <html> <head> <body> <title> <meta> 태그는 과연 무슨 태그일까요? HTML의 기본 구조를 보면 이 태그들이 왜 상위권 태그인지 이해가 될 것입니다.

HTML의 기본 구조

<!DOCTYPE html>
<html>

  <head>
    <title>문서 제목<title>
    <meta charset="utf-8">
  </head>
  
  <body>
  본문
  </body>
  
</html>

위가 HTML 문서를 작성해야 할 때 기본적으로 지켜야 할 구조입니다. 여기 최상위 태그인 <html> <head> <body> <title> <meta> 태그가 모두 들어가있죠. HTML 문서를 쓸 때마다 써야하는 태그들이기 때문에 사용률이 많은 것입니다.

       1. <!DOCTYPE html>
       2. <html></html>
       3. <head></head>
       4. <title></title>
       5. <meta charset="utf-8">
       6. <body></body>

HTML 기본 구조들의 태그들을 하나 하나 살펴봅시다.

<!DOCTYPE html> : 가장 최상위에 올라가야 하는 태그입니다. 문서의 형식, 즉 html의 버전을 브라우저에게 알려주는 것입니다. html의 버전마다 태그가 다릅니다. 위의 태그는 html 5의 출력 태그입니다.
<html></html> : 문서 형식 태그인 <!DOCTYPE html>태그를 제외한 모든 HTML의 요소들은 이 태그 안에 있습니다. 다른 태그들은 날고 긴다해도 결국엔 <html>태그의 손바닥안에 있습니다. 모든 HTML 태그들의 부모가 바로 이 태그입니다.
<head></head> : 이 태그는 html 문서에 포함되어있는 정보를 포함하고 있는 태그입니다. 이 태그안에 쓴 정보들은 웹 페이지에 나타나지 않습니다.
<title></title> : 문서의 제목을 나타내는 태그, <head> 태그 안에 존재합니다.
<meta charset="인코딩 방식"> : 문서의 인코딩 방식을 알려줍니다, <head> 태그 안에 존재합니다.
<body></body> : 이 태그안에 있는 내용들이 우리가 보고 있는 웹 페이지에 나타납니다. 대부분의 html 요소는 이 태그안에 존재합니다.

그 외 자주 쓰이는 태그들(tag)

<div>
div태그는 Division의 약자로 웹사이트의 레이아웃(전체적인 틀)을 만들때 주로 사용합니다. div 태그를 사용하여 각각의 블록(공간)을 알맞게 배치하고 CSS를 활용하여 스타일을 적용할 수 있습니다.
<a>
태그는 링크를 연결해주는 태그입니다. 그리고 'anchor' 의 첫글자를 따온 태그입니다. 우리가 정보의 바다에서 항해하고 있다면 <a> 태그를 통해서 목적지에 닻을 내린다고 할 수 있겠네요.
HTML에서 링크와 태그는 중요한 요소였죠. 그 링크를 만들어주는 아주 중요한 태그라고 할 수 있겠죠. 이런 <a> 태그는 같이 다니는 짝꿍이 있습니다. 바로 href 속성인데요. 이 href 속성은 <a>태그가 닻을 내릴 목적지를 설정해주는 속성이라고 할 수 있습니다.

<a href="https://velog.io/@rimi0108"> Way to developer </a>

Way to developer

<script>
<script> 태그는 자바스크립트와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의할 때 사용합니다.
<img>
<img> 태그는 말그대로 image를 삽입하는 태그입니다. 태그에 따라 종료 태그가 없는 태그도 존재합니다. 이 태그는 종료 태그가 없는 태그입니다. 이렇게 시작 태그만 있는 태그들을 빈 태그(empty tag)라고 합니다.
<img>태그도 <a>태그처럼 목적지를 정해주는 속성이 존재합니다. 바로 src 속성입니다. source의 줄임말입니다.

<img src="1.jpg">

이렇게 이미지의 태그와 속성을 이용해 지정해주면 이미지가 나타나게 됩니다.

<p> , <br>
<p>태그와 <br>태그는 두 태그 모두 사용시 줄바꿈이 되는 태그들인데요. 차이점이 있습니다. <p> 태그는 한 단락을 표시하는 태그입니다. 문장이 한 단락임을 표시해야 하기 때문에 시작 태그와 종료 태그를 이용해야 합니다.

<p> way to developer </p>
<p>I'm developer</p>

way to developer

I'm developer

하지만 <br>태그는 강제로 줄바꿈을 하는 용도의 태그기 때문 에 시작 태그만 사용해주면 줄바꿈이 됩니다. <br>태그는 <p>태그와 달리 종료 태그가 없는 빈 태그(empty tag)입니다.

way to developer <br>
I'm developer

way to developer

I'm developer

<li> , <ul> , <ol>
이 셋은 목차 태그입니다.

<li> first </li>
<li> second </li>
<li> third </li>

first

second

third

이 <li>태그를 항상 묶어주는 태그들이 있습니다. <ol>태그와 <ul>태그입니다. 이 태그들은 수많은 목차들을 구분해주는 역할을 합니다.

<ol>은 order list의 약자, <ul>은 unorder list의 약자입니다. 목차들을 숫자로 만들고 싶다면 <li>태그를 <ol>태그로 묶어주면 되고 숫자가 필요없다면 <ul>태그로 묶어주면 됩니다.

<ol>
<li> first </li>
<li> second </li>
<li> third </li>
</ol>

first

second

third

<ul>
<li> first </li>
<li> second </li>
<li> third </li>
</ul>

first

second

third

이 외에도 수많은 태그들이 존재합니다.

<참고>

https://choirim.tistory.com/4?category=916195 (예전 블로그 글을 기반으로 작성했습니다.)
https://choirim.tistory.com/8?category=916195 (예전 블로그 글을 기반으로 작성했습니다.)
https://choirim.tistory.com/5?category=916195 (예전 블로그 글을 기반으로 작성했습니다.)
https://www.zerocho.com/category/HTML&DOM/post/58177daee4184c0015b8058a
https://coding-factory.tistory.com/188

Author And Source

이 문제에 관하여([210531 TIL] HTML), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@rimi0108/210531-TIL

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[데이터베이스 & SQL 첫걸음] 4주차 공부

(React) 리엑트 라이프 사이클

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다