TIL 3 | Thank you - "HTML"

이형준·2022년 4월 2일
1
post-thumbnail
post-custom-banner

개발 공부를 처음 시작하고 처음 만나게 된 건 바로 "HTML" 이였다
개발에 대한 직무지식이 전혀 없는 사람이 나에게
"HTML 이 무엇인가요?" 라고 질문 했을때 나는 개발자로써 무엇이라고 답할까 그 답이 내가 작성한 Thank you "HTML" 로써 충분히 설명 되길 바란다.



What's HTML?

"HTML 은 Hyper Text Markup Language 약어로.." 라는 설명은 HTML을 이해 할 수 없고, 질문자가 원하는 대답이 아니다 그냥 약어이기 떄문이다.

내가 생각하는 이상적인 대답은 "당신이 사용하는 모든 웹페이지의 구조를 설계하는 컴퓨터 언어, 사람에 비유하면 뼈 같은 존재라고 할 수 있어요" 라고 하면 이해가 가능 할 거 같다 그러면 이제 웹페이지의 뼈에 대해서 자세히 알아보자 !

'HTML' 이라는 단어의 뜻

'HTML'은 
       HT - HyperText, 문서와 문서가 링크로 연결되어 있다.
       M - Markup, 태그로 이루어져 있다.
       L - Language

약어의 뜻 처럼 HTML 은 "문서와문서"를 "태그"를 통해 연결시켜주는 "컴퓨터 언어" 인 것이다.

What Markup ?

문서와 문서를 연결해준다는 말은 알겠는데 그러면 Markup은 뭘까요? 저는 개발공부를 하다가 모르는 것을 만나면 그 단어의 뜻부터 검색해 봅니다. 그것을 만든 최초의 사람이 그러한 네이밍을 한 이유를 생각하며..!!

markup : 컴퓨터 마크업(문서의 활자·조판 지정 표시)

Markup 의 의미처럼 웹이라는 문서에서 활자, 조판등을 지정해주고 표시해주는것 정도로 이해하고 이것을 곧, 우리는 "Tag" 라고 부른다.
그럼 "Tag"는 무엇일까?

"Tag" : 문서에서 사용하는 정보를 정의하는 형식이다.

이제 "Tag"에 대해서 자세히 알아보자 !

  • "Tag"의 형식 :

    <태그명 속성명1="속성값1" 속성명2="속성값2"> 컨텐츠 </태그명>



문서의 구조

  • "HTML" 문서는 파일의 확장자가 html, htm 으로 끝난다.
  • 최상위 태그로 html 을 사용하고 그 하위에 head 태그와 body 태그를 사용한다.
  • head 태그는 문서를 설명하는 태그로 제목이나 키워드 같은 정보를 담는다.
  • body 태그는 문서의 내용이 위치한다.




HTML 파일

  • HTML 코드를 저장하고 웹 브라우정에서 로딩하면 웹페이지가 구현된다.
  • HTML 파일은 텍스트를 편집할 수 있는 에디터로 만들 수 있고, 확장자명으로 HTML 혹은 HTM을 사용한다.




HTML의 유명한 Tag를 알아보자


HTML에는 약 150개의 태그가 있다 그 중 자주 사용되는 상위 20여 개의 태그의 기능과 역할 가지고 있는 정보, 정의를 알아보자

  • !DOCTYOE
    문서의 타입을 선언합니다, DTD 선언이라고도 부릅니다.

  • html
    html 문서로 작성한다 선언!

  • head
    head 태그는 문서에 포함되지 않습니다.
    head 태그는 title 웹문서의 제목, css 같은 내용을 포함합니다 그 외 script 파일을 불러오거나, link 등이 head 태그 사이에 포함됩니다.
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
  </head>
</html>
  • body
    body 태그는 문서의 본문을 선언 합니다.
    웹문서에서는 택스트, 하이퍼링크, 이미지, 표, 목록등의 HTML문서가 작성되는 시작을 선언합니다.
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
  </head>
  <body>
  내용
</body>
</html>
  • article
    article 요소는 독립적으로 사용되는 컨텐츠를 지정합니다.
    보통 블로그글, 기사등의 한단락을 표현할떄 영역을 묶어주는 용도로 사용합니다.
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>제목</title>
  </head>
  <body>본문
    <article>한단락 한단락</article>
</body>
</html>
  • h1~h6
    대표 제목에서 작은 소제목 까지 정의하는데 사용합니다.
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>제목</title>
  </head>
  <body>본문
    <article>한단락 한단락</article>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
</body>
</html>
  • p
    가장 많이 사용되는 태그 중 하나로 글의 내용 설명이 삽입된 단락을 정의합니다.
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>제목</title>
  </head>
  <body>본문
    <article>한단락 한단락</article>
    <h1>h1</h1>
   <p>내가 쓰고싶은 주제</p>
</body>
</html>
  • header
    header 태그는 문서의 상단 부분영역을 표시해 줍니다.
    요소 안에는 일반적으로 h1~h6 을 이용하며 문서의 제목, 주제등을 표현해 주는 상단영역을 구분하여 줍니다. 아래 예제처럼 많은 컨텐츠의 상단을 정의하기도 하고 한개만을 사용하여 문서 전체으 상단 글 영역을 정의하기도 합니다.
    <h1>제목</h1>
    <h3>소제목</h3>
    <p>주제에 대한 내용</p>
  </heard>
  • footer
    문서의 바닥글을 정의합니다.
    회사명 연락처 주소 등 회사정보 또는 저작권 표시 등 다양한 정보를 하단 단락에 표현할떄 사용하기도 하지만 여러 컨텐츠영역의 하단에 사용되기도 합니다.
  <p>Posted by: foxrain</p>
  <p>
    Contact information:
    <a href="mailto: mymail@example.com">mymail@example.com</a>.
  </p>
</footer>
  • adress
    주소와 연락처 정보를 의미합니다.
  구글 <a href="https://www.google.com/webhp?hl=en&sa=X&ved=0ahUKEwi9s76j-_T2AhVzyYsBHTdgAnEQPAgI">H구글 </a>.<br>
  주 소 : 서울시 강남구 ...
</address>
  • div
    div 태그는 body 문서 안에서 각 영역의 세션을 구분 정의 합니다. 많이 사용되며 매우 중요한 tag 입니다.
    Layout 구조 틀을 만들고 CSS를 통해 위치 및 layer을 구분등 HTML요소의 컨테이너 역활을 합니다.
    또한 javascript를 통해 특정 작업을 수행하고 여러 유형의 동적인 효과를 줄수도 있습니다.
  <h3>제목</h3>
  <p>단락 설명...</p>
</div>
  • a
    a 태그 html문서의 핵심이라고 할 수 있습니다. html이란 하이퍼텍스트 언어로 만들어진 문서를 의미 합니다.
    하이퍼 텍스트란 (hypertext) 간단히 설명한다면 개별 정보들을 링크를 사용하여 유기적으로 문서에서 다른 문서를 연결지어 주는것을 의미합니다..

<a href="https://www.google.com">구글로 이동</a>
구글로 이동

  • img
    img 태그 HTML 문서의 이미지를 정의 합니다.
    이미지의 폴더 경로와 파일명을 입력하여 이미지를 서버에서 또는 특정한 저장공간에서 불러와 보여 줍니다.. 하이퍼 링크를 추가하여 클릭 가능한 영역으로 만들어 주기도 합니다.
    <img src="../images/hello.jpg" alt="안녕하세요" />
    안녕하세요
  • br
    br 태그는 HTML 문서의 줄바꿈 역활을 합니다.
    태그의 마지막에 "/"을 넣는 것은 img, br 태그처럼 열고 닫는 태그를 따로 정의하지 않는 단독 태그들의 경우 사용됩니다.
반갑습니다<br/>
또 만났네요<br/>
HTML br태그 입니다.<br/>
  • span, strong, strike
    텍스트의 일부 요소들의 정의, 강조, 색칠, 간격, 취소선등을 사용할때 이용됩니다. span 일반적으로 텍스트에 색칠, 크기, 좌우간격을 조절하는데 사용됩니다.
    strong 텍스트에서 강조하는 부분의 글자에 사용됩니다.
    strike 취소선 텍스트에 사용됩니다.
<span style="color: blue;">전화번호가</span><br/>
<strike>02-123-1234</strike>에서<br/> 
<strong>02-321-4321</strong>로 변경 되었습니다.

전화번호가

02-123-1234에서

02-321-4321로 변경 되었습니다.

  • ul, ol
    ul, ol 태그는 목록을 만들때 사용합니다.
    반드시 li 태그와 함께 사용됩니다.
    순서가 없는 목록을 만들려면 "ul",
    순서가 있는 목록을 만들때는 "ol"을 사용합니다. 
  <li>커피</li>
  <li>우유</li>
  <li>음료수</li>
</ul>

<ol>
  <li>아메리카노</li>
  <li>카프치노</li>
  <li>카페 라떼</li>
</ol>
  • 커피
  • 우유
  • 음료수
  1. 아메리카노
  2. 카프치노
  3. 카페 라떼
  • dl
    dl 태그는 문서 안에서 용어 및 설명이 포함되는 설명 목록에 사용됩니다.
    dt는 용어의 정의 그리고 dd는 용어의 설명을 함께 사용합니다.
  <dt>강아지</dt>
  <dd>아이고 주인님</dd>
  <dt>고양이</dt>
  <dd>집사야 밥!</dl>
강아지 아이고 주인님 고양이 집사야 밥!
  • table
    table 태그는 표를 만들때 사용되며 기본 tr과 td와 함께 쓰이며 추가로 th, tbody, tfooter와 colgroup의 col을 이용하여 열에 대한 속성을 정의하기도 합니다. 본문은 기초 설명이므로 th, tr, td를 이용한 간단한 표 예제만 보여 드립니다.

예) 두개의 열과 세개의 행을 포함한 표를 작성합니다.

<table>
  <tr>
    <th>날짜</th>
    <th>계획</th>
  </tr>
  <tr>
    <td>01월 01일</td>
    <td>HTML 기초공부</td>
  </tr>
  <tr>
    <td>01월 02일</td>
    <td>CSS  기초공부</td>
  </tr>
</table><br></br>
날짜 계획
01월 01일 HTML 기초공부
01월 02일 CSS 기초공부


Thank you -HTML을 마치며

HTML 은 모든 웹에 기반이 되는 언어이다 그래서 엄청 난이도가 있지 않고, 쉽게 생각할 수도 있다 하지만 그럴수록 더욱 HTML 덕분에 누리는 모든 것 들에게 감사하며, 기본기에 더욱 충실하고 그걸 바탕으로 한단계 한단계 나아가며, 성장하는 개발자가 되겠다.
profile
이형준
프론트엔드 개발자 이형준입니다.
이전 포스트

TIL 2 | 내가 보려고 올리는 "css 레이아웃"

다음 포스트

TLI 4 | Thank you - "CSS"

post-custom-banner

1개의 댓글

comment-user-thumbnail
kim seung chan
2022년 4월 2일

잘보고가요 ~

답글 달기