HTML → HTML5 🤔 CSS → CSS3
버전이 달라지면서 추가된 것들을 살펴보자.
HTML → HTML5
HTML5는 웹 페이지를 더 효율적으로 제작하고 다양한 멀티미디어 콘텐츠를 지원하기 위해 개발되었다고 한다.
✨추가된 기능
✨시맨틱 태그 (새로운 요소와 속성)
시맨틱 태그(semantic tag)는 의미론적인 구조를 가진 태그로, 웹 페이지의 구조를 보다 더 명확히하고 의미있는 구조로 작성할 수 있다.
| 의미 요소 | 설명 |
|---|---|
| header | HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함. |
| nav | HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 정의함. |
| main | HTML 문서의 주요 콘텐츠(content)를 정의함. |
| section | HTML 문서에서 섹션(section) 부분을 정의함. |
| article | HTML 문서에서 독립적인 하나의 기사(article) 부분을 정의함. |
| aside | HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함. |
| figure | HTML 문서에서 그래픽과 비디오 등의 독립적인 콘텐츠(content)를 정의함. |
| figcaption | figure 요소를 위한 캡션을 정의함. |
| footer | HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함. |
| bdi | 기본 출력방향과는 다른 방향으로 출력되는 텍스트를 정의함. |
| mark | 하이라이팅된 텍스트를 정의함. |
| details | 사용자가 보거나 숨길 수 있는 추가적인 설명문을 정의함. |
| summary | details 요소에 나타날 내용을 정의함. |
| dialog | 다이얼로그(dialog) 박스나 다이얼로그 윈도우를 정의함. |
| menuitem | 사용자가 팝업 메뉴(popup menu)를 통해 선택할 수 있는 메뉴의 아이템(menu item)을 정의함. |
| meter | 정해진 범위 내의 스칼라 치수를 정의함. |
| progress | 작업에 대한 진행 정도를 정의함. |
| ruby | 루비(ruby) 문자를 선언함. |
| rt | 본문 위에 나타날 문자를 정의함. |
| rp | 루비(ruby) 문자를 지원하지 않는 브라우저에서만 나타날 내용을 정의함. |
| time | 날짜와 시간을 정의함. |
| wbr | br 요소와는 달리 긴 단어가 화면의 맨 끝에 오면 상황에 따라 줄 바꿈 할 곳을 미리 정의함. |
✨멀티미디어 지원
오디오, 비디오, 그래픽 등 다양한 멀티미디어 콘텐츠를 더욱 쉽게 포함할 수 있는 기능을 제공한다.
| 멀티미디어 요소 | 설명 |
|---|---|
| audio | 오디오와 음악 등 오디오 파일을 명시함. |
| video | 비디오와 영화 등 비디오 파일을 명시함. |
| embed | 플러그인(plug-in)과 같은 HTML 문서에 삽입할 객체(object)를 명시함. |
| source | 멀티미디어 요소의 원본에 대한 파일 형식 및 파일 주소를 여러 개 명시함. |
| track | 비디오 플레이어에 대한 텍스트 자막을 명시함. |
✨Canvas 및 SVG
Canvas와 SVG(Scaleable Vector Graphics)를 지원하여 동적인 그래픽을 생성하고 조작할 수 있다.
이를 통해 복잡한 그래픽 요소를 웹 페이지에 쉽게 추가할 수 있다.
| 그래픽 요소 | 설명 |
|---|---|
| canvas | 자바 스크립트를 이용한 그래픽 작업을 정의함. |
| svg | SVG를 이용한 그래픽 작업을 정의함. |
✨form & input
| form 요소 | 설명 |
|---|---|
| datalist | input 요소에 대해 미리 정의된 옵션 리스트를 명시함. |
| keygen | form 요소 안에 두 개의 키(key)를 만들어주는 생성기를 명시함. |
| output | 스크립트 등으로 실행된 계산의 결과를 바로 나타냄. |
대표적인 input type
-
text
-
password
-
submit
-
radio button
-
checkbox
-
button
추가된 input type
-
숫자 입력(number)
-
입력 범위 지정(range)
-
색상 입력(color)
-
날짜 입력(date)
-
시간 입력(time)
-
날짜와 시간 입력(datetime-local)
-
연도와 월 입력(month)
-
연도와 주 입력(week)
-
이메일 입력(email)
-
URL 주소 입력(url)
-
전화번호 입력(tel)
-
검색어 입력(search)
대표적인 input 속성
-
value
-
readonly
-
disabled
-
maxlength
-
size
추가된 input 속성
-
autocomplete: form 요소나 input 요소에 입력된 정보를 저장할지 안 할지를 명시 -
autofocus: 웹 페이지가 로드(load)될 때, 속성이 적용된 input 요소에 자동으로 포커스(focus)가 가도록 해줌 -
form: 해당 input 요소의 위치에 상관없이 포함될 form 요소를 명시 -
formaction: 입력한 정보(data)를 전송할 때 정보가 전달될 서버 측 파일을 명시. 즉, form 요소의 action 속성을 덮어쓰게 됨
(submit 타입과 image 타입에서만 사용) -
formenctype: 입력한 정보(data)를 전송할 때 암호화하는 방법을 명시. 즉, form 요소의 enctype 속성을 덮어쓰게 됨
( form 요소의 method 속성이 post일 때만 적용, submit 타입과 image 타입에서만 사용) -
formmethod: 입력한 정보(data)를 전송할 때 사용하는 http 메소드(method)를 명시. 즉, form 요소의 method 속성을 덮어쓰게 됨
(submit 타입과 image 타입에서만 사용) -
formnovalidate: 입력한 정보(data)를 전송할 때 그 정보가 유효한지 아닌지를 검사하지 않았다는 것을 명시. 즉, form 요소의 novalidate 속성을 덮어쓰게 됨
(submit 타입만) -
formtarget: 입력한 정보(data)를 전송한 후, 그 결과로 받은 응답 페이지를 어디에 출력할지를 명시. 즉, form 요소의 target 속성을 덮어쓰게 됨
(submit 타입과 image 타입에서만 사용) -
height and width: 오직 image 타입에서만 이미지의 높이와 너비를 명시
(이미지를 클릭하면 클릭한 곳의 x좌표와 y좌표가 같이 전송됨) -
list: 해당 input 요소에 대한 미리 정의된 옵션 리스트를 설정하는 datalist 요소와 관련이 있음
( list 속성값이 datalist 요소의 id 속성값과 일치해야만 연결됨) -
min and max: input 요소에 입력할 수 있는 최솟값과 최댓값을 명시
(number, range, date, time, datetime-local, month, week 타입) -
multiple: 사용자가 input 요소에 값을 두 개 이상 입력하는 것을 허용
(email 타입과 file 타입에서만 사용) -
pattern: input 요소에 입력된 값을 검사하기 위한 정규 표현식(regular expression)을 명시
(text, password, email, tel, url 타입) -
placeholder: input 요소에 입력되어야 할 값에 대한 힌트를 제공(입력 형식에 대한 설명)
(text, password, email, tel, url, search 타입) -
required: 반드시 입력되어야 할 필수 input 요소를 명시
(속성이 설정된 모든 input 요소에 입력값이 존재해야만 서버로 전송(submit)할 수 있음) -
step: input 요소에 입력할 수 있도록 허용된 숫자 간격을 명시 (step 속성값이 2이면, 입력이 허용되는 숫자는 ..., -4, -2, 0, 2, 4,... 가 된다)
(number, range, date, time, datetime-local, month, week 타입)
추가된 form 속성
-
autocomplete: form 요소나 input 요소에 입력된 정보를 저장할지 안 할지를 명시(속성값이 on으로 설정되면, 브라우저는 사용자가 입력하는 정보를 자동으로 저장)
-
novalidate: 입력한 정보(data)를 전송할 때 그 정보가 유효한지 아닌지를 검사하지 않았다는 것을 명시(url 타입이나 email 타입과 같이 자동으로 유효성 검사를 하는 input 타입에 이 속성을 사용하면 유효성 검사를 하지 않음)
CSS → CSS3
CSS3는 기존보다 더 많은 기능과 향상된 스타일링 옵션을 제공한다. 이를 통해 보다 풍부하고 현대적인 웹 디자인을 구현할 수 있다.
✨추가된 기능
✨모듈화
모듈화되어 여러 가지 모듈로 나뉘어져 있다.
색상, 배경, 선택자, 텍스트 효과 등의 기능이 각각의 모듈로 분리되어 개발되었다.
✨새로운 선택자
다양한 새로운 선택자들이 도입되었다.
- 속성 선택자(attribute selectors)
- 자식 선택자(child selectors)
- 인접 형제 선택자(adjacent sibling selectors) 등
✨그라디언트 및 그림자 효과
선형 그라디언트(linear gradients)와 원형 그라디언트(radial gradients)를 지원하며, 그림자 효과(shadow effects)를 쉽게 추가할 수 있다. 이를 통해 요소의 시각적인 효과를 강화할 수 있다.
✨폰트 및 텍스트 관련 기능
웹 폰트(web fonts)를 지원하고, 텍스트 그림자(text shadows), 텍스트 그라디언트(text gradients), 다중 텍스트 효과(multiple text effects) 등을 추가하여 텍스트 스타일링 옵션을 향상시킬 수 있다.
✨플렉스박스 및 그리드 레이아웃
플렉스박스(flexbox)와 그리드 레이아웃(CSS grid layout)과 같은 레이아웃 모듈이 도입되어 웹 페이지의 레이아웃을 보다 쉽게 제어할 수 있다.
(1차원, 2차원 방식으로 요소의 나열, 배치를 쉽게 할 수 있음)
✨애니메이션 및 변환
트랜지션(transitions), 애니메이션(animations), 변환(transformations)과 같은 기능을 통해 웹 요소들에 동적인 효과를 쉽게 추가할 수 있다.
✨미디어 쿼리(Media Queries)
미디어쿼리를 사용하여 다양한 디바이스와 화면 크기에 따라 각각 다른 스타일을 적용할 수 있다. 이를 통해 웹 페이지를 미디어에 대응하여 더 나은 사용자 경험을 제공할 수 있다.
<참고>
TCP SCHOOL, W3C, GPT
