HTML | 구조 및 태그 총정리
개요
html은 웹을 구성하는 뼈대 역할을 맡고 있습니다. 우리의 몸을 비유하자면 HTML은 뼈대, CSS는 피부, JavaScript는 뇌 혹은 장기로 비유할 수 있어요. HTML은 태그로 이루어져 있습니다.
<html>
내용입니다
</html>처음 시작하는 태그는 <html> 이라는 태그인데요, <html> 은 여는 태그, </html>은 닫는 태그로 생각할 수 있습니다. 이 외에도 태그의 종류는 여러가지가 있는데요, 모두 외울 필요 없이 사용하다보면 자연스레 이해하게 되니 부담가지실 필요는 없습니다.
시맨틱 태그
우리가 식별하기 유리하도록 만든 것이 시맨틱 태그입니다. 그만큼 종류도 아주 많이 있습니다. 그러나 모든 것을 기억할 필요는 없습니다. 핵심정보만 이해하고, 나중에 필요할 때 MDN 과 같은 메뉴얼에서 찾아 쓰는 것을 권장합니다.
아래 내용은 정말로 많이 사용하는 태그 위주로 정리해보았습니다
필수 태그
| <html> 태그 | 가장 큰 틀이 되는 태그 |
| <head> 태그 | 외부 노출되는 <meta> 태그, 제목을 지정하는 <title> 태그 등 기본적인 세팅을 담는 태그 |
| <header> 태그 | 외부 노출되는 상단 바 영역 |
| <nav> 태그 | 외부 노출되는 메뉴 영역 |
| <body> 태그 | 외부 노출되는 바디 영역 |
| <footer> 태그 | html 문서의 맨 끝을 알리는 영역 |
사이트를 구성하는데 중요한 태그들입니다. 특히나 검색엔진최적화(SEO) 를 중요하게 생각하고 있다면 전체적인 약속을 잘 구성해 놓아야 로봇들이 잘 이해하고 노출 점수에 긍정적인 영향을 미치게 됩니다.
특히나 meta 태그의 경우는 실제로 외부에 노출되는 가장 두드러지는 정보들이니 잘 정리하여 상위 노출에 유리하도록 꾸미는 것이 좋습니다.
글자 위주 정리
| h1 ~ h6 태그 | <h1></h1> | 약속된 폰트 크기로 노출 (h1부터 큰 순서) |
| p 태그 | <p>라딩</p> | 기본 구문 폰트크기로 노출 |
| a 태그 | <a href=””>라딩</a> | 링크 추가에 최적화 된 태그 |
| br 태그 | <br> | 줄 건너뛰기 |
| hr 태그 | <hr> | 구분선(선긋기) 태그 |
기본적으로 많이 활용되고 있는 텍스트 에디팅에 최적화 된 태그들입니다.
h1~h6 태그
웹에서 재활용을 할 수 있도록 암묵적인 약속을 한 태그들입니다.
h1 : 제목
문서를 제작할 때 H1은 해당 문서에 하나만 사용되어야 합니다. 개수가 많아질 경우 SEO 노출에 영향이 갈 수 있습니다.
h2 : 소주제
현재 읽고계신 문서도 소주제를 위주로 정리하고 있습니다. H1 다음으로 중요한 역할을 가지고 있습니다.
h3 ~ h6 : 일반 내용
단순 SEO에서의 중요도는 떨어지지만, 적절하게 활용한다면 가독성에 유리하여 페이지 지속시간이 길어질 수 있습니다.
a 태그
해당 부분에 링크를 연결하는 역할을 가지고 있습니다. 이미지에 링크를 연결하려면 a 태그를 활용해야 합니다
새 창으로 링크를 열 필요가 있다면 target=”_blank” 속성을 추가해주면 됩니다
| b, bold, strong 태그 | <bold></bold> , <b></b> | 글자에 두께를 조절하는 태그 |
| i, address, cite 태그 | <i></i> , <address></address> , <cite> | 글자에 기울기를 조절하는 태그 |
| code 태그 | <code></code> | 글자를 식별하기 위한 코드 |
글자의 가독성을 추가하는 태그들입니다. 문장을 읽는 데 중요한 역할을 하기 때문에 CSS를 적시적소에 잘 배치하는 것을 권장합니다
특수 태그
| table , tr td 태그 | 표를 만드는 태그 |
| iframe 태그 | 해당 링크의 웹 브라우저를 불러오는 태그 |
| img 태그 | 이미지를 불러오는 태그 |
| ul ol , li dl , dt dd 태그 | 목록을 만드는 태그 |
특수한 기능을 가지고 있는 태그들입니다
table 태그
이 태그는 표를 노출 시키는 태그입니다. 주의해야 할 사항은 디자인을 표현하는데 사용하지 않고, 원래 목적(데이터 노출) 에 맞추어 활용해야 합니다. 이유는 영역을 잡는 용도로 테이블을 활용하면 웹 표준성에 어긋나기 때문입니다.
분명 테이블 태그로 영역을 잡으면 쉽고 강력하게 코드를 만들 수 있지만, 옳은 방법은 아니기에 원래의 목적에 맞는 표의 목적에 맞추어 활용하는 것을 권장합니다.
img 태그
이미지를 노출시키는데 사용되는 태그입니다. 이미지가 늘어나거나 줄어드는 등 이미지 영역 잡기에 불리한 경우가 있어, 이 경우는 <img> 태그를 활용하지 않고 <div> 태그에 background-image 를 활용하여 이미지 노출을 대체하는 방법을 사용하기도 합니다.
목록 태그
이 태그는 우리가 아는 메뉴 구성을 만들 째 자주 사용하는 태그입니다. 현재 사이트의 메뉴도 ul ol 태그로 이루어져 있습니다
커스터마이징 가능한 태그
| div 태그 | 해당 영역에 만드는 아무 것도 없는 태그 |
| container 태그 | 컨테이너처럼 해당 영역에 만드는 아 것도 없는 태그 |
| section 태그 | 섹션처럼 해당 영역에 만드는 아 것도 없는 태그 |
| aside 태그 | 사이드 영역을 가리키는 아무 것도 없는 태그 |
식별하기 용이하도록 이름이 붙여져 있고, 실제로 어떻게 써도 큰 문제는 없지만 기본적으로 상위 개체를 이해하고 순서를 매겨가며 작업하는 것을 권장합니다. 보통은 container 태그 아래에는 div 태그, 또 div 태그를 두는 편입니다.
클래스 지정
<style>
.hello {
color : #eee;
}
</style>
<div class="hello">
안녕하세요
</div>저는 방금 hello 라는 클래스명을 가진 div 태그를 만들었어요. 이 방법을 활용하게 되면, .hello 라는 명령어를 이용하여 CSS 를 지정할 수 있게 되는데요, 이제 hello 라는 클래스를 자유자재로 다룰 수 있게 됩니다.
ID 지정
<style>
#hello {
color : #eee;
}
</style>
<div id="hello">
안녕하세요
</div>다음은 ID 입니다. 위의 방법과 완전히 동일한 방법으로 ID를 지정해 보았습니다. 서로 차이점은 크게 두가지가 있는데요,
- id가 class 보다 우선 적용이 됩니다.
- CSS 지정할 때 . 이 아닌, #으로 지정하게 됩니다
div 에 비해 권한이 강력한 편이기에 큰 일이 없지 않는 이상 태그 지정을 div 활용하는 것을 권장하고 있습니다.