- Markup 마크업 언어: 태그 등을 이용한 프로그래밍 언어 ex) HTML, XML
- Markdown 마크다운 언어: Readme.md 파일 등
1. <head>
: 웹 페이지의 정보, 문서에서 사용할 외부 파일들을 링크할 때 사용
<title>, <meta>등이 들어간다.
2. <body>
: 브라우저에 실제 표시되는 내용
3. <meta>
: 문자 인코딩 및 문서 키워드, 요약 정보
ex)<meta charset="utf-8"> : 웹 페이지의 문자 인코딩 방식을 utf-8로 지정해라.
4. <div>
: 아무런 의미 X, 컨텐츠들을 어떤 목적에 따라 묶어야 할 때 사용한다. (줄 바꿈 O)
5. <span>
: 아무런 의미 X, 컨텐츠들을 어떤 목적에 따라 묶어야 할 때 사용한다. (줄 바꿈 X)
6. <a>
: anchor, 웹 페이지나 외부 사이트 연결
<a href="연결할 링크의 경로"> 내용 </a>
href="#"은 실제로 연결되지 않는, 링크역할만 하도록 만든 것, 널 링크(null link)라고 한다.
* <a>에서 사용할 수 있는 속성 값
1) target : 새 창 or 새 탭에서 링크를 열 때 사용
_blank 새로운 탭 or 창
_self 현재 탭 or 창
_parent 현재 화면을 불러낸 부모 탭 or 창, 없으면 현재 탭 or 창
_top 최상위 탭 or 창, 없으면 현재 탭 or 창
ex) <a href=https://cj.cj.net" target="_blank">CJ World 바로가기</a>
2) title : 링크의 툴팁을 표시(커서를 올렸을 때 나오는 설명)
<a href="연결할 페이지나 사이트 경로" title="링크 내용에 대한 설명">
3) id : 같은 페이지 안에서 이동할 때 사용
이동하고 싶은 위치마다 id 속성을 이용하여 앵커를 만든다(각각 다른 이름으로 지정해야 함)
<a id="앵커이름">내용</a>
이름 붙여놓은 앵커들을 다시 <a> 의 href 속성으로 연결.
<a href="앵커이름">내용</a>
7. <script>
: 코드 삽입
실행 가능한 코드를 웹 페이지에 포함시키거나 참조하기 위해서 사용 (Javascript 코드)
8. <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> 사이에 정의)
9. <img>
: 이미지 삽입
<img src="이미지 경로">
웹 페이지에 이미지를 넣을 때 사용한다.
<img> 태그 하나당 1개의 이미지 삽입
* img의 속성
width 너비
height 높이
alt 이미지를 설명해 주는 대체 텍스트 추가
title 툴팁(커서 올렸을때 설명 나오는 것)
usemap 이미지 맵(하나의 이미지에 여러기의 링크를 만드는 것)
10. <p>
: 단락
사용하면 내용 앞뒤로 빈 줄이 생기면서 단락이 생긴다. (block level 태그)
11. <li>
: <ul>과 <ol>안에서 각 항목을 나열할 때 사용.
<ul>
<li> 내용 </li>
<li> 내용 </li>
</ul>
<ol [속성="속성 값"]>
<li> 내용 </li>
<li> 내용 </li>
</ol>
12. <ul>
: unordered list, 순서가 없는 list
순서가 없기 때문에 앞에 글자 앞에 ●같은 불릿이 붙는다
(css설정으로 없앨 수 있다. ex) list-style: none; )
+ <ol>
: ordered list, 순서가 있는 list
<ul>과 달리 앞에 기호가 아닌 숫자나 영문 순서가 들어감.
* ol 태그 속성
1) type
키워드 설명
1 숫자(default)
a 영어 소문자
A 영어 대문자
i 로마숫자 소문자
I 로마숫자 대문자
2) start : 중간부터 시작해야 할 때 이 속성을 사용한다.
3) reversed : 역순으로 할 때 사용한다.
13. <style>
: 스타일 정보를 정의할 때 사용하는 태그
<head>와 </head> 사이에 정의
외부 CSS를 사용하는 경우 -> <link> 태그
14. <h[n]>
: 제목
<h1>~<h6> <h1>이 글자가 제일 크고, <h6>으로 갈수록 크기가 작아짐
15. <input>
: form의 요소중 하나. 사용자가 정보를 입력하는 부분을 만들어야 할 때 사용
<input type="유형" id="고유아이디" 속성="속성값">
* <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 리셋 버튼
16. <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 파일을 현재 창이 아닌 다른 위치에 열도록 지정
17. <iframe>
: 웹 페이지 안에 다른 외부 웹 페이지를 삽입할 때 사용
<iframe src="삽입할 페이지 주소" [속성="속성값"]> </iframe>
* 속성
width 너비 (픽셀값)
height 높이 (픽셀값)
name 프레임의 이름
seamless 테두리 없애기, 속성값 없이 seamless라고 쓰면 된다.
src 프레임에 표시할 페이지의 주소를 지정
18. <nav>
: 문서 연결 링크
같은 사이트 안의 페이지나 다른 사이트의 페이지로 연결하는 링크
위치에 영향을 받지 않기 때문에 <header>나 <footer>, 또는 <aside> 에 포함시키거나 따로 사용할 수 있음
19. <strong>
: 웹 페이지의 내용 중 강조하고 싶은 중요한 부분이 있을 때 사용
20. <footer>
: 제작 정보와 저작권 정보
+ <address>
: 사이트 제작자 정보, 연락처 정보
실제 우편 주소를 넣는 태그는 아니지만 웹사이트와 관련된 주소를 넣을 때 사용.
21. <header>
: 제목 지정
* <head>와 <header>는 다름!
<head> : <title>이나 <meta>등의 웹 페이지 정보가 들어감, 1번밖에 못씀.
<header> : 문서에서 여러 번 사용 가능
22. <button>
: 버튼
form 요소중 하나, 페이지에 버튼을 넣고 form을 전송하거나 reset 할 때 사용
<input type="button"> 이렇게 사용해도 가능
* <button>의 속성
submit
form 제출 (요청이 넘어감)
<button type="submit">전송</button>
reset
form 리셋
<button type="reset">다시쓰기</button>
23. <i>
: italic, 기울임
<i>로 묶어진 내용을 기울임 꼴로 표시
24. <b>
: bold, 볼드체로 진하게 표시
25. <aside>
: 본문 이외의 내용
블로그 양 옆의 광고나 링크 같은 사이드 바를 표시할 때 사용
* <section>과 <article>의 차이
<section> : 맥락에 따라 주제별로 컨텐츠를 묶을 때 사용
<article> : 독립된 내용의 실제 컨텐츠 내용들을 넣을 때 사용
<article>은 실제 내용들이 들어가고 <section>은 header와 section, footer와 구분하기 위한 기능으로 사용
BE Developer