HTML | Part_2 태그 ( Tag )
본문 바로가기

IT/HTML

HTML | Part_2 태그 ( Tag )


HTML 

시작과 끝. tag





이전 포스팅과 같이 HTML은 


태그로 시작하여 태그로 이나는게 전부입니다.


태그가 정말 전부입니다.





이제 그 전부를 훑어보도록 하겠습니다.







1. <html>


말 그대로 HTML을 사용하기 위한 태그이며


HTML의 시작과 끝을 맡고 있습니다.






2. <head>


헤드, 즉 머리글 부분이라 보시면 됩니다.


아래에는 <head>태그 안에서 자주 사용되는 태그들입니다.


 태그

설명 

<meta>

 보이지 않는 정보를 제공하는 태그입니다.

페이지의 설명 요약, 핵심 키워드, 제작자, 크롤링 정책 등 수많은 정보가 있습니다.

<title>

 웹 페이지의 제목을 나타내는 태그입니다.

<link>

 CSS를 별도의 파일로 저장 후 HTML 문서 내에서 불러올 수 있습니다.

하나의 코드에 CSS, javascript, html 등이 존재하면 코드의 길이가 길어져

CSS를 별도의 파일로 분리하여 사용하는 것이 좋습니다.

<style>

 HTML 문서 내부에 기술 style 태그를 사용해 css를 사용 할 수 있습니다.

<script>

 javascript. 정적인 HTML문서를 동적인 상태로 만들어주는 언어 라고 생각하시면 됩니다.

수많은 라이브러리들이 존재하며 프론트는 물론 백엔드에서도 많이 사용됩니다. 






3. <body>


<head>는 머릿말을 나타내듯, <body>는 페이지의 본문을 나타냅니다.


아래에는 <body>태그 안에서 자주 사용되는 태그들입니다.


<br>

HTML은 엔터키로 줄바꿈이 되지 않습니다.

이를 위해 <br>태그를 사용합니다.

<p> 

paragraph. 즉 문단을 나타냅니다. <br>태그와 같이 줄바꿈 역할도 됩니다.

<b>

<strong>

bold, strong. 이 태그 안의 글을 "굵게" 합니다. 

최신 표준은 <b>보다 <strong>태그를 권고한다고 합니다.

<h> 

글자의 크기를 결정해줍니다.

h1 ~ h6까지 낮은 숫자일수록 글자의 크기가 커집니다. 

<a> 

하이퍼링크를 걸어주는데 사용됩니다.

href를 사용하여 이동할 링크를 결정하거나 target을 사용해 링크를 여는 방법을 결정합니다. 

<i> 

italic. 이 태그 안의 글을 "기울임" 합니다. 

<img> 

이미지를 삽입하는 사용됩니다.

src로 이미지의 경로, width, height로 이미지의 가로, 세로 크기를 결정합니다.

<table> 

테이블을 만드는데 사용됩니다. 

<tr>을 사용해 표의 열을, <td>를 사용해 표의 행을 표시합니다.

<div> 

division. 말 그대로 화면을 분할하여 원하는 틀을 만드는데 사용됩니다. 

<span> 

<div>태그는 쓰게 되면 <p>태그를 쓴 듯이 줄바꿈이 일어나지만, 

<span>태그는 일렬로 쭉~ 이어집니다. 

이 태그는 직접 사용해 보시고 느끼시는게 좋을것 같습니다.

<ul>

<ol>

unordered list. 순서없이 리스트를 나타낼 때 쓰입니다.

ordered list. 순서있는 리스트를 나타낼 때 쓰입니다.

<li> 

<ul>, <ol> 태그를 사용 할 때 <li>태그로 안의 내용을 작성합니다. 

<form>

textarea에 글자를 입력하거나, checkbox, radio 등 클라이언트가 어떤 작업을 통해 백엔드의 서버로 정보를 전송 할 때 사용됩니다.
<form>태그 안에는 input, select | option ,textarea, button 등의 추가적인 태그들이 존재하며,
이를 사용하여 서버로 정보를 요청하여 받는 등의 일을 주로 합니다.     



div 태그를 사용해서 우선 원하는 형태의 폼을 만드는것도 어려울 겁니다

저 또한 정말 간단히 주먹구구식으로만 웹을 만들어 봐서 다양한 오류가 있었습니다.

display 옵션 설정을 안한다거나, 사용이 안되는 옵션을 가져다 쓴다거나,

태그를 안닫는다던가, 
태그를 안닫는다던가
태그를 안닫는다던가 ...



앞 뒤 맥락에 맞게 글을 잘 쓰는것도, 코딩을 잘 해 다음 파트에는 어떤 내용을 써야할지

잘 아는것도 아니지만, 조금조금씩 생각나는대로 글을 이어 나가보겠습니다.









HTML | Part_2 태그 ( Tag )


'IT > HTML' 카테고리의 다른 글

HTML | Part_1 기초  (0) 2018.11.19