1 HTML이란?
- Hyper Text Markup Language
- 웹 페이지를 생성하기 위한 표준 마크업 언어
- 웹 페이지의 구조 표현
- element로 구성
- element는 브라우저가 내용을 표현하는 방법에 대해 설명
- 대소문자 구분 X (소문자 사용 권장 - XHTML)
2 기본 형태
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
- <!DOCTYPE html>: HTML5 문서임을 정의
- <html>: HTML 페이지의 root element
- <head>: HTML 페이지의 메타 정보
- <title>: HTML 페이지의 제목 - 브라우저의 타이틀바 / 페이지탭에 표시
- <body>: 보이는 모든 내용 포함
- <h1>: 큰 제목
- <p>: 단락
3 웹 브라우저 목적
HTML 문서를 읽고 표시
HTML 태그를 사용하여 표시하는 방법을 결정
4 HTML 페이지 구조
<body>에 있는 그림에서의 흰 부분만 브라우저에 표시
5 HTML element
시작 태그, 내용, 끝 태그로 정의
<tagname>내용</tagname>
중첩 가능
* empty element: 내용이 없는 태그 ex ) <br>
<!DOCTYPE>
문서 종류, 모든 HTML 문서의 시작, 반드시 한 번
<head>
메타데이터, 표시 X
문서 제목, 문자 집합, 스타일, 스크립트, 다른 메타 정보 정의
<title>
텍스트만 사용 가능
브라우저 툴바에 표시되는 제목 정의
즐겨찾기 추가 시 제목
* 검색엔진최적화(SEO)에 중요 - 검색 엔진 알고리즘에 사용
<style>
HTML 페이지의 스타일 정보 정의
<link>
현재 문서와 외부 자원 간 관계 정의
외부 스타일 시트 연결 시 자주 사용
<meta>
문자 집합, 페이지 설명, 키워드, 저자, 뷰포트 지정하는데 사용
페이지에 표시되지는 않지만 브라우저, 검색 엔진, 다른 웹 서비스에 사용
<meta charset="UTF-8">
<meta name="keyword" content="HTML, web">
<meta name="description" content="HTML">
<meta name="author" content="orubt">
<meta http-dquiv="refresh" content="30">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
JavaScript를 정의할 때 사용
<base>
상대 URL의 타겟
반드시 href 속성 또는 target 속성
하나만 사용 가능( 2개 이상 사용 불가 )
<h1>-<h6>
제목
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
h1
h2
h3
h4
h5
h6
검색 엔진이 제목을 통해서 웹 페이지의 구조와 내용을 색인화
style 속성을 통해 크기 등 변경 가능하지만 권장 X
<p>
단락
<p>단락 내용</p>
단락 내용
항상 새로운 줄부터 시작
브라우저가 자동적으로 단락의 앞 뒤에 여백 추가
공백이나 줄바꿈 적용 X, 창 크기로 줄 수 결정
<hr>
구분선
<hr>
<br>
줄바꿈
<br>
<pre>
서식 지정 텍스트
단락 안에서의 줄바꿈, 공백 반영
<pre>
1
2
3
4
</pre>
1 2 3 4
<a>
링크
href 속성 사용
마우스를 링크 위로 옮기면 화살표가 손모양으로 바뀐다.
절대URL, 상대URL 모두 사용 가능
이미지 링크를 사용하는 경우 <a> element 내부에 <img> element 사용
<a href="https://orubt.tistory.com/">링크</a>
색상
- 방문 X: 파란색
- 방문 O: 보라색
- 활성화: 빨간색
target 속성
링크된 문서를 여는 곳 명시
- _self: default, 같은 창 또는 탭에 문서 열기
- _blank: 새 창 또는 탭에 문서 열기
- _parent
- _top
* self, parent, top를 구별하기 위해서는 frame 이라는 개념에 대한 이해가 필요해 보인다.
difference between _self, _top, and _parent in the anchor tag target attribute
종류
- mailto: 메일 전송
- cc: 참조 이메일 주소
- bcc: 숨은 참조 이메일 주소
- subject: 제목
- body: 내용
<a href="mailto:someone1@example.com, someone2@example.com, someone3@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=subject&body=body" target="_top">내용</a>
- button: JS 코드를 추가하여 구현
<button onclick="document.location='https://orubt.tistory.com/'" title="Home">버튼</button>
꾸미기
- link: 방문하지 않은 링크
- visited: 방문한 링크
- hover: 마우스가 링크 위에 있을 때
- active: 활성화
- color: 색상
- background-color: 배경색
- text-decoration: 효과 ( 밑줄)
북마크
id 속성과 #을 이용하여 구현
<a href="#p_tmp" title="Home">북마크</a>
<p id="p_tmp">북마크 이동</p>
북마크 이동
<img>
이미지
페이지에 삽입 X, 링크 O
empty element
움직이는 이미지 사용 가능
속성
- src: 소스 파일 경로
- alt: 대체 문구
- width, height: 너비, 폭, pixel 단위
- style
- width, height: 너비, 폭
- float: 정렬
* style 속성을 이용하는 것을 권장 - head 섹션의 style 오버라이드로 인한 크기 변경 방지
<img src="" alt="" width="128" height="128">
<img src="" alt="" style="width:128px;height:128px;">
map
이미지에 클릭할 수 있는 영역 선택
다수 지정 가능
자바스크립트 함수 트리거 가능
usemap 속성
<img> element에 추가
usemap의 값은 #으로 시작하여 이미지와 이미지맵 연결
area element
클릭할 수 있는 영역 지정
- shape
- rect: 직사각형
- circle: 원
- poly: 다각형
- default: 전체
- cord
- rect: 대각선 두 점의 x, y 좌표를 순서대로
- circle: 원의 중심 x, y 좌표와 반지름
- poly: 모든 점의 x, y좌표를 순서대로 (꼬임 없이)
배경 이미지
style 속성과 CSS의 background-image 속성 사용
<div style="background-image:url('')"></div>
head 섹션 안 style element에 추가 가능
<style>
div {
background-image: url('');
}
</style>
<!-- 전체 페이지에 넣고 싶을 때
<style>
body {
background-image: url('');
}
</style>
-->
- background-repeat: 반복 여부
- no-repeat: 반복 X
- background-size: 배경 크기
- cover: 전체
- 70% 80%: 가로 70% 세로 80%
- background-attachment: 스크롤에 따른 배경 이동
- fixed: 고정
picture element
브라우저가 가장 적합한 이미지 선택
1개 이상의 source element로 구성, 각 source element는 다른 media 속성과 srcset 속성
- media: 가장 적합한 크기
- srcset: 이미지
* 항상 picture element의 마지막에 img element를 추가
속성 값을 만족하는 첫 번째 source element 사용, 나머지 무시
<iframe>
웹 페이지 안에 웹 페이지를 띄울 때 사용
링크의 target frame으로 사용 가능
<iframe src="https://www.tistory.com/" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>
<p><a href="https://orubt.tistory.com/" target="iframe_a">블로그</a></p>
속성
- src: url
- width, height: 너비, 폭
- style: 속성
<code>
코드
공백과 줄바꿈을 적용시키기 위해 <pre> element 내부에 작성
<var>
변수나 수식 정의 시 사용
이태릭체 적용
<kbd>
키보드 입력을 정의할 때 사용
브라우저의 기본 monospace 폰트 적용
<samp>
컴퓨터 프로그램의 출력 샘플 정의
브라우저의 기본 monospace 폰트 적용
Block-Level & Inline
HTML element 기본 표시 값
Block-Level
새로운 줄에 full width 차지
종류
- address / article / aside
- blockquote
- canvas
- dd / div / dl / dt
- fieldset / figcaption / figure / footer / form
- h1-h6 / header / hr
- li
- main
- nav / noscript
- ol
- p / pre
- section
- table / tfoot
- ul
- video
div
블록을 스타일할 때 사용
style, class, id
Inline
같은 줄에 필요한 너비만 차지
종류
- a / abbr / acronym
- b / bdo / big / br / button
- cite / code
- dfn
- em
- i / img / input
- kbd
- label
- map
- object / output
- q
- samp / script / select / small / span / strong / sub / sup
- textarea / time / tt
- var
span
텍스트의 일부를 스타일할 때 사용
style, class, id
6 HTML 속성(Attribute)
HTML element에 대한 추가적인 정보 제공
시작 태그에 명세
이름과 값이 짝을 이루는 형태: <태그명 속성명="값">
값에 따옴표 권장 - XHTML, 공백 포함 시 필수
홀따옴표, 쌍따옴표 모두 사용 가능
lang
html 태그에 사용하여 웹 페이지 언어와 국가 설정
title
속성에 대한 추가정보, 툴팁
* cf ) title element
style
element에 스타일을 추가할 때 사용 (색, 폰트, 크기)
<태그명 style="속성:값;" <!-- 속성, 값은 CSS 속성과 값 -->
<p style="background-color:powderblue;">배경색</p>
<p style="color:blue;">글자색</p>
<p style="font-family:verdana;">폰트</p>
<p style="font-size:300%;">크기</p>
<p style="text-align:center;">정렬</p>
배경색
글자색
폰트
크기
정렬
class
HTML element에 대한 클래스를 지정하는데 사용
동일 클래스 공유 가능
head 섹션의 .(class_name)의 정의에 따라 적용
공백으로 구분하여 한 element에 여러 클래스 적용 가능
서로 다른 element가 같은 클래스 적용 가능
자바스크립트에서 특정 클래스 이름으로 element에 접근하거나 조작하기 위해 사용 가능
id
HTML element에 대해 유일한 id 지정 -> 동일 id 지정 불가
head 섹션에 #(id)의 정의에 따라 적용
자바스크립트에서 특정 id로 element에 접근하거나 조작하기 위해 사용 가능
북마크에 사용 북마크 설명
7 텍스트 형식
글꼴
<b>굵은 글자</b>
<strong>강조</strong>
<i>이태릭체</i>
<em>강조</em>
굵은 글자
강조
이태릭체
강조
What's the difference between <b> and <strong>, <i> and <em>?
효과
<small>작은 글자</small>
<mark>표시</mark>
<del>취소선</del>
<ins>삽입</ins>
<sup>위첨자</sup>
<sub>아래첨자</sub>
작은 글자
표시취소선
삽입
위첨자
아래첨자
인용
- blockquote: 다른 소스에서 인용된 섹션 정의, 들여 쓰기 처리
- q: 짧은 인용, 브라우저가 쌍따옴표 삽입
- cite: 작품명, 이태릭체 처리
- abbr: 약어
- address: 연락처, 이태릭체, 앞 뒤에 줄바꿈
- bdo: 텍스트 방향 재정의
- dir
주석
<!-- 내용 -->
표
<table>
id를 지정하고 head 섹션의 style에서 #id를 통해 설정 가능
tr:nth-child(even) 또는 tr:nth-child(odd)를 통해 홀, 짝수 행 적용 가능
- <tr>: 줄
- <th>: 헤더, 굵은 글씨, 가운데 정렬
- <td>: 칸, 왼쪽 정렬
- <caption>: 캡션, 반드시 <table> 태그 바로 뒤
설정
- border: 경계선
- 선 두께
- 선 모양
- 선 색
- border-collapse: 표의 테두리와 셀의 테두리 간 간격
- border-spacing: 칸 경계
- padding: 셀 내용과 칸 경계
- text-align: 정렬
- colspan="": 열 병합
- rowspan="": 행 병합
리스트
중첩 사용 가능
순서 없는 리스트
<ul> 태그로 시작 - unordered list
각 아이템은 <li> 태그로 시작
CSS 속성
- list-style-type: 아이템 마커 설정
- disc: 점(기본)
- circle: 원
- square: 정사각형
- none: 無
CSS를 사용한 수평 리스트
float CSS 속성 값을 left로 설정
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
순서 있는 리스트
<ol> 태그로 시작 - ordered list
각 아이템은 <li> 태그로 시작
CSS 속성
- type: 아이템 마커 설정
- 1: 숫자
- A: 대문자 알파벳
- a: 소문자 알파벳
- I: 대문자 로마 숫자
- i: 소문자 로마 숫자
- start: 시작 숫자
Description list
<dl> 태그로 시작 - description list
용어를 정의하는 <dt> 태그와 각 용어에 ㅐ한 설명에 해당하는 <dd> 태그가 짝을 이룬다.
8 CSS
Cascading Style Sheets - Cascading이라는 뜻 처럼 부모 요소에 적용된 스타일이 자식 요소에도 적용
웹 페이지의 레이아웃 형식을 지정하는 데 사용 (색상, 폰트, 크기, 간격, 배경 등)
여러 웹 페이지의 레이아웃을 동시에 제어 가능
Inline
한 HTML element에 스타일 적용 시 사용
HTML element의 style 속성 사용
<h1 style="color:blue;">파란 제목</h1>
파란 제목
Internal
한 HTML 페이지에 스타일 적용 시 사용
<head> 섹션의 <style> element에 정의
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
body 태그 내 모든 배경색은 powderblue, h1 태그는 파란색 글자, p 태그는 빨간색 글자 적용
External
여러 HTML 페이지에 스타일 적용 시 사용
외부 스타일 시트를 사용하여 <head> 섹션에 링크 추가
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
외부 style sheet은 HTML 코드를 포함하지 않고 .css 확장자로 저장
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
링크
rel
현재 문서와 외부 리소스 사이의 연관 관계
- alternate
- author: 해당 문서의 저자에 대한 링크
- dns-prefetch
- help: 도움말 문서에 대한 링크
- icon: 사용자 인터페이스에서 해당 문서를 나타낼 리소스
- license: 해당 문서의 저작권 정보에 대한 링크
- next: 연관된 문서들의 모음 중 다음 문서에 대한 링크
- pingback
- preconnect: 해당 리소스의 원본에 미리 연결
- prefetch: 해당 리소스를 미리 가져와 캐시
- preload
- prev: 연관된 문서들의 모음 중 이전 문서에 대한 링크
- search: 해당 문서 및 관련 페이지를 검색하는데 사용할 수 있는 리소스에 대한 링크
- stylesheet: stylesheet로 사용할 외부 리소스
href
절대 URL 또는 상대 URL
속성(Property)
- color: 글자색
- font-family: 글자체
- font-size: 글자 크기
<p style="color:red; font-family:courier; font-size:160%;">폰트</p>
<!--
<head>
<style>
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
-->
폰트
- border: 주변 경계
- padding: 글자와 경계선 사이의 간격
- margin: 경계선 외부 공간
<p style="border:2px solid powderblue; padding:30px; margin:50px;">경계1</p>
<p style="border:2px solid powderblue; padding:30px; margin:50px;">경계2</p>
<!--
<head>
<style>
p {
border: 2px solid powderblue;
padding: 30px;
margin: 50px;
}
</style>
</head>
-->
경계1
경계2
9 JavaScript
<script>
javascript와 같은 클라이언트 서버 스크립트를 정의할 때 사용
스크립트 선언문을 포함하거나 src 속성을 통해 외부 스크립트 파일 참조
이미지 조작, 양식 유효성 검사, 콘텐츠 동적 변경에 사용
HTML element를 선택하기 위해 가장 많이 사용하는 메서드 - document.getElementById( )
속성 수정 가능
- innerHTML: 내용 변화
- style
- fontSize: 글크기
- color: 글자색
- backgroundColor: 배경색
<noscript>
브라우저가 스크립트를 사용할 수 없거나 지원하지 않을 때 사용자에게 보여지는 대체 콘텐츠