TIL | HTML

gemma. K·2020년 9월 7일
0

TIL

목록 보기
1/6
post-thumbnail

HTML란

HTML(Hypertext Markup Language)은 프로그래밍 언어는 아니지만 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 통해 알 수 있도록 하는 마크업 언어다.

HTML은 elements(요소)와 tags(태그)로 구성되어 있으며 elements는 웹 브라우저에 표시되는 글, 이미지 등의 다양한 컨텐츠를 표시하고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업한다.

HyperText: 웹페이지를 다른 링크로 연결하는 링크


HTML 문서의 구조

<!DOCTYPE html>
<html>
  <head> 
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

1. <!DOCTYPE html>

  • html 문서 파일에서 가장 윗부분에 쓰이며 html 문서 형식을 나타내는 짧은 문자.
  • 제대로 작동하기 위해 포함하는 관습적인 것일 뿐 현재는 누구도 신경 쓰지 않는다.

2. <html></html>

  • 기본 요소로서 전체 페이지의 콘텐츠를 포함한다

3. <head></head>

페이지를 열 때 표시되는 body 요소와는 다르게 홈페이지 이용자에게는 보이지 않지만 검색 결과에 노출 될 키워드, 홈페이지 설명, CSS 스타일, character setdeclaration 등 HTML 페이지의 많은 내용을 담고 있다.

4. <meta charset="utf-8">

이 element는 문서의 character—문서에서 허용하는 문자 집합(character set)— encoding에 대해서 간단히 표시하는 것으로 utf-8 은 전세계적인 character 집합으로 많은 언어들을 문자들을 포함한다. 이는 웹 페이지에서 어떤 문자라도 취급할 수 있다는 것을 의미한다.

5. <title></title>

  • 페이지의 제목으로 설정되며 페이지가 로드되는 브라우저 탭에 표시되는 제목으로 사용
  • 페이지 제목은 페이지가 책갈피 될 때 페이지를 설명하는 데에도 사용

6. <body></body>

여기에는 텍스트, 이미지, 비디오, 게임, 재생 가능한 오디오 트랙 등을 비롯하여 페이지에 표시되는 모든 콘텐츠가 포함된다. html 문서에서 가장 큰 비중을 차지한다.


Element의 구조

<p>Hello World!</p> 

element의 structure는 opening tag(여는 태그), content(내용), closing tag(닫는 태그)로 이루어져 있다. 예시에서는 <p> 가 여는 태그, Hello World 가 내용 그리고 </p> 가 닫는 태그이다.

그러나 모든 element의 구조에서 closing tag가 존재하는 것은 아니다. 대표적으로 <img>, <input> 는 단일 태그로 closing tag가 없어야 한다.


HTML 주요 tag

1. h1 - h6
heading 으로 제목 등에 사용. h1이 가장 크기 가 크고 높은 레벨로 h6까지 있음. 하나의 html 문서 페이지에 h1은 1번, h2 2번, h3는 3번 사용함.

<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>

제목1

제목2

제목3

제목4

제목5
제목6

2. header
소개 및 탐색에 도움을 주는 콘텐츠가 포함 됨. 제목, 로고, 검색 폼, 작성자 이름 등의 요소가 포함 가능.

3. main
<body> 의 주요 콘텐츠가 포함. 문서의 핵심에 해당한다.

3. footer
html 문서의 맨 밑 마지막에 주로 사용된다. 저자, 저작권, 연락처, 사이트맵, 연관 페이지 등의 정보들이 주로 포함된다.

4. script
이 태그는 주로 javascript와 같은 스크립트 코드를 html 문서와 연결 시키기 위한 태그로 주로 src 속성과 함께 쓰인다.

// syntax
<script src='app.js'></script>

5. a
anchor tag라 불리는 a 태그는 href 속성을 통해 URL로 통하는 하이퍼링크를 만든다. 이 외에도 같은 페이지의 위치, 파일, 이메일 등으로도 이동가능하다.

// syntax
<a href='https://www.naver.com'>네이버입니다</a>

네이버로 이동하기

위의 네이버로 이동하기 를 클릭하면 네이버 페이지가 로드 된다

6. input
유저의 데이터를 받을 수 있는 요소로서 주로 type, value, name 속성과 함께 쓰인다. 다양한 유형이 존재하는데 대표적으로는 text, button, checkbox 등이 있다.

<input type="text" name="text" placehoolder="ID">

7. ul / ol / li
ul과 ol은 목록을 정의하기 위한 태그로 ul은 unordered list, ol은 ordered list의 약자로 ul은 bullet 기호가 리스트 앞머리에 붙고 ol은 숫자가 앞머리에 1부터 붙여진다. ul과 ol은 주로 li 태그와 함께 쓰여서 순서대로 나열된다.

<ul>
  <li>리스트1</li>
  <li>리스트2</li>
  <li>리스트3</li>
</ul>
  • 리스트1
  • 리스트2
  • 리스트3
<ol>
  <li>리스트4</li>
  <li>리스트5</li>
  <li>리스트6</li>
</ol>
  1. 리스트4
  2. 리스트5
  3. 리스트6

8. img
이미지 첨부를 위한 태그이다. alt 속성과 주로 쓰이는데 이미지 로드가 안되었을 경우 표시된다.

<img src="img_girl.jpg" alt="Girl in a jacket">

9. div
컨테이너로 구획을 나누고 콘텐츠를 담는 역할을 한다. css 스타일 시트로 스타일을 변경하지 않는다면 레이아웃에 아무런 영향이 없다. css의 class나 id 선택자로 묶어 한꺼번에 스타일을 변경할 수 있다.

<div class="title">
 <h1>Hello World</h1>
</div>

Hello World!

10. span
div tag와 매우 유사하지만 div는 block level인 반면 span은 inline level이다.

<span>안녕</span>

안녕

11. p
div와 같이 컨테이너 역할과 동시에 단락을 나누어준다.

<p>
이곳의 나의 공간이며 저곳 또한 내 것이 될 수 있기를
</p>

<p>
나는 이곳에 왜 존재하는가. 그것을 안다면 이곳에 있을 필요가 없을 것이다. 그럼에도 나는 왜 그런 질문을 자꾸만 스스로에게 던지는 걸까. 진정 내가 바라는 것을 무엇인가.
</p>

이곳의 나의 공간이며 저곳 또한 내 것이 될 수 있기를

나는 이곳에 왜 존재하는가. 그것을 안다면 이곳에 있을 필요가 없을 것이다. 그럼에도 나는 왜 그런 질문을 자꾸만 스스로에게 던지는 걸까. 진정 내가 바라는 것을 무엇인가.

0개의 댓글