HTML에서 가장 많이 쓰이고,
코딩을 한다면 반드시 알 수 밖에 없는!!!
태그에 대해서 정리해드리겠습니다.
우선 가장 많이 쓰이는 태그라는 걸 참고한 사이트는
https://www.advancedwebranking.com/html/
The average web page from top twenty Google results
Apparently, an average web page uses twenty-eight different element types: The twenty-eight elements used on most pages, ordered by appearance frequency:
www.advancedwebranking.com
요기입니다.
페이지에 들어가면 이런 표가 나오는데, 이를 통해 태그들의 빈도를 알 수 있죠:).
저는 이 중 정말! 많이 쓰게 되는 태그들에 대해서 설명 드리려합니다.
우선 속성, 변수에 대한 개념이 없으시거나
<html> <head> <body> 에 대한 태그를 모른다면,
다음 게시물에 들어가 학습한 후 이 게시물을 봐주시면 됩니다:).
https://free-eunb.tistory.com/8
웹 기초) HTML개념과 태그
HTML(HyperText Markup Language) - 앞서 HTML, CSS, Javascripts에서 다루었듯이, html은 웹에 담기는 콘텐츠를 보여주는, 틀을 만드는 역할을 하고 있습니다. HTML을 영어 그대로 직역해보면, 아주 고도의 문서(..
free-eunb.tistory.com
이제 제가 html을 만들면서 거의 반드시! 사용했던 태그들에 대해 소개해드리겠습니다.
웹 기초의 의미로 보시고 있는 분이라면! 제가 bold 표시한 태그들만 주의 깊게 살펴보셔도 좋아요:>.
1. 문서의 정보를 알리는 <head>~</head> 안에 들어가는 태그
1. <title>
- <title>~</title> 안에는 문서의 제목을 쓸 수 있습니다. 브라우저 상단 제목표시줄(캡션)에 표시되어 집니다.
2. <meta>
- <meta />는 닫는 태그가 없는 태그로 속성만을 포함합니다.
페이지의 설명 요약, 페이지에서의 언어, 저작자 등 수많은 정보를 제공할 수 있습니다.
화면에는 표시되어 지지 않지만, 검색 엔진이나 브라우저에게 읽히게 됩니다.
보통 name 속성과 자주 쓰이는데, 변수(속성 값)로 author(저자명), keywords(문서에 대한 정보를 검색 엔진에 제공) 등을 받을 수 있습니다.
<meta name="author" content="자유로운 코끼리지롱" />이런 코드가 있다면 자유로운 코끼리지롱이라는 것이 저자명이라는 것을 알 수 있겠죠?
제가 자주 쓰는 속성은 charset이라는 속성인데,
가끔 HTML 파일을 작성했는데 웹에서 한글이 깨져보일 때가 있습니다.
이는 파일의 인코딩방식과 웹 브라우저의 인코딩 방식이 달라서 나타나는 오류입니다.
그럴 때 문서의 문자 부호화 방식을 지정해주는 charset을 사용해야 합니다.
<meta charset="UTF-8" />utf-8이 뭔지 등을 깊이있게 알 필요는 없습니다.
그저 이 코드가 html 파일을 utf-8 기반으로 인코딩을 해라는 의미구나! 정도만 느끼시면 됩니다.
습관적으로 head 파일에 넣어두면 좋습니다.
* 인코딩
현재 한국에서 사용되는 인코딩 방식은 크게 두가지로, euc-kr 방식과 UTF-8 방식이 있습니다.
euc-kr 방식은 원래 영어만을 고려한 1byte 길이의 ASCII 라는 인코딩 방식을 확장하여
한글을 사용할 수 있도록 만든 2byte 길이의 국가 언어 코드입니다.
국가 언어코드로, 우리나라에서만 쓸 수 있도록 만든 코드이며 세계 어디에서나 공통으로 사용되는 인코딩 방식이 아니기 때문에, 다른 언어를 사용하는 환경(외국 등)에서는 한글 페이지를 제대로 볼 수 없는 문제가 발생합니다.
이를 해결하기 위해 새로운 인코딩 방식이 개발되었는데, 그중 가장 보편화된 인코딩이 UTF-8입니다. (3byte)
예전에는 용량이 작은 euc-kr 방식을 선호하는 곳들도 많았으나, 현재는 용량 문제보다 표준화 및 글로벌 환경을 고려해야 하므로 UTF-8 인코딩 방식을 강력하게 권고하는 바입니다.
-출처: ofcourse
3. <link>
- <link />는 현재문서와 외부 문서를 연결시킬 때 사용합니다.
주로 html에 css파일 같은 스타일시트 파일이나, 웹에 있는 폰트를 사용하기 위해 사용되어집니다.
자세한 내용은 css를 할 때 추가로 설명하겠습니다.
<link rel="stylesheet" type="text/css" href="/file/style.css">
4. <script>
<script>~ </script>는 스크립트 언어를 사용할 때 이 태그 안 내용이 스크립트언어라는 걸 알려주기 위해 사용됩니다.
자바스크릅트 관련된 코드는 html과 같이 쓰여져 있으면 이해를 못하기 때문에 꼭 이 <script>태그 안에 적어주셔야해요. 나중에 하게 될 자바스크립트 코드를 이 태그 안에 적어주면 되는거죠:_.
저번 시간에 자바스크립트는 동적 언어라고 말씀드렸죠?
html, css 같은 경우는 한번 코드로 작성하면 화면에 어떤 변화도 주지 않지만,
자바스크립트는 내가 홈페이지에서 어떤 것을 했냐에 따라서 변화를 주는데요.
홈페이지에서 움직이는 것들은 대부분 자바스크립트로 인한 것이라고 보면 됩니다!
버튼을 누르면 알람이 뜨는 것을 예시로 들 수 있습니다.
<html>
<head>
<meta charset="UTF-8">
<script>
function button_click() {
alert("버튼을 누르셨습니다.");
}
</script>
</head>
<body>
안녕하세용:> 태그 없이도 쓸 수 있지롱
<input type="button" onclick="button_click();" value="클릭해주세요:)" />
</body>
</html>
더 자세한 내용은 자바스크립트를 할 때 추가로 설명하겠습니다.
2. 문서의 내용이 들어가는 <body>~</body> 안에 들어가는 태그
1. <h> 태그
- <h></h> 제목 태그로 다른 글자보다 조금 더 진하고 크게 표시가 되어집니다.
이 태그는 다른 태그들과는 다르게 h1~h6까지 있는데 h1이 제일 크고, h6이 제일 작습니다.
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>
2. <p>
- <p></p> 태그는 paragraph(문단)의 약자로 하나의 문단을 만들 때 쓰입니다.
<html>
<body>
<p>first</p>
<p>second</p>
</body>
</html>
3. <br>
- 닫는 태그가 없는 태그로, 줄을 바꾸어 주는 태그입니다.
<html>
<body>
<p>안녕 나는 지금 자료를 만들고 있지!<br>
지금은 5시 40분이야. <br>
오늘은 선거날!</p>
</body>
</html>
4. <img>
- <img> 이미지 삽입을 위한 태그로 빈요소(닫는 태그가 없는 태그)입니다.
이는 거의 반드시 src속성과 같이 쓰여져야 하는데,
src 속성은 source의 축약어로 이미지 파일의 위치를 정합니다.
이를 위해 vs 코드에 이미지를 넣어두어야겠죠?:)
<html>
<body>
<p>안녕 나는 지금 자료를 만들고 있지!</p>
<img src='img/puppy.jpg'>
</body>
</html>
5. <ul>/<ol> - <li>
- <ul></ul>,<ol></ol>,<li></li>목록을 만들 때 쓰는 태그 들입니다.
- <ul></ul>는 Unoerdered List 의 약자로 순서가 없는 목록입니다.
- <ol></ol>는 Ordered List 의 약자로 순서가 있는 목록입니다.
번호 형식으로 순서를 매겨 목록을 만드는 형식을 가지고 있습니다.
- <li></li>는 List Item 의 약자로 ul 태그와 ol 태그의 내부에서 사용되는 태그입니다.
실질적인 내용을 담고 있죠.
<html>
<body>
<ul>
<li>안녕</li>
<li>나는</li>
<li>코끼리야.</li>
</ul>
<ol>
<li>얼른</li>
<li>더더</li>
<li>커야지</li>
</ol>
</body>
</html>
6. <a>
- <a>~</a>는 태그 안 내용에 하이퍼 링크를 걸어주는 태그입니다.
이는 혼자만 사용되지 않고, href 속성과 함께 쓰여집니다.
이 속성은 hypertext reference의 약자로, 연결할 주소를 지정하는 속성입니다.
<html>
<body>
<a href="https://free-eunb.tistory.com/">눌러보시게</a>
</body>
</html>
저는 하이퍼링크에 제 블로그를 걸어,
눌러보시게를 클릭하면 제 블로그로 넘어오도록 하였습니다:>.
7. <div>와 <span> 태그 "영역 설정, 그룹 묶기"
- 이 둘을 묶은 이유는 둘 다 특정 부분의 내용을 그룹으로 묶게하는 기능을 하기 때문입니다.
둘은 h태그처럼 제목을 나타내거나 하는 등의 역할이 없습니다.
내용에 아무런 영향을 주지 않지만 내용끼리 묶고 싶을 때 사용하는 아이죠.
웹의 레이아웃 및 css를 할 때 유용하게 사용됩니다.
<div>
- division의 약자로 가상의 레이아웃을 설정합니다.
- 블록을 만들 때 주로 사용합니다(block) - 줄 바꿈이 됨.
<div>를 사용하여 만들게 되면, 그 줄 전체가 블록으로 인식되어 공간을 차지하기 때문에 줄바꿈이 되는 거죠.
- 사각형 박스 형태로 구역을 설정합니다.
<div style="background-color:red">span1</div>
<div style="background-color:blue">span2</div>
<div style="background-color:green">span3</div>
<span>
- 문장 단위로 구역을 설정합니다(inline) - 줄 바꿈이 되지 않음.
<span>은 내가 딱 품은 내용에 대해서만 공간을 차지하기 때문에 줄바꿈이 일어나지 않습니다.
<span style="background-color:red">span1</span>
<span style="background-color:blue">span2</span>
<span style="background-color:green">span3</span>
8. <form>
- <form></form> 태그는 사용자로부터 입력값을 받아 action에 적은 곳으로 데이터를 전달하는 태그입니다.
입력값을 받는 것으로는 흔히 input 태그가 쓰입니다.
9. <input>
- <input>은 닫는 태그(</input>)가 없는 태그로 사용자에게서 입력값을 받는 태그입니다.
input은 혼자서 쓰이지 않고 type이라는 속성과 같이 쓰이는데요.
이때 변수 값은 text, password, submit 등 다양한 친구들이 올 수 있습니다.
<form action="전송받을 대상">
아이디 : <input type="text" name="id">
비밀번호 : <input type="password" name="pw">
<input type="submit">
</form>
text는 내가 원하는 글을 담을 수 있는 것으로 앞으로 입력값을 받을 때 가장 많이 사용하게 될 친구입니다.
password는 우리가 흔히 쓰는 것으로 박스에 담긴 정보를 보이지 않게 처리해줍니다.
마지막으로 submit은 브라우저에서 버튼으로 표시됩니다. 이 버튼을 누르면 input 태그에 적은 내용이 form 태그의
action에 적힌 곳으로 데이터가 전송됩니다.
이때 submit버튼 안에 든 글자를 바꿔주고 싶으면 value 속성을 이용하여 바꿔줄 수 있습니다.
value 속성은 input 태그에 초기값을 설정하여 서버로 값을 넘겨주는 아이입니다.
<input type="submit" value="이름을 바꾸어보자">
10. <button>
- <button></button> 태그는 input 태그의 submit과 기능이 동일합니다.
다만 차이가 있다면 input은 type 속성에 submit을 넣어주어야 submit 기능을 수행하지만,
버튼의 경우 type에 따로 변수를 설정해주지 않을 때 자동으로 submit 기능을 수행한다는 것입니다.
<form action="전송받을 대상">
아이디 : <input type="text" name="id">
비밀번호 : <input type="password" name="pw">
<button>버튼태그로 만든 버튼</button>
</form>
또 input의 경우 css를 할 때 따로 id, clsss 값을 주어 꾸며줘야 하지만 button은 속성을 이용하여 꾸며줄 수 있습니다.
11. <table>
-<table></table> 태그는 표를 만드는 태그입니다.
이때 같이 쓰이는 태고 세 가지가 있는데,
<th>내용</th> table head, 표의 제목을 쓰는 역할,
<tr>내용</tr> table row, 가로줄을 만드는 역할,
<td>내용</td> table data, 셀에 데이터를 넣는 역할을 합니다.
<table border="1">
<th>순서</th>
<th>이름</th>
<tr>
<td>1</td>
<td>은비</td>
</tr>
<tr>
<td>2</td>
<td>은생</td>
</tr>
</table>
'개발 > Web(html_css)' 카테고리의 다른 글
| 프론트엔드? 백엔드? 차이 (0) | 2020.04.22 |
|---|---|
| CSS선택자 및 이용하는 방법 -style 속성, 태그, 파일 분리하기 (0) | 2020.04.19 |
| 웹 기초) HTML개념과 태그, 요소, 속성, 변수 (0) | 2020.04.11 |
| 웹 기초) HTML,CSS,Javascripts개념과 차이 (0) | 2020.04.11 |
| 웹 기초) 웹, 웹서버란? - 클라이언트와 서버의 개념 (0) | 2020.04.05 |
댓글