HTML & CSS

03. HTML 기본 문서 만들기

태그 설명
<!DOCTYPE html> HTML5 문서임을 선언
<html> HTML 문서의 시작과 끝을 나타냄
<head> HTML 문서의 정보를 나타냄
<meta> HTML 문서의 정보를 나타냄
<title> HTML 문서의 제목을 나타냄
<body> HTML 문서의 본문을 나타냄
<header> HTML 문서의 머리말을 나타냄
<nav> HTML 문서의 네비게이션을 나타냄
<main> HTML 문서의 주요 콘텐츠를 나타냄
<section> HTML 문서의 섹션을 나타냄
<article> HTML 문서의 글을 나타냄
<aside> HTML 문서의 별도 콘텐츠를 나타냄
<footer> HTML 문서의 꼬리말을 나타냄
<div> HTML 문서의 영역을 나타냄

목차로 돌아가기

04. 웹 문서에 다양한 내용 입력하기

04-1. 텍스트 관련 태그

태그 설명
<h1>~<h6> 제목을 나타내는 태그
<p> 문단을 나타내는 태그
<br> 줄바꿈을 나타내는 태그
<hr> 수평선을 나타내는 태그
<blockquote> 긴 인용문을 나타내는 태그
<q> 짧은 인용문을 나타내는 태그
<pre> 서식이 미리 지정된 텍스트를 나타내는 태그
<code> 코드를 표시하는 태그
<b> 굵은 글씨로 표시하는 태그
<strong> 강한 강조하는 효과를 나타내는 태그
<i> 이탤릭체로 표시하는 태그
<em> 강조하는 효과를 나타내는 태그
<sub> 아래 첨자로 표시하는 태그
<sup> 위 첨자로 표시하는 태그
<del> 취소선을 표시하는 태그
<ins> 밑줄을 표시하는 태그
   
<u> 밑줄을 표시하는 태그
<mark> 형광펜 효과를 나타내는 태그
<small> 작은 글씨로 표시하는 태그
<kbd> 키보드 입력을 표시하는 태그
<samp> 샘플 출력을 표시하는 태그
<var> 변수를 표시하는 태그
<abbr> 약어를 표시하는 태그
<address> 주소를 표시하는 태그
<cite> 인용문의 제목을 표시하는 태그
<bdo> 텍스트의 방향을 지정하는 태그
<span> 텍스트의 일부분을 지정하는 태그
<dfn> 정의를 나타내는 태그
<time> 시간을 나타내는 태그

04-2. 목록 관련 태그

태그 설명
<ul> 순서가 없는 목록을 나타내는 태그
<ol> 순서가 있는 목록을 나타내는 태그
<li> 목록의 항목을 나타내는 태그
<dl> 설명 목록을 나타내는 태그
<dt> 설명 목록의 제목을 나타내는 태그
<dd> 설명 목록의 설명을 나타내는 태그
   
<menu> 메뉴 목록을 나타내는 태그
<menuitem> 메뉴 목록의 항목을 나타내는 태그
<dir> 폴더 목록을 나타내는 태그

04-3. 표 관련 태그

태그 설명
<table> 표를 나타내는 태그
<caption> 표의 제목을 나타내는 태그
<thead> 표의 머리말을 나타내는 태그
<tbody> 표의 본문을 나타내는 태그
<tfoot> 표의 꼬리말을 나타내는 태그
<tr> 표의 행을 나타내는 태그
<th> 표의 제목 셀을 나타내는 태그
<td> 표의 일반 셀을 나타내는 태그
<colgroup> 표의 열을 그룹으로 나타내는 태그
<col> 표의 열을 나타내는 태그

04-4. 멀티미디어 관련 태그

태그 설명
<img> 이미지를 나타내는 태그
<figure> 독립적인 콘텐츠를 나타내는 태그
<figcaption> 독립적인 콘텐츠의 제목을 나타내는
<audio> 오디오 콘텐츠를 나타내는 태그
<video> 비디오 콘텐츠를 나타내는 태그
<embed> 외부 문서를 삽입하는 태그
<object> 외부 문서를 삽입하는 태그
<iframe> 외부 문서를 삽입하는 태그
   
<source> 미디어 콘텐츠의 URL을 지정하는 태그
<track> 미디어 콘텐츠의 자막을 지정하는 태그
<param> 외부 문서를 삽입하는 태그
<canvas> 그래픽을 그리는 태그
<map> 이미지 맵을 나타내는 태그
<area> 이미지 맵의 영역을 나타내는 태그

목차로 돌아가기

05. 입력 양식 작성하기

05-1. 폼에서 사용하는 태그

태그 설명
<form> 폼을 나타내는 태그
<fieldset> 폼의 그룹을 나타내는 태그
<legend> 폼의 제목을 나타내는 태그
<label> 폼의 입력 항목의 설명을 나타내는
<input> 폼의 입력 항목을 나타내는 태그
<button> 버튼을 나타내는 태그
<select> 드롭다운 목록을 나타내는 태그
<optgroup> 드롭다운 목록의 그룹을 나타내는
<option> 드롭다운 목록의 항목을 나타내는
<textarea> 여러 줄의 텍스트를 입력하는 태그
<datalist> 드롭다운 목록의 항목을 나타내는
   
<output> 계산 결과를 나타내는 태그
<progress> 진행 상태를 나타내는 태그
<meter> 측정 결과를 나타내는 태그
<keygen> 키 쌍을 생성하는 태그

05-2. <input> 태그의 type 속성

속성값 설명
text 한 줄의 텍스트를 입력하는 텍스트 상자를 나타냄
email 이메일 주소를 입력하는 이메일 주소 입력 상자를 나타냄
password 한 줄의 텍스트를 입력하는 텍스트 상자를 나타냄 (입력한 텍스트가 보이지 않음)
url URL을 입력하는 URL 입력 상자를 나타냄
tel 전화번호를 입력하는 전화번호 입력 상자를 나타냄
search 검색어를 입력하는 검색어 입력 상자를 나타냄
file 파일을 선택하는 파일 선택 상자를 나타냄
radio 여러 개의 항목 중에서 하나의 항목을 선택하는 라디오 버튼을 나타냄
checkbox 여러 개의 항목 중에서 여러 개의 항목을 선택하는 체크 박스를 나타냄
number 숫자를 입력하는 숫자 입력 상자를 나타냄
range 숫자를 입력하는 숫자 입력 상자를 나타냄 (슬라이더 형태)
submit 폼을 전송하는 버튼을 나타냄
reset 폼의 입력 항목을 초기화하는 버튼을 나타냄
button 버튼을 나타냄
image 이미지를 나타내는 버튼을 나타냄
hidden 숨겨진 입력 항목을 나타냄
color 색상을 선택하는 색상 선택 상자를 나타냄
date 날짜를 선택하는 날짜 선택 상자를 나타냄
datetime 날짜와 시간을 선택하는 날짜와 시간 선택 상자를 나타냄
datetime-local 날짜와 시간을 선택하는 날짜와 시간 선택 상자를 나타냄 (시간대를 표시하지 않음)
month 날짜를 선택하는 날짜 선택 상자를 나타냄 (연도와 월만 표시)
week 날짜를 선택하는 날짜 선택 상자를 나타냄 (연도와 주만 표시)
time 시간을 선택하는 시간 선택 상자를 나타냄

05-3. <input> 태그의 속성

속성 설명
autofocus 페이지가 로드될 때 입력 항목에 자동으로 포커스를 지정함
checked 라디오 버튼이나 체크 박스의 기본 선택 상태를 지정함
disabled 입력 항목을 비활성화함
placeholder 입력 항목에 입력할 내용을 지정함
height 이미지의 높이를 지정함
width 이미지의 너비를 지정함
list 입력 항목의 자동 완성 기능을 사용할 때 사용할 목록을 지정함
max 입력 항목의 최대값을 지정함
maxlength 입력 항목에 입력할 수 있는 최대 문자 수를 지정함
min 입력 항목의 최소값을 지정함
minlength 입력 항목에 입력할 수 있는 최소 문자 수를 지정함
multiple 파일 선택 상자에서 여러 개의 파일을 선택할 수 있도록 함
name 입력 항목의 이름을 지정함
readonly 입력 항목을 읽기 전용으로 지정함
required 입력 항목을 필수 입력 항목으로 지정함
size 입력 항목의 크기를 지정함
src 이미지의 URL을 지정함
step 입력 항목의 증감 단위를 지정함
value 입력 항목의 기본값을 지정함
   
accept 파일 선택 상자에서 선택할 수 있는 파일의 종류를 지정함
alt 이미지의 대체 텍스트를 지정함
autocomplete 입력 항목의 자동 완성 기능을 지정함
form 입력 항목이 속한 폼을 지정함
formaction 입력 항목이 속한 폼을 전송할 URL을 지정함
formenctype 입력 항목이 속한 폼을 전송할 때 사용할 인코딩 방식을 지정함
formmethod 입력 항목이 속한 폼을 전송할 때 사용할 HTTP 메서드를 지정함
formnovalidate 입력 항목이 속한 폼을 전송할 때 사용할 유효성 검사를 하지 않음
formtarget 입력 항목이 속한 폼을 전송할 때 사용할 대상 창을 지정함
pattern 입력 항목에 입력할 수 있는 문자의 패턴을 지정함

목차로 돌아가기

06. CSS 의 기본

06-1. 스트일 시트

종류 설명
브라우저 스타일 브라우저에서 기본으로 제공하는 스타일 시트
사용자 스타일 사용자가 직접 지정한 스타일 시트
저자 스타일 웹 페이지를 만드는 저자가 지정한 스타일 시트
인라인 스타일 HTML 태그의 style 속성을 사용하여 지정한 스타일
내부 스타일 HTML 문서의 head 태그 내부에 style 태그를 사용하여 지정한 스타일
외부 스타일 외부 스타일 시트 파일을 사용하여 지정한 스타일

06-2. CSS 기본 선택자

종류 설명 작성 예시
전체 선택자 모든 요소를 선택함 * { color: red; }
태그 (타입) 선택자 특정 태그를 가진 요소를 선택함 p { color: red; }
클래스 선택자 특정 클래스를 가진 요소를 선택함 .red { color: red; }
아이디 선택자 특정 아이디를 가진 요소를 선택함 #red { color: red; }
속성 선택자 특정 속성을 가진 요소를 선택함 input[type="text"] { color: red; }
그룹 선택자 여러 개의 선택자를 그룹으로 묶어서 선택함 h1, h2, h3 { color: red; }

06-3. 스타일 우선순위

  • 얼마나 중요한가?

    • 사용자 스타일 > 저자 스타일 > 브라우저 스타일

  • 적용 범위는 어디까지인가?

    • !important > 인라인 스타일 > id 선택자 > class 선택자 > 태그 선택자 > 전체 선택자

  • 소스 작성 순서는 어떻게 되는가?

    • 나중에 작성한 스타일이 우선함

목차로 돌아가기

07. 텍스트를 표현하는 다양한 스타일

07-1. 글자와 관련된 속성

속성 설명
font-family 글꼴을 지정함
font-size 글자 크기를 지정함
font-weight 글자의 굵기를 지정함
font-style 글자의 스타일을 지정함
font 글꼴을 지정함

07-2. 텍스트와 관련된 속성

속성 설명
color 글자 색상을 지정함
text-align 텍스트의 정렬 방식을 지정함
text-decoration 텍스트의 장식 효과를 지정함
text-indent 텍스트의 들여쓰기를 지정함
text-transform 텍스트의 대소문자를 변환함
text-shadow 텍스트에 그림자 효과를 지정함
line-height 텍스트의 줄 간격을 지정함
letter-spacing 텍스트의 자간을 지정함
word-spacing 텍스트의 어간을 지정함
   
white-space 텍스트의 공백 문자 처리 방식을 지정함
word-break 텍스트의 줄 바꿈 방식을 지정함
word-wrap 텍스트의 줄 바꿈 방식을 지정함
vertical-align 텍스트의 수직 정렬 방식을 지정함
text-overflow 텍스트의 넘침 처리 방식을 지정함
text-justify 텍스트의 양쪽 정렬 방식을 지정함
text-orientation 텍스트의 방향을 지정함
text-combine-upright 텍스트의 방향을 지정함

07-3. 웹에서 색상을 지정하는 방법

종류 설명
16진수 #RRGGBB (R: 빨강, G: 초록, B: 파랑) 형식으로 색상을 지정함
rgb, rgba rgb(빨강, 초록, 파랑, 투명) 형식으로 색상을 지정함
hsl, hsla hsl(색상, 채도, 명도, 투명) 형식으로 색상을 지정함
색상 이름 색상 이름을 사용하여 색상을 지정함

목차로 돌아가기

08. 레이아웃을 구성하는 CSS 박스 모델

08-1. 박스 모델 속성

속성 설명
width 요소의 너비를 지정함
height 요소의 높이를 지정함
box-sizing 요소의 크기를 계산하는 방식을 지정함
box-shadow 요소의 그림자 효과를 지정함

08-2. 테두리 속성

속성 설명
border 요소의 테두리를 지정함
border-width 요소의 테두리의 두께를 지정함
border-style 요소의 테두리의 스타일을 지정함
border-color 요소의 테두리의 색상을 지정함
border-radius 요소의 테두리의 둥글기를 지정함
border-image 요소의 테두리의 이미지를 지정함
border-<위치> 요소의 테두리의 위치를 지정함
border-<위치>-<속성> 요소의 테두리의 위치와 속성을 지정함
border-<위치>-<위치>-radius 요소의 테두리의 위치(top-right)와 둥글기를 지정함
border-radius: <가로> / <세로> 요소의 테두리의 가로 둥글기와 세로 둥글기를 지정함
   
outline 요소의 외곽선을 지정함
outline-width 요소의 외곽선의 두께를 지정함
outline-style 요소의 외곽선의 스타일을 지정함
outline-color 요소의 외곽선의 색상을 지정함
outline-offset 요소의 외곽선의 거리를 지정함

08-3. 여백 속성

속성 설명
margin 요소의 바깥 여백을 지정함
margin-<위치> 요소의 바깥 여백의 위치를 지정함
padding 요소의 안쪽 여백을 지정함
padding-<위치> 요소의 안쪽 여백의 위치를 지정함

08-4. 레이아웃 속성

속성 설명
display 요소의 표시 방식을 지정함
visibility 요소의 표시 여부를 지정함
float 요소의 띄움을 지정함
clear 요소의 띄움을 해제함

08-5. 위치 지정 속성

속성 설명
position 요소의 위치 지정 방식을 지정함
top 요소의 위쪽 위치를 지정함
right 요소의 오른쪽 위치를 지정함
bottom 요소의 아래쪽 위치를 지정함
left 요소의 왼쪽 위치를 지정함
z-index 요소의 쌓임 순서를 지정함

목차로 돌아가기

09. 이미지와 그러데이션 효과로 배경 꾸미기

09-1. 배경 이미지 관련 속성

속성 설명
background 요소의 배경을 지정함
background-image 요소의 배경 이미지를 지정함
background-repeat 요소의 배경 이미지의 반복 여부를 지정함
background-position 요소의 배경 이미지의 위치를 지정함
background-size 요소의 배경 이미지의 크기를 지정함
background-origin 요소의 배경 이미지의 기준점을 지정함
background-clip 요소의 배경 이미지의 출력 범위를 지정함
background-attachment 요소의 배경 이미지의 스크롤 여부를 지정함
background-color 요소의 배경 색상을 지정함

09-2. 선형 그러데이션 관련 속성

종류 설명
linear-gradient 선형 그러데이션을 지정함
repeating-linear-gradient 선형 그러데이션을 반복하여 지정함
angle (deg) 선형 그러데이션의 각도를 지정함. 그러데이션이 끝나는 각도를 지정합니다. 값은 deg로 표기합니다.
to <방향> 선형 그러데이션의 방향을 지정함. 끝 지점을 기준으로 to 다음에 방향을 냐타내는 예약어를 최대 2 개까지 사용할 수 있습니다. 사용할 수 있는 예약어는 left와 right, top과 bottom 이 있습니다.
color-stop 선형 그러데이션의 색상을 지정함. 쉼표(,)로 색상을 구분하며, 색상만 지정하거나 색상과 종지점의 위치를 함께 지정합니 다.
transparent 투명한 색상을 지정함
color 선형 그러데이션의 색상을 지정함
percentage 선형 그러데이션의 위치를 지정함

09-3. 원형 그러데이션 관련 속성

종류 설명
radial-gradient 원형 그러데이션을 지정함
repeating-radial-gradient 원형 그러데이션을 반복하여 지정함
shape 원형 그러데이션의 모양을 지정함. 값으로는 ellipse(기본값)와 circle이 있습니다.
size 원형 그러데이션의 크기를 지정함. 값으로는 farthest-corner(기본값), closest-side, closest-corner, farthest-side가 있습니다.
position 원형 그러데이션의 위치를 지정함. 값으로는 center(기본값), top, bottom, left, right, center top, center bottom, left top, left bottom, right top, right bottom이 있습니다.
color-stop 원형 그러데이션의 색상을 지정함. 쉼표(,)로 색상을 구분하며, 색상만 지정하거나 색상과 종지점의 위치를 함께 지정합니 다.
transparent 투명한 색상을 지정함
color 원형 그러데이션의 색상을 지정함
percentage 원형 그러데이션의 위치를 지정함

목차로 돌아가기

10. CSS 고급선택자

10-1. 연결 선택자

종류 형식 설명
자손 선택자 A B A 요소의 자손인 B 요소를 선택함
자식 선택자 A > B A 요소의 자식인 B 요소를 선택함
인접 형제 선택자 A + B A 요소의 다음 형제인 B 요소를 선택함
일반 형제 선택자 ` A ~ B` A 요소의 다음 형제인 B 요소를 선택함

10-2. 속성 선택자

종류 선택요소 예시
[속성] 속성이 있는 요소 [required]
[속성=값] 속성의 값이 특정 값인 요소 [target=_blank]
[속성~=값] 속성의 값이 특정 값으로 시작하는 요소 [title~=flower]
[속성\|=값] 속성의 값이 특정 값으로 시작하는 요소 [lang\|=en]
[속성^=값] 속성의 값이 특정 값으로 시작하는 요소 [href^=https]
[속성$=값] 속성의 값이 특정 값으로 끝나는 요소 [href$=.com]
[속성*=값] 속성의 값이 특정 값을 포함하는 요소 [href*=naver]

10-3. 가상 클래스 선택자

종류 설명
:link 방문하지 않은 링크를 선택함
:visited 방문한 링크를 선택함
:hover 마우스를 올려놓은 요소를 선택함
:active 마우스를 클릭한 요소를 선택함
:focus 포커스를 받은 요소를 선택함
:target URL의 해시 값과 일치하는 요소를 선택함
:enabled 활성화된 요소를 선택함
:disabled 비활성화된 요소를 선택함
:checked 체크된 요소를 선택함
:not(선택자) 선택자와 일치하지 않는 요소를 선택함

10-4. 구조 가상 선택자

종류 설명
:root 루트 요소를 선택함
:first-child 첫 번째 자식 요소를 선택함
:last-child 마지막 자식 요소를 선택함
:nth-child(n) n 번째 자식 요소를 선택함
:nth-last-child(n) 뒤에서 n 번째 자식 요소를 선택함
:first-of-type 첫 번째 같은 타입의 요소를 선택함
:last-of-type 마지막 같은 타입의 요소를 선택함
:nth-of-type(n) n 번째 같은 타입의 요소를 선택함
:nth-last-of-type(n) 뒤에서 n 번째 같은 타입의 요소를 선택함
:only-child 유일한 자식 요소를 선택함
:only-of-type 유일한 같은 타입의 요소를 선택함
:empty 자식 요소가 없는 요소를 선택함

10-5. 가상 요소 선택자

종류 설명
::first-line 요소의 첫 번째 줄을 선택함
::first-letter 요소의 첫 번째 글자를 선택함
::before 요소의 내용 앞에 콘텐츠를 생성함
::after 요소의 내용 뒤에 콘텐츠를 생성함
   
::selection 요소의 선택된 부분을 선택함
::placeholder 요소의 플레이스홀더를 선택함
::marker 요소의 마커를 선택함
::backdrop 요소의 배경을 선택함
::spelling-error 요소의 맞춤법 오류를 선택함
::grammar-error 요소의 문법 오류를 선택함

목차로 돌아가기