태그의 종류는 매우 다양하고 다 외울 수는 없기에
자주 사용되는 몇 가지의 태그에 대한 설명이 담긴 글입니다.
html 태그
모든 웹 페이지에는 해당 태그가 반드시 들어가야 하며 아래에서
설명하게될 모든 태그들은 html의 시작과 끝 태그 내에 존재해야 한다.
head 태그
대부분의 웹 브라우저의 화면상에는 나타나지 않지만
html에서 필요한 여러 정보들이 해당 태그 내에 들어간다.
- <meta> : 웹 페이지에 추가 정보를 붙이는 역할을 담당한다.
- 문자 인코딩 설정 : UTF-8 설정을 통해 다양한 언어의 문자를 제대로 표시
- 페이지 설명 : 검색 결과나 웹 브라우저에서 페이지를 요약 시 사용
(구글이 또는 네이버 검색 시 content의 설명이 보일 수 있다.)
- <title> : HTML 문서의 제목으로 사용된다.
- <style> : HTML 문서 내에서 CSS 스타일 규칙을 정의하는 데에 사용
(이름의 뜻대로 문서의 스타일(색상, 글꼴, 레이아웃 등)을 지정한다.)
1) body 태그 :
- 문서 전체 텍스트에 적용될 글꼴을 Arial 또는 sans-serif로 지정
- 문서의 배경 색상을 흰색 바탕으로 설정한다.2) H3 태그 : <h3> 태그의 텍스트 색상을 Blue 색상으로 지정한다.
3) p 태그 : <p> 태그의 텍스트 색상을 Yellow 색상으로 지정한다.
body 태그
사용자가 바라보는 웹 브라우저에 실질적으로 표시해주는 영역이고
body 태그 내에 여러가지 다양한 태그들을 사용해 화면을 구성할 수 있다.
(흰 바탕에 노란 글씨가 잘 보이지 않아 녹색으로 수정했습니다..)
div 태그
Division(나누다)의 약자로 레이아웃을 나누는 데에 사용되며
보통 여러가지 내용을 묶어서 표현해야 할 때 사용된다.
a 태그
Anchor의 약자로 다른 웹 페이지로 연결할 수 있게 해준다.
보통 "하이퍼링크"라고 생각하는 것이 이 태그를 사용하여 생성된다.a 태그 뒤에 href(hypertext reference) 속성을 이용하여 사용된다.
script 태그
HTML은 기본적으로 정적인 페이지이지만 script 코드를 사용하여
동적인 페이지로 사용할 수 있으며 JS 코드 사용을 위해 해당 태그를 사용한다.1. 스크립트 태그를 사용해 사이트 접속 시 알림 배너 띄우기
2. src(source) 속성을 사용하여 외부 스크립트 파일을 불러오기
img 태그
이미지를 삽입할 때 사용되는 속성이며 한 태그에 하나의 이미지를 넣을 수 있다.
(시작 태그만 사용하고 종료 태그는 사용하지 않는다.)src(이미지의 경로), width(이미지의 가로 너비)
span 태그
div와 비슷한 태그이지만 div와 동일하게 큰 의미가 없는 태그이며
div와의 차이점은 개행(자동 줄바꿈)을 하지 않는다는 것이다.아래의 웹에서 확인 시 다른 결과가 나오는 것을 확인할 수 있다.
p 태그
paragraph의 약자로 하나의 문단(단락)을 만들 때
사용되는 태그이며 시작 태그와 종료 태그를 사용한다.
br 태그
단순히 줄바꿈을 해주는 태그이며 종료 태그를 사용하지 않고
글을 작성하다가 줄 바꿈을 원하는 위치에 해당 태그를 사용한다.
li 태그
list의 약어로 반드시 ul(unorderd list), ol(ordered list) 태그와
함께 사용되는 태그이며 ul 또는 ol 내부에서 목록을 만드는 데에 사용된다.
- <ol> 태그와 사용 시 : 각 목록에 순번이 기입된다.
- <ul> 태그와 사용 시 : 각 목록에 순번 대신에 특수기호(●)가 붙는다.
h1, h2, h3, h4, h5, h6 태그
h1~6까지 heading 태그로 지원되며 숫자가 커질 수록 글자의 크기가 작아진다.
