반응형
HTML 사용되는 태그 정리
1. <html>
: 웹페이지의 시작과 끝
웹페이지는 <html>로 시작해서 </html>로 끝난다.
<! doctype>은 문서 유형을 지정하는 것. 웹 브라우저가 페이지를 어떻게 해석해야 하는지 알려준다.
ex)<! doctype html> : 이 페이지를 html로 해석해라.
2. <head>
: 웹 페이지의 정보, 문서에서 사용할 외부 파일들을 링크할 때 사용
<title>, <meta>등이 들어간다.
3. <body>
: 브라우저에 실제 표시되는 내용
4. <title>
: 문서 제목
<title>안의 내용이 웹브라우저의 제목 표시줄에 표시된다.
페이지를 방문하는 방문자나 검색엔진은 제목 표시줄의 제목을 보고 내용을 예측하기 때문에 잘 써야 한다.
5. <meta>
: 문자 인코딩 및 문서 키워드, 요약 정보
ex)<meta charset="utf-8"> : 웹 페이지의 문자 인코딩 방식을 utf-8로 지정해라.
6. <div>
: 아무런 의미 없음. 컨텐츠들을 어떤 목적에 따라 묶어야 할 때 사용한다.
7. <span>
: 아무런 의미 없음. 컨텐츠들을 어떤 목적에 따라 묶어야 할 때 사용한다.
*** <div>와<span>의 차이 : 줄바꿈 차이
<div> : block level element (줄바꿈 O)
<span> : inline level element (줄바꿈 X)
display 속성을 사용해서 <div> 를 inline 으로 바꾼다던지 <span> 을 block 으로 바꾸는 것도 가능은 하다.
8. <a>
: anchor, 웹 페이지나 외부 사이트 연결
<a href="연결할 링크의 경로"> 내용 </a>
다른 문서나 사이트를 연결해 주는 것을 하이퍼링크(hyperlink), 또는 링크(link)라고 한다. 이 링크를 만들 때 <a>를 사용한다. 링크로 사용할 텍스트나 이미지를 <a>로 묶고 href(hypertext reference)속성을 이용해서 연결할 웹 페이지의 이름이나 웹사이트 주소를 지정하면 된다.
href="#"은 실제로 연결되지 않는, 링크역할만 하도록 만든 것, 널 링크(null link)라고 한다.
*<a>에서 사용할 수 있는 속성 값
1) target : 새 창 or 새 탭에서 링크를 열 때 사용
|
_blank
|
새로운 탭 or 창
|
|
_self
|
현재 탭 or 창
|
|
_parent
|
현재 화면을 불러낸 부모 탭 or 창, 없으면 현재 탭 or 창
|
|
_top
|
최상위 탭 or 창, 없으면 현재 탭 or 창
|
2) title : 링크의 툴팁을 표시(커서를 올렸을 때 나오는 설명)
<a href="연결할 페이지나 사이트 경로" title="링크 내용에 대한 설명">
3) id : 같은 페이지 안에서 이동할 때 사용
-
이동하고 싶은 위치마다 id 속성을 이용하여 앵커를 만든다(각각 다른 이름으로 지정해야 함.)<a id="앵커이름">내용</a>
-
이름 붙여놓은 앵커들을 다시 <a> 의 href 속성으로 연결.<a href="앵커이름">내용</a>
9. <script>
: 코드 삽입
실행 가능한 코드를 웹 페이지에 포함시키거나 참조하기 위해서 사용한다.
보통 Javascript 코드를 넣을 때 사용한다.
10. <link>
: 외부 파일을 연결할 때 사용한다.
ex) <link href="외부 CSS파일 경로" rel="stylesheet" type="text/css">
rel="stylesheet" 는 연결할 파일이 stylesheet 라는 의미
type="text/css" 는 스타일시트 코드가 텍스트 파일로 된 css 유형이라는 의미
* CSS 사용할 때 <link>와 <style>차이
: <link>는 외부 css 파일을 연결할 때, <style>은 css 설정을 같은 웹페이지 안에서 정의할 때 사용한다.( <head> 사이에 정의)
11. <img>
: 이미지 삽입
<img src="이미지 경로">
웹 페이지에 이미지를 넣을 때 사용한다. <img> 태그 하나당 1개의 이미지를 삽입할 수 있다.
inline 태그(앞뒤로 줄 바꿈 X), 반드시 src 속성(source)을 사용해서 이미지의 경로를 지정해야 한다.(2가지 방법)
-
이미지를 직접 다운로드한 뒤, 파일 경로를 삽입하는 방법
-
다른 웹페이지의 이미지 주소를 복사해서 삽입하는 방법
* img의 속성
|
width
|
너비
|
|
height
|
높이
|
|
alt
|
이미지를 설명해 주는 대체 텍스트 추가
|
|
title
|
툴팁(커서 올렸을때 설명 나오는 것)
|
|
usemap
|
이미지 맵(하나의 이미지에 여러기의 링크를 만드는 것)
|
12. <p>
: 단락
사용하면 내용 앞뒤로 빈 줄이 생기면서 단락이 생긴다. ( block level 태그)
13. <li>
: <ul>과 <ol>안에서 각 항목을 나열할 때 사용.
|
<ul>
|
<ol>
|
|
<ul>
<li> 내용 </li>
|
<ol [속성="속성 값"]>
<li> 내용 </li>
|
14. <ul>
: unordered list, 순서가 없는 list
순서가 없기 때문에 앞에 글자 앞에 ●같은 불릿이 붙는다 (css설정으로 없앨 수 있다. ex) list-style: none; )
+ <ol>
: olordered list, 순서가 있는 list
<ul>과 달리 앞에 기호가 아닌 숫자나 영문 순서가 들어간다.
<ul>과 달리 사용할 수 있는 속성들이 몇 가지 있다.
1) type
|
키워드
|
설명
|
|
1
|
숫자(default)
|
|
a
|
영어 소문자
|
|
A
|
영어 대문자
|
|
i
|
로마숫자 소문자
|
|
I
|
로마숫자 대문자
|
2) start : 중간부터 시작해야 할 때 이 속성을 사용한다.
3) reversed : 역순으로 할 때 사용한다.
15. <style>
: 스타일 정보를 정의할 때 사용하는 태그
<head>와 </head> 사이에 정의한다.
16. <br>
: 줄 바꿈
<br>태그가 삽입된 위치에서만 줄이 바뀐다. 닫는 태그 X
17. <hn>
: 제목
<h1>~<h6>까지 있다. <h1>이 글자가 제일 크고, <h6>으로 갈수록 크기가 작아진다.
다른 태그들을 사용해서 <hn>과 똑같아 보이게 만드는 방법도 있지만 <hn>를 사용한다는 것은 해당 내용이 제목이 된다는 "정보"를 주는 것이기 때문에 다른 내용과 구별해서 사용해야 한다.
18. <input>
: form의 요소중 하나. 사용자가 정보를 입력하는 부분을 만들어야 할 때 사용한다.
type에 따라 어떤 형식으로 정보를 받을지 결정된다. id 값을 통해 서로 구분할 수도 있다.
<input type="유형" 속성="속성값">
* <input>의 속성
|
readonly
|
읽기 전용 필드로 만들기
|
|
placeholder
|
힌트 표시(필드 클릭시 내용 사라짐)
|
|
autofocus
|
페이지를 불러오자 마자 특정 부분에 마우스 커서가 표시되도록 하는 것
|
|
autocomplete
|
자동완성 설정
|
|
max / min
|
<input> 필드의 최대값과 최소값 지정
|
|
maxLength
|
텍스트 필드에 최대로 입력할 수 있는 문자의 개수 지정
|
|
step
|
숫자의 간격 설정
<input> 이 date, datetime, datetime-local, month, week,time, number, range일 경우만 사용가능
|
|
required
|
필수 입력 필드 지정(빈칸이면 안 넘어감)
|
* <input>의 type속성에서 사용 가능한 유형
|
키워드
|
설명
|
|
hidden
|
서버로 보내는 값들을 보내는 필드(사용자에게는 보이지 X)
|
|
text
|
한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자
|
|
search
|
검색상자
|
|
tel
|
전화번호 입력 필드
|
|
url
|
URL 주소를 입력 필드
|
|
email
|
메일주소 입력 필드
|
|
password
|
비밀번호 입력 필드
|
|
number
|
숫자를 조절할 수 있는 화살표
|
|
range
|
숫자를 조절할 수 있는 슬라이드 막대
|
|
color
|
색상표
|
|
checkbox
|
체크박스 (2개이상 선택 가능)
|
|
radio
|
라디오 버튼 (1개만 선택 가능)
|
|
datetime
|
국제 표준시(UTC)로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)
|
|
datetime-local
|
사용자가 있는 지역을 기준으로 한 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)
|
|
date
|
사용자 지역을 기준으로 한 날짜(연, 월, 일)
|
|
month
|
사용자 지역을 기준으로 한 날짜(연, 월)
|
|
week
|
사용자 지역을 기준으로 한 날짜(연, 주)
|
|
time
|
사용자 지역을 기준으로 한 시간(시, 분, 초, 분할 초)
|
|
button
|
버튼
|
|
file
|
파일을 첨부할 수 있는 버튼
|
|
submit
|
서버전송 버튼
|
|
image
|
submit 버튼 대신 사용할 이미지
|
|
reset
|
리셋 버튼
|
19. <form>
: form 생성
form의 요소(<input>등..)가 여러 개일 경우 <ul>을 이용해서 묶어주기도 한다.
<fieldset>을 사용해서 form 요소들을 보기 쉽게 그룹으로 묶어줄 수도 있다.
<legend>는 <fieldset>으로 나누어진 구역에 제목을 붙일 때 사용한다.(필수옵션이 X, 생략 가능)
* Form 태그의 속성
|
method
|
전송 방식 선택
1) get : 256~4096 byte까지만 전송 가능
2) post : 입력 내용의 길이에 제한 X
|
|
name
|
form을 식별하기 위한 이름
|
|
action
|
form을 전송할 서버 쪽의 script 파일을 지정
( action 속성을 이용하지 않고 onsubmit 이벤트를 이용해서 script 로 처리할 수도 O)
|
|
target
|
action에서 지정한 script 파일을 현재 창이 아닌 다른 위치에 열도록 지정
|
20. <iframe>
: 외부 페이지 삽입
<iframe src="삽입할 페이지 주소" [속성="속성값"]> </iframe>
웹 페이지 안에 다른 웹 페이지를 삽입할 때 사용한다. 속성을 이용해서 원하는 형태로 표시 가능하다.
|
width
|
너비 (픽셀값)
|
|
height
|
높이 (픽셀값)
|
|
name
|
프레임의 이름
|
|
seamless
|
테두리 없애기, 속성값 없이 seamless라고 쓰면 된다.
|
|
src
|
프레임에 표시할 페이지의 주소를 지정
|
21. <nav>
: 문서 연결 링크
같은 사이트 안의 페이지나 다른 사이트의 페이지로 연결하는 링크를 말한다.
위치에 영향을 받지 않기 때문에 <header>나 <footer>, 또는 <aside> 에 포함시키거나 따로 사용할 수 있다.
22. <strong>
: 중요한 내용 강조
웹 페이지의 내용 중 강조하고 싶은 부분이 있을 때 사용한다.
* <strong>과 <p> / <em>과 <i>
<strong> : 내용의 강조를 위해 진하게 표시하는 경우 사용
<p> : 의미 없이 진하게 표시할 때
<em> : 내용의 강조를 위해 기울임 꼴로 표시하는 경우 사용
<i> : 의미 없이 기울임 꼴로 표시하는 경우
23. <footer>
: 제작 정보와 저작권 정보
+ <address>
: 사이트 제작자 정보, 연락처 정보
실제 우편 주소를 넣는 태그는 아니지만 웹사이트와 관련된 주소를 넣을 때 사용.
24. <header>
: 제목 지정
* <head>와 <header>는 다름!
<head> : <title>이나 <meta>등의 웹 페이지 정보가 들어감, 1번밖에 못씀.
<header> : 문서에서 여러 번 사용 가능
25. <button>
: 버튼
form 요소중 하나, 페이지에 버튼을 넣고 form을 전송하거나 reset 할 때 사용한다.
<input type="button">해서 만들어도 된다. (<button>은 컨텐츠를 포함할 수 있어서 시각적인 효과를 줄 수 있다.)
* <button>의 속성
|
submit
|
form 제출<button type="submit"> 전송 </button>
|
|
reset
|
from 리셋<button type="reset"> 다시쓰기 </button>
|
|
button
|
버튼의 형태만 만든다. 눌리거나 했을때 다른 동작을 하려면 따로 함수를 연결해야함
|
26. <i>
: italic, 기울임
<i>로 묶어진 내용을 기울임 꼴로 표시한다.
기타 Tag
■ 시멘틱 태그(semantic tag)
: 사람이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록(=의미가 통하는, semantic) 만든 태그들.
* Semantic Tag가 사용된 HTML의 문서 구조(사이트마다 상이)
헤더(header) : 사이트의 제목과 로고, 검색 창 등이 위치
콘텐츠(content) : 웹 페이지의 내용들이 위치
사이드 바(side bar) : 본문 외의 내용들이 위치
푸터(footer) : 저작권 정보와 제작자 정보 등이 위치
■ 주석
: 사람이 보기 위한 내용
웹 브라우저가 해석하지 않는 부분이다. 또한 해석되지 않기 때문에 웹 페이지에도 나오지 않는다.
* html의 주석 : <!-- 주석 내용 -->
* css의 주석 : /* 주석 내용 */
27. <b>
: bold, 진하게
<b>로 묶은 내용들을 굵게 표시한다.
28. <aside>
: 본문 이외의 내용
블로그 양 옆의 광고나 링크 같은 사이드 바를 표시할 때 사용한다.
필수요소가 아니기 때문에 필요한 경우에만 사용한다.
* <section>과 <article>의 차이
<section> : 맥락에 따라 주제별로 컨텐츠를 묶을 때 사용
<article> : 독립된 내용의 실제 컨텐츠 내용들을 넣을 때 사용
<article>은 실제 내용들이 들어가고 <section>은 header와 section, footer와 구분하기 위한 기능으로 사용
반응형
'프로그래밍_기타 언어' 카테고리의 다른 글
| 파이썬(python) init.py 파일 용도 (0) | 2024.08.29 |
|---|---|
| csv 파일을 excel, pdf 파일로 변환 - 파이썬 (0) | 2024.08.29 |
| HTML의 첫 시작에 필요한 내용 (0) | 2024.08.26 |
| django에서 사용하는 템플릿 태그 유형 (0) | 2024.05.18 |
| 파이썬(python) 내장 함수 (81) | 2024.05.18 |