티스토리 뷰

Web/Html

[HTML] 기본 태그 정리

viaeoo 2016. 2. 2. 00:27



[ HTML 기본 태그 정리 ]





html 기본 태그 ' <head> 안에 들어갈 태그 '



1. <meta> 태그


<meta> 태그는 본 문서의 키워드 혹은 제목, 요약을 나타내는 태그로서 활용되게 됩니다. meta태그에 대한 자세한 설명은 따로 [META 태그란?] 을 참고해 주시기 바랍니다.


2. <title> 태그


Ex) <title> NAVER </title>

<title> 태그는 문서의 제목을 나타내는 태그로서 활용됩니다. 

이와 같이 웹페이지를 띄우게 되면  naver 라는 타이틀이 뜨게 되는 부분을 말합니다.


3. <link> 태그


Ex) <link href="/style.css" rel="stylesheet" type="text/css" />

<link> 태그는 주로 css 파일을 연결할 때 사용하는 태그입니다. link 요소의 속성들을 살펴보면, 'href'는 해당 css파일의 주소를 적게 됩니다. 'type'과 'rel'에는 각각의 맞게 적어주게 되며,  link 요소의 쓰임새가 css파일 연결 외에도 다른 외부요소를 연결하는 데에도 쓰이기 때문에 type 과 rel을 적어줍니다. link 요소는 다른 연결에도 쓰입니다만, 일단은 css 파일을 연결할 때에 필요하다 정도만 알고 계시면 됩니다. 참고로 'rel'속성은 'relationship (관계)'의 줄임 말입니다.


4. <style> 태그


Ex) <style type="text/css" > *{ margin:0; padding:0; </style>

<style> 태그는 html문서안에 css를 그대로 사용하고자 할때 적어주는 태그입니다. style 요소 안에 원하는 css 내용을 넣으시면 굳이 외부 css 파일을 사용하실 필요 없이 html 파일 안에서 사용 가능합니다.


5. <stript> 태그


Ex) <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script> 태그는 두가지 방향으로 사용할 수 있는데 위와 같이 src 속성을 넣어 외부에 있는 js를 불러와 사용할 수 있으며 혹은 src 속성을 사용하지 않고, <script> 태그 사이에 javasrcipt 코드를 넣어 사용하실 수 도 있습니다. 여기서 javascript에 대해 언급을 하기에는 무리가 있어 이정도로 하고 넘어가도록 하겠습니다.





html 기본 태그 ' <body> 안에 들어갈 태그 '



1. 제목태그 <h1>,<h2>,<h3>,<h4>,<h5>,<h6>


제목태그는 말 그대로 문서의 본문의 헤드라인으로 요소입니다. 이 헤드라인 요소는 문서에 있어 중요한 요소로서 웹 페이지의 대한 개요를 헤드라인 요소로서 판단하게 되는 기준입니다. 예를 들어 아래와 같이 문서의 구조를 결정하게 됩니다. 


<h1> HTML 이란? </h1>

<h2> HTML 의 역사 </h2>

<h3> 팀 버너스리에 대해 </h3>

<h2> HTML 의 태그 </h2>

<h3> <head>안에 들어가는 태그 </h3>

<h3> <body> </h3>


이는 ' HTML 이란? ' 의 큰 주제를 가지고 그 안에 세부주제로 'HTML 의 역사' , ' HTML의 기본태그 '가 들어있으며, 그 안에 각각의 소주제를 가지고 있습니다. 이러한 문서의 구조를 담당하게 되는 헤드라인요소 '제목태그'는 웹 표준과 더불어 중요해지고 있습니다.


2. <p>, <pre>, <br>, <hr> 태그


먼저 <p> 태그는 문단 태그로서 텍스트를 감싸게 되는 태그입니다. 웹 페이지에서 텍스트의 경우 따로 감싸지 않고 써도 되는 부분이지만, 명확한 의미를 위함과 동시에 <p> 태그 자체가 가지고 있는 문단으로서 블록요소이기 때문에 사용하는 경우도 종종 있습니다.


<p> 이것은 문단입니다. </p>


<pre> 태그는 형식화된 텍스트를 나타내는 태그로서 여기서 형식화된 텍스트란 <pre> 태그 안에 감싸져 있는 띄어쓰기, 들여쓰기, 줄바꿈 등이 그대로 웹 페이지에 표시하게 됩니다. 이러한 형식화된 텍스트는 시를 표현하거나 혹은 기타 색다른 텍스트를 표현할 때 쓰이곤 합니다.

하지만, <pre> 태그는 스크린리더에 제대로 된 출력을 보여줄 수 없어 대체텍스트를 제공하여야 합니다.


<pre>

나는 누구인가

여기는 어디인가?

</pre>


<br> 태그는 줄바꿈 태그로서 사용됩니다. 이는 다양한 활용이 될 수 있지만, 표준상 텍스트의 줄 바꿈으로 사용하는 것이 가장 좋습니다.


나는 누구인가? <br />

여기는 어디인가? <br />


<hr> 태그는 장면의 전환, 다른 화제로의 전환 등을 위해 사용하는 요소입니다. 하지만, 문서 개요에는 영향을 미치지 않습니다. 이 태그는 사용하게 될 시 화면에 수평선을 그리게 되어 디자인상으로 활용이 되는 경우도 있지만, html5 표준상 주제의 분리적 요소로 사용하게 되는 태그입니다.


3. 강조 태그 <strong>, <em>


<strong> 태그는 강조 태그로서 글자를 굵게 표시하게 됩니다. 이는 본문에서 강조할 단어 혹은 구문에 사용하게 됩니다.

<p> 나는 <strong> 000 </strong> 입니다. </p>


<em> 태그 또한 강조 태그로서 이는 글자를 기울게 표시합니다. 명세에 보면 <strong> 보다 더 강조표현으로 나타나 있습니다. 허나, 실제 <strong> 혹은 <em>을 취향에 맞게 사용하게 되는 것을 자주 볼 수 있습니다.

<p> 나는 <em> 000 </em> 입니다. </p>


4. <a>, <img> 태그


웹 페이지를 구축할 시 가장 많이 사용하게 될 태그들 중 하나로 <a> 태그는 하이퍼링크 태그이며, <img>태그는 말 그대로 이미지를 출력하는 태그입니다. 각각 속성이 필수적으로 들어가야 하는 태그이며, 사용은 아래와 같이 사용하게 됩니다.


<a href="www.conol.tistory.com"> conol 티스토리로 가자! </a>

<img src="/images/conol.jpg" alt="conol">


5.  목록 태그 <ul>, <ol>, <li>


목록태그로서  <ul>, <ol> 이 있습니다. 이는 하나 이상의 <li> 태그를 가져야 하며 마찬가지로 <li> 태그는 상위에 <ul> 혹은 <ol> 태그가 있어야 합니다.

<ul> 태그는 순서가 없는 목록이며, <ol> 태그는 순서가 있는 태그입니다.


<ul>

<li> 리스트 1 </li>

<li> 리스트 2 </li>

</ul>


<ol>

<li> 리스트 1 </li>

<li> 리스트 2 </li>

</ol>


6. html5 레이아웃 태그 및 <div> 태그


html5에 들어 과거의 <div>태그로 레이아웃을 짠 것을 이제는 html5 태그를 이용하여 좀 더 의미있는 레이아웃을 짜게 되었습니다.

레이아웃 태그들로 <header>, <section>, <article>, <footer>, <nav>, <aside> 등이 있으며, 여기에 레이아웃을 짜게 되는 태그인 <div>태그가 있습니다.


<div class="wrap"> 전체 레이아웃 </div>


보통 레이아웃의 경우 클래스명 혹은 아이디명을 줘서 후에 css로 레이아웃을 조정하게 됩니다.


7. 특수문자


특수문자는 이스케이프 문자로서 html을 작성할 시 특수문자의 경우 이스케이프 문자로 넣어야 합니다. 물론 그냥 넣어도 출력이 되지만, 조금 더 명확한 html을 위하여 이스케이프 문자를 사용하시는 것을 추천드립니다.








html 기본 태그 ' <table> 태그 '



<table> 태그는 말 그대로 표를 만드는 태그입니다. 과거에는 <table>을 이용하여 레이아웃을 짜는 시기가 있었지만 요근래에는 그러한 경우가 없으며 표를 이용할때에 사용하게 됩니다. <table> 태그는 속성으로 summary 를 가질 수 있으며 속성명 그대로 어떠한 테이블인지 요약을 나타낼 때 사용합니다.


기본적으로 <table> 안에는 <thead>, <tbody>, <tfoot> 의 레이아웃 구조를 가지고 있으나 생략 가능합니다.


테이블의 행은 <tr> 셀은 <td> 로 나타내게 되며, 여기서 <td> 는 rowspan 과 colspan 을 속성으로 가질 수 있습니다.


<table summary="00학교 00반 성적표">

<caption>이 테이블은 학생들의 성적표 입니다.</caption>

<tr>

<th>이름</th>

<th>성적</th>

</tr>

<tr>

<td>AAA</td>

<td>A</td>

</tr>

<tr>

<td colspan="2">BBB</td>

</tr>

<tr>

<td>CCC</td>

<td>C</td>

</tr>


</table>


여기서 <caption> 태그는 표의 제목을 나타낼때 사용하게 되며 <th> 태그는 열의 제목으로 표현할 수 있습니다.





html 기본 태그 ' <form> 태그 '



<form> 태그는 서버와의 통신을 위한 필수적인 태그로서 보통 회원가입 혹은 로그인에 사용하게 됩니다. 이는 html의 중요한 태그이지만 서버와 javascript를 알고 다시 한번 공부하는 것이 좋으며, 아직은 이러한 태그들이 있다 정도만 생각하시면 되겠습니다!


1. <form> 태그

<form> 태그는 action 과 method  속성을 가지고 있으며 여기서 action 속성은 form 태그가 가진 정보를 넘겨주는 페이지를 말하며, method는 넘겨줬을때의 방식을 설정하게 됩니다. 아래 예제를 보며 설명하도록 하겠습니다.


<form method="POST" action="/admincheck/adminLoginCheck" class="adminlogin_form">


<input type="text" name="userid" preholder="user ID" >

<input type="password" name="password" preholder="user password">

<input type="submit" name="submit" value="LOGIN" class="login">


</form>


위에서 method는 post로 설정하며 action 값에 정보를 넘겨줄 경로를 찍어줍니다. class는 기타 css 및 js 를 위해 설정하였습니다. 하위요소로 <input> 태그가 들어있으며 <input>  태그는 타입에 따라 각각 다르게 됩니다.


2. <input> 태그


<input> 태그는 타입에 따라 다양하게 나타나게 되며, 상황에 맞게 타입을 설정하면 됩니다. 


3. <textarea> 태그


textarea 요소는 input 요소의 "text" 타입과 비슷한 형태입니다. 하지만 "text" 타입의 input 요소는 한 줄만 입력이 가능하지만, <textarea> 태그는 긴 내용을 입력하는 것이 가능합니다.


<textarea name="contents" cols="40" rows="10"

여기에 글을 입력

</textarea>


<textarea>는 cols 와 rows 속성을 가지게 되는데 이는 각각 너비와 높이를 나타냅니다. 즉 너비는 40글자이며, 높이는 10줄에 해당되게 되는 속성을 표현한 것입니다.


4. <select> 태그


<select>태그는 우리가 흔히 볼 수 있는 셀렉트박스를 출력해주는 태그입니다. 이 <select> 는 <option>를 하위요소로 두며 아래와 같이 나타내게 됩니다.


<select name="score">

<option value="A">A</option>

<option value="B">B</option>

<option value="C">C</option>

<option value="D">D</option>

</select>


5. <fieldset>, <legend>


<fieldset> 은 폼 태그들을 묶는(그룹화하는) 태그로서 해당 이름은 <legend> 태그로 지어집니다.


<form>


<fieldset>

<legend> Login </legend>

ID : <input type="text" />

password : <input type="password" />

</fieldset>


<fieldset>

<legend> Login 2 </legend>

E-mail : <input type="e-mail" />

password : <input type="password" />

</fieldset>


</form>








참고하면 좋은 자료


https://opentutorials.org/module/552


http://www.w3schools.com/html/html5_intro.asp












-
- 본 포스팅은 스터디의 목적으로 포스팅 되었습니다. 잘못된 정보가 있을시 댓글로 남겨주세요^^ --

(불펌을 금지 합니다)

'Web > Html' 카테고리의 다른 글

[HTML] 기본 태그 정리  (2) 2016.02.02
[HTML] Meta 태그란 무엇인가?!  (3) 2016.02.01
[HTML] HTML이란?!  (0) 2016.01.04
댓글
댓글쓰기 폼