<html>
: 웹 페이지의 시작과 끝
웹페이지는 <html>로 시작해서 </html>로 끝난다.
<!doctype>은 문서 유형을 지정하는 것. 웹 브라우저가 페이지를 어떻게 해석해야 하는지 알려준다.
ex) <!doctype html> : 이 페이지를 html로 해석해라.
<head>
: 웹 페이지의 정보, 문서에서 사용할 외부 파일들을 링크할 때 사용
<title>,<meta> 등이 들어간다.
<body>
: 브라우저에 실제 표시되는 내용
<title>
: 문서 제목
<title> 안의 내용이 웹 브라우저의 제목 표시줄에 표시된다.
페이지를 방문하는 방문자나 검색엔진은 제목표시줄의 제목을 보고 내용을 예측하기 때문에 잘 써야 한다.
<meta>
: 문자 인코딩 및 문서 키워드. 요약 정보
ex) <meta charset="utf-8"> : 웹 페이지의 문자 인코딩 방식을 utf-8로 지정해라.
<div>
: 아무런 의미 없다. 컨텐츠들을 어떤 목적에 따라 묶어야 할 때 사용한다.
블록 요소
<span>
: 아무런 의미 없다. 컨텐츠들을 어떤 목적에 따라 묶어야 할 때 사용한다.
인라인 요소
* <div> 와 <span>의 차이
<div> : block level element (줄 바꿈 o)
<span> : inline level element (줄 바꿈 x)
display 속성을 사용해서 <div>를 inline으로 바꾼다던지 <span>을 block으로 바꾸는 것도 가능은 하다.
<script>
: 코드 삽입
실행 가능한 코드를 웹 페이지에 포함시키거나 참조하기 위해서 사용한다.
보통 Javascript 코드를 넣을때 사용한다.
<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>사이에 정의)
<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 : 같은 페이지 안에서 이동할 때 사용
1. 이동하고 싶은 위치마다 id속성을 이용하여 앵커를 만든다.(각각 다른 이름으로 지정해야 한다.)
<a id="앵커 이름">내용</a>
2. 이름 붙여놓은 앵커들을 다시 <a>의 href속성으로 연결
<a href="앵커 이름">내용</a>
<img>
: 이미지 삽입
<img src="이미지 경로">
웹 페이지에 이미지를 넣을 때 사용한다. <img>태그 하나당 1개의 이미지를 삽입할 수 있다.
inline태그(앞 뒤로 줄 바꿈X), 반드시 src속성(source)을 사용해서 이미지의 경로를 지정해야 한다. (2가지 방법)
1. 이미지를 직접 다운로드 한 뒤, 파일경로를 삽입하는 방법
2. 다른 웹 페이지의 이미지 주소를 복사해서 삽입하는 방법
* img의 속성
width 너비
height 높이
alt 이미지를 설명해주는 대체 텍스트 추가
title 툴팁(커서 올렸을 때 설명 나오는 것)
usemap 이미지맵(하나의 이미지에 여러개의 링크를 만드는 것)
<p>
: 단락
사용하면 내용 앞 뒤로 빈줄이 생기면서 단락이 생긴다.(block level tag)
<pre>쓴대로 보여줌(잘 안씀)
<style>
: 스타일 정보를 정의할 때 사용하는 태그
<head>와</head>사이에 정의한다.
<br>
: 줄바꿈
<br>태그가 삽입된 위치에서만 줄이 바뀐다. (닫는 태그 X)
<li>
: <ul>과<ol>안에서 각 항목을 나열할 때 사용한다.
* <ul> * <ol>
<ul> <ol [속성="속성값"]>
<li>내용</li> <li>내용</li>
<li>내용</li> <li>내용</li>
</ul> </ol>
<ul>
: unordered list, 순서가 없는list
순서가 없기 때문에 글자 앞에 (●)같은 불릿이 붙는다.
(CSS 설정으로 없앨수 있다. ex) list-style:none;)
<ol>
: olordered list, 순서가 있는 list
<ul>과 달리 앞에 기호가 아닌 숫자나 영문 순서가 들어간다.
<ul>과 달리 사용할 수 있는 속성들이 몇가지 있다.
1) type
: 숫자(default), 영어 소문자, 영어 대문자, 로마 숫자 소문자, 로마 숫자 대문자
2) start
: 중간부터 시작해야 할 때 이 속성을 사용한다.
3) reversed
: 역순으로 할 때 사용한다.
<hn>
: 제목
<h1> ~ <h6>까지 있다. <h1>이 글자가 제일 크고, <h6>으로 갈수록 크기가 작아진다.
* ( h1 > h2 > h3 > h4 > h5 > h6 )
다른 태그들은 사용해서 <hn>과 똑같아 보이게 만드는 방법도 있지만 <hn>을 사용한다는 것은 해당 내용이 제목이 된다는 "정보"를 주는것이 때문에 다른 내용가 구별해서 사용해야한다.
<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 리셋 버튼
<form>
: form 생성
form의 요소(<input>등...)가 여러개일 경우 <ul>을 이용해서 묶어주기도 한다.
<fieldset>을 사용해서 form요소들을 보기 쉽게 그룹으로 묶어줄수도 있다.
<legend>는<fieldset>으로 나누어진 구역에 제목을 붙일 때 사용한다. (필수 옵션이X, 생략가능)
* form태그의 속성 | |
method | 전송 방식 선택 1) get : 256~4096 byte 까지만 전송 가능 2) post : 입력 내용의 길이에 제한이 없다. |
name | form을 식별하기 위한 이름 |
action | form을 전송할 서버쪽의 script파일을 지정 (action 속성을 이용하지 않고 onsubmit 이벤트를 이용해서 script로 처리할수도 있다.) |
target | action에서 지정한 script 파일을 현재창이 아닌 다른 위치에서 열도록 지정 |
<iframe>
: 외부 페이지 삽입
<iframe src="삽입할 페이지 주소" [속성]="속성값"></iframe>
웹 페이지 안에 다른 웹페이지를 삽입할 때 사용한다. 속성을 이용해서 원하는 형태로 표시 가능하다.
width | 너비 (픽셀 값) |
height | 높이 (픽셀 값) |
name | 프레임의 이름 |
seamless | 테두리 없애기, 속성값 없이 seamless라고 쓰면 된다. |
src | 프레임에 표시할 페이지의 주소를 지정 |
<iframe>으로 로드 되지 않는 사이트가 있다.
아마존, 네이버 등 대부분의 포탈 사이트를 <iframe> 태그로는 연결할 수 없도록 하고 있다. 이들 사이트는 Clickjacking이라고 부르는 웹 침입을 막기 위해 인라인 프레임에 출력되기를 거부하기 때문이다.
<nav>
: 문서 연결 링크
같은 사이트 안의 페이지나 다른 사이트의 페이지로 연결하는 링크를 만든다.
위치에 영향을 받지 않기 때문에 <header>나<footer>, 또는 <aside>에 포함시키거나 따로 사용할수 있다.
<strong>
: 중요한 내용 강조
웹 페이지의 내용중 강조하고 싶은 부분이 있을 때 사용한다.
* <strong>과<b> / <em>과<i>
<strong> : 내용의 강조를 위해 진하게 표시하는 경우 사용
<b> : 의미 없이 진하게 표시할 때
<em> : 내용의 강조를 위해 기울임 꼴로 표시하는 경우 사용
<i> : 의미 없이 기울임 꼴로 표시하는 경우
<footer>
: 제작 정보와 저작권 정보
<address>
: 사이트 제작자 정보, 연락처 정보
실제 우편 주소를 넣는 태그는 아니지만 웹 사이트와 관련된 주소를 넣을 때 사용
<i>
: italic, 기울임
<i>로 묶어진 내용을 기울임 꼴로 표시한다.
<header>
: 제목 지정
* <head>와<header>는 다르다.
<head> : <title>이나<meta>등의 웹 페이지 정보가 들어감. 1번만 쓸수있다.
<header> : 문서에서 여러번 사용 가능
<button>
: 버튼
form요소중 하나, 페이지에 버튼을 넣고 form을 전송하거나 reset할때 사용한다.
<input type="button"> 해서 만들어도 된다.
(<button>은 컨텐츠를 포함할수 있어서 시각적인 효과를 줄수있다.)
(아이콘을 추가한다거나 CSS를 설정할 수 있다.)
<button>의 type속성 | |
submit | form 제출 <button type="submit">전송하기</button> |
reset | form 리셋 <button type="reset">다시쓰기</button> |
button | 버튼의 형태만 만든다. 눌리거나 했을 때 다른 동작을 하려면 따로 함수를 연결해야 한다. |
<b>
: bold, 진하게
<b>로 묶은 내용들을 굵게 표시한다.
<aside>
: 본문 이외의 내용
블로그 양 옆의 광고나 링크 같은 사이드바를 표시할 때 사용한다.
필수요소가 아니기 때문에 필요한 경우에만 사용한다.
주석
: 사람이 보기 위한 내용
웹 브라우저가 해석하지 않는 부분이다. 또한 해석되지 않기 때문에 웹 페이지에도 나오지 않는다.
html의 주석 : <!--주석 내용-->
css의 주석 : /*주석 내용*/
<output>
: 결과 출력하기
화면에는 다르게 표시되지 않지만 <output>으로 묶인 부분이 일반 텍스트가 아닌 계산 결과값이라는 점을 웹 브라우저에게 알려줄 수 있다.
<progress>
: 진행 상태 보여주기
작업의 시작을 0으로 하고 최종완료를 최대값으로 하여 얼마나 진척되었는지 숫자로 표현해준다. (단위 X)
* <progress>의 속성 | |
value | 작업이 얼마나 진행되었는지 나타낸다. (부동소수점 사용) 0 <= 값 <= max 여야 한다. (max가 없을 경우 1.0보다 작아야한다.) |
max | 작업이 완료되려면 얼마나 많은 작업을 해야 하는지 부동 소수점으로 표현한다. (0 <= 값 이어야 한다.) |
<meter>
: 값이 차지하는 크기 표시
<progress>와 달리 전체 값에서 해당하는 값이 어느정도 차지하고 있는지를 표현한다.
* <meter>의 속성 | |
max/min | 범위의 최대값과 최소값 (default는 1과 0) |
value | 범위 안에서 차지하는 값 |
low | "이 정도면 낮다"라고 할 정도의 범위값 지정 |
high | "이 정도면 높다"라고 할 정도의 범위값 지정 |
optimum | "이 정도면 적당하다"라고 할 정도의 범위값 지정 |
<textarea>
: 텍스트 상자
게시글을 입력할때처럼 한줄이상의 문장을 입력해야할 때 주로 사용한다.
* <textarea>의 속성 | |
name | 텍스트 영역의 이름 지정 |
cols | 텍스트 영역의 가로너비를 문자 단위로 지정 |
rows | 텍스트 영역의 세로길이를 줄 단위로 지정 (지정한 숫자보다 줄 개수가 많아지면 스크롤 생성) |
<label>
: 폼에 캡션을 달 때 사용하는 태그
radio button이나 checkbox를 텍스트와 함께 <label>로 묶어주면 텍스트를 선택해도 button부분이 같이 선택되어 편리하게 만들수 있다.
CSS설정을 좀 더 세밀하게 하기 위해서 사용하기도 한다.
'Language > HTML' 카테고리의 다른 글
[HTML] HTML 기초 정리 (0) | 2022.09.13 |
---|---|
[HTML] HTML(Hyper Text Markup Language) Tag Sheet (0) | 2022.09.13 |
[HTML] HTML5의 기능 (0) | 2022.06.21 |
[HTML] HTML 기본 (0) | 2022.06.19 |
[HTML] HTML 기초 (0) | 2022.06.19 |