1. HTML의 기본인 태그
안녕하세아!!
!!태그 모음만 보실 분은 3번으로 바로 가세요!!
저번 포스팅에서는 HTML의 기본인 태그에 대해서 글을 적었어요.
근데 우리가 모든 태깅을 외울 수는 없으니 태그 모음집을 만들어 놓고 참고할 수 있도록 만들어 놓으려고 해요.
요즘 세상에서는 HTML 태그가 무엇인지를 알고 있다면 모든 태그를 알고 있는 것과 다름이 없어요.
인터넷에서 1분도 안걸려서 찾을 수 있거든요.
하지만 하나하나 찾는것 보다 통계학적으로 가장 많이 사용되는 순으로 정리를 해두면 코딩 입문자에게는 도움이 될 거 같아서 정리해 놓으려고요.
2. 가장 많이 사용되는 태그
구글에서는 전 세계에 있는 웹페이지를 분석해서 결과를 공개했었는데 그 결과를 보기 좋게 잘 정리한 사이트가 있어요.
(완전 감사^^)
Advanced WEB Ranking이라는 사이트예요.
아래 그래프는 위 사이트에서 제공하는 그래프를 가지고 왔어요.
전 세계에 있는 웹페이지들이 몇 종류의 태그로 이루어져 있는지를 보여주는 그래프예요.
이에 따르면 모든 웹페이지는 평균적으로 32개의 태그로 이루어져 있네요.
(정확하게는 32개의 태그로 이루어져 있는 사이트가 제일 많은 거죠.)
지금 이 포스팅을 보는 여러분들은 몇 개의 태그를 알고 있나요?
저번 포스팅에서 언급한 태그는
- strong
- u
로 2가지예요. 웹페이지를 만들기 위한 태그 중 6%를 알고 있는 셈이죠 ㅎㅎㅎ
웹이 처음 세상에 나온 1990년에는 약 20개의 태그만 있었다고 하네요.
그중 몇몇 태그는 오늘날 사용되지 않는 태그라고 해요.
아래 그래프는 태그별 인기도예요.
통계를 보니 저는 딱 저기 32개 28개 태그만 정리하려고요.
(32개 요소라고 해 놓고 28개만 있네요 ㅇㅅㅇ;;)
전 개발자나 전문적으로 코딩을 하는 게 아닌 취미로 하는 코딩이니까요 ㅎㅎ
(효율적인 공부를 위해 ^^)
3. TOP 28 태그 모음
| <html> | HTML의 시작과 끝을 정의하는 태그 |
| <head> | HTML 문서의 머릿말 태그 |
| <body> | 본문의 시작을 알리는 태그 |
| <title> | 브라우저의 상태바에 나타낼 이름을 정의하는 태그 |
| <meta> | 해당 문서에 대한 정보인 메타데이터 정의하는 태그 |
| <div> | 가상의 레이아웃을 나누는데 주로 사용되며 주로 CSS와 연동 |
| <a> | 하이퍼링크를 걸어주는 태그 |
| <script> | 자바스크립트와 같은 클라이언트 사이드 스크립트를 정의하는 태그 |
| <link> | 해당 문서와 외부소스 사이의 관계를 정의하는 태그 |
| <img> | 이미지 삽입하는 태그 |
| <span> | <div>와 같이 특별한 기능은 없고 주로 CSS와 함께 사용되는 태그 |
| <p> | 줄바꿈 ; 단락을 나누는 태그 (br : 단순한 줄바꿈으로 단락이 나뉘지 않음) |
| <li> | 목록을 만드는 태그 |
| <ul> | 순서가 없는 HTML 리스트를 정의할때 사용되는 태그 |
| <style> | 해당 HTML 문서의 스타일 정보를 정의하는 태그 |
| <br> | 줄바꿈 하는 태그로서 단락이 나뉘지는 않음, 종료 태그가 존재하지 않음. |
| <h2> | HTML 단락의 제목으로 지정(숫자가 작을 수록 글짜가 크다.) |
| <input> | 사용자로부터 입력을 받을수있는 입력필드를 정의하는 태그 |
| <h1> | HTML 단락의 제목으로 지정(숫자가 작을 수록 글짜가 크다.) |
| <form> | 웹 페이지의 입력 양식을 의미(로그인 창이나 회원가입 폼 등) |
| <h3> | HTML 단락의 제목으로 지정(숫자가 작을 수록 글짜가 크다.) |
| <nav> | 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크의 집합을 정의하는 태그 |
| <footer> | 문서나 특정 섹션의 푸터를 정의함 |
| <header> | 문서나 특정 섹션의 헤더를 정의함 |
| <iframe> | 인라인 프레임(inline frame)을 정의하는 태그 |
| <button> | 클릭할수 있는 버튼을 정의할 때 사용하는 태그 |
| <strong> | 글짜를 Bold체로 변경 |
| <i> | 글짜를 Italic체로 변경 |
오늘도 취미로 공부하는 코딩!
꾸준히 공부하는 게 중요하긴 한데 공부라고 하니 하기 싫은 경향이.....ㅋㅋㅋ
하지만 취미생활이라 생각하고 꾸준히 포스팅할게요.
'인터넷 ,사물 인터넷 > 취미로하는 코딩' 카테고리의 다른 글
| HTML 기본 문법 - 태그(Tag) (86) | 2023.06.22 |
|---|---|
| 코딩 실습 환경 만들기 - HTML 적용해보기 (26) | 2023.06.21 |
| 코딩의 기초 - 웹? 인터넷? : HTML 시작 (43) | 2023.06.04 |
| 코딩의 시작 - 코딩이란? (49) | 2023.05.30 |
