HTML
하이퍼텍스트 문서를 기술하는 언어 또는 문서.
HyperText
: 서로 분산된 문서, 또는 내용들이 연결을 통해 하나의 전체 문서를 구성하는 구조를 말한다.
Markup
: 문서의 내용을 표현하기 위해 태그를 사용하고, 태그에는 다양한 속성들이 있으며, 이렇게 태그를 이용해서 문서를 기술하는 것이 마크업.
HTML 문서의 기본 구조 이해
<!doctype html>
HTML5 문서 규격인 HTML 문서임을 표시하는 태그
<html></html> 모든 HTML 문서의 태그를 품는 루트 태그로 모든 태그는 이 태그 안에 위치해야 한다.
<head></head> HTML 문서에 대한 기본적인 정보를 표시하는 여러가지 태그들이 오고, CSS도 올 수 있음.
외부 CSS, JAVASCRIPT 파일을 연결하는 링크도 여기에 정의한다.
이 안의 태그들은 웹 브라우저에서 내용이 출력되지 않는다.
<body></body> 실제 표시할 내용을 담는 태그들이 위치한다.
문서의 모든 내용은 이 안에 위치해야 한다.
HTML5.2의 개선 내용
표준 코덱과 내장 플레이어(<video>)
H.264(크롬, 사파리 지원)와 Ogg(크롬, 파이어폭스 지원) 영상을 별도의 플러그인 없이 브라우저 안에서 표준 <video></video> 태그를 이용해 재생 가능.
맥OS, 또는 아이폰 기기들 호환성을 유지하려면 H.264 영상으로 지원 코덱을 제한해야 한다.
캔버스(<canvas>)
2D 캔버스를 기본으로 지원해 그리기 관련 기능이나 애니메이션을 넣을 수 있다.
로컬저장 및 로컬DB지원
로컬 컴퓨터에 파일이나 데이터를 저장할 수 있고, 작고 원시적이지만 데이터베이스 관련 기능을 지원한다.
저장 가능한 크기나 용량에는 제한이 있고, 자바스크립트를 이용해 제어를 해야하기 때문에 개발 요소가 필수적으로 필요하다.
문서의 특정 영역을 표시하는 시멘틱(Semantic)태그 대폭 추가
⭐️⭐️⭐️ 시멘틱 태그를 잘 사용해야 검색에 최적화 시킬 수 있다.(SEO)
- 웹 사이트의 생존에 관한 문제, 검색 엔진에 얼마나 최적화되어 잘 검색이 되냐는 아주 중요한 문제에 대한 필수 요소가 시멘틱 태그이다.
가장 많이 사용되는 시멘틱 태그<header> <main> <nav> <section> <article> <aside> <footer>
: 검색 결과에 노출이 필요 없는 웹페이지, 하이브리드 앱을 위한 페이지를 제작하는 경우 굳이 사용하지 않아도 된다.
문서 인코딩 관련 정보 표시가 필수 사항으로 변경
HTTP 헤더, 메타태그 중 한가지 방법으로 반드시 문자 인코딩이 어떤 것인지 명시해야 한다.
보통은 메타태그에 표시하는 것을 기본으로 한다.
<meta charset="utf-8">하이퍼링크(<a>)로 HTML 문서를 연결하기
HTML 문서는 하이퍼링크를 통해 진정한 연결형 문서가 된다.
<a href="#chapter2">href 속성은 이동할 링크를 입력하는 필수 속성target 속성에 _blank을 넣으면 새 탭에 하이퍼링크 주소가 열린다.
절대 경로
웹 사이트의 전체 경로. https://google.com
상대 경로
내 문서가 있는 내 컴퓨터, 또는 내 사이트 안에서만 유효.
상대경로를 가리킬 경우 현재 HTML문서 위치를 기준으로 위, 현재, 아래 경로를 가리키는 기호를 이용해 상대 위치를 표시.
| 기호 | 설명 | 예 |
|---|---|---|
| . | 현재 경로 | ./ : 현재 경로 ./suburl/dest.html(suburl/dest.html) : 현재 경로 밑의 'suburl'밑에 dest.html |
| .. | 현재 위치에서 한 단계 위 경로/폴더 | ../: 1단계 상위 경로 ../../ : 2단계 상위 경로 |
| / | 경로 구분자. 단독으로 사용할 경우 루트 경로 | / : 루트 경로 |
웹에서 사용할 수 있는 이미지 포맷들
JPG(JPEG)
고해상도 고 컬러 이미지를 인터넷 상에 표시하기 위해 가장 널리 사용되는 이미지 포맷
손실 압축 방식이기 때문에 압축율을 너무 많이 높이면 이미지가 다소 뭉개지거나 흐릿해 보이는 이미지 손상 문제가 있다.
초고해상도 사진 등을 아주 작은 파일 크기로 만들 수 있어 태생적으로 대역폭, 트래픽 제한이 있을 수 밖에 없는 인터넷 환경, 모바일 환경에 가정 적합한 이미지 포맷.
GIF
인터넷 초기부터 널리 사용된 이미지 포맷으로 무손실 압축 이미지 포맷.
주로 작은 아이콘이나 저해상도 이미지, 컬러수가 적은 이미지, 배경을 단색으로 투명처리해야 하는 이미지에 사용.
사용한 색상이 많은 이미지를 gif 포맷으로 저장하면 이미지가 심하게 층이 지어 보이거나 디더링 되어 보이는 단점이 있다.
컬러수가 작은 아이콘 이미지나 저해상도 이미지에서는 아직 많이 사용되지만, 특허 문제 등으로 인해 점차 사용이 줄어드는 중
PNG -Portable Network Graphics[ 인터넷 환경에 최적화된 이미지 포맷 ]
최근 들어 "jpg"와 함께 가장 많이 사용하는 웹 표준 이미지 포맷.
gif처럼 투명 배경 이미지를 만들 수 있다.(gif을 완전히 대체할 수 있다.)
배경 투명을 한 색상만 지정할 수 있는 "gif"와 달리 8비트 알파채널을 지원해 256색상까지 반투명 효과 색상을 지정할 수 있다.
24bit 트루컬러를 지원하며, 8비트 알파채널을 지원해 사용할 수 있어 사용 컬러 수의 제약이 없다.
✓ 고용량의 사진 이미지, 또는 이미지 로딩 속도를 높이는데 최적화를 해야 하는 이미지가 아니라면, 웹 UI을 구성하기 위한 용도로는 PNG 이미지 포맷을 기본으로 사용한다고 보면 된다.
SVG
웹표준에서 지원하는 유일한 벡터 이미지 포맷.
웹에서 사용 빈도가 높지 않지만, 웹 디자인 용도의 아이콘, 동적인 UI을 만드는데 주로 사용
특히 웹 애니메이션을 만드는 용도로 많이 사용.
벡터 포맷이어서 작은 용량으로도 다양한 해상도에 맞는 애니메이션 효과를 줄 수 있어서 용도에 맞게 잘 사용하면 웹사이트에 동영상을 사용한 것 이상의 동적인 느낌을 줄 수도 있다.
대표적으로 벡터 아이콘인 폰트어썸(Fontawesome)이 많이 사용된다.
멀티미디어 컨텐츠를 HTML 문서에 연결하기
유튜브 동영상을 HTML 배치하는 방법은 <iframe></iframe> 태그를 사용하는 게 좋다.
: 유튜브에서 기본으로 제공하는 영상 링크가 "iframe"으로 제공되기 때문에.
+ 유튜브가 아닌 경우는 <embed></embed>을 사용해도 상관없다.
보통 유튜브 영상을 붙일 때 기본적인 속성으로 가로/세로 크기와 미디어 경로를 지정하는 정도로 끝낸다.
<iframe width="560" height="315" src="https://www.youtube.com/test/detail></iframe>
<embed width="560" height="315" src="https://www.youtube.com/test/detail></embed>폼 태그의 기초
<form>태그의 속성
| 속성 | 값 | 설명 |
|---|---|---|
| name | 텍스트 | 폼 이름 지정. HTML 페이지 안에서 유일해야 한다. |
| method | get, post | 폼 데이터를 전송하는 방식을 지정한다. get: 폼 필드명과 값을 이름/값 쌍으로 된 쿼리스트링으로 만들어 URL 형태로 전송. 전송할 데이터 양은 약 3000자로 제한 + 보안상 중요하지 않은 폼 전송에만 사용을 추천. post: 검색 결과 등 URL을 저장해야 할 필요가 있는 경우가 아니면 대부분 post을 쓴다고 이해하면 된다. 폼 데이터를 전송하면 폼데이터가 URL에 표시되지 않으며, HTTP 요청의 body안에 저장되어 전송된다. 폼 데이터 크기에 제한이 없어, 파일이나 이미지 업로드를 같이 하는 경우에는 반드시 post방식을 사용. |
| action | URL | 폼을 전송할 URL입력 |
| enctype | application/x-www-form-urlencoded multipart/form-data text/plain |
application/x-www-form-urlencoded : 기본값 생략 가능. 모든 폼 전송 데이터가 인코딩 되어 전송됨. 공백은 "+"로 대체되며, 특수문자는 ASCII HEX 코드로 변환. multipart/form-data : 파일, 이미지 업로드가 있는 폼은 반드시 이 타입으로 지정해야 파일 업로드가 전송 되며, 서버에 파일을 저장해 처리할 수 있다. text/plain : 폼 전송 데이터를 인코딩 없이 일반 텍스트로 전송. 공백만 "+"로 변환시킨다. |
| target | _blank _self _parent _top iframe명 |
HTML 페이지 안의 iframe으로 폼 데이터를 전송해 결과값을 표시하는 용도로 target을 더 많이 사용한다. |
| accept-charset | 캐릭터셋 | 국내에서 사용하는 폼의 캐릭터셋은 UTF-8, EUC-KR, ISO-8859-1 셋 중 하나. 대부분 UTF-8. 제작한지 아주 오래된 홈페이지의 서버 처리를 지원해야 하는 경우 EUC-KR 영문 전용인 경우 "ISO-8859-1"을 사용 보통 UTF-8이라고 보면 된다. |
| autocomplete | on, off | 폼 전체에 거쳐 자동완성 기능을 사용할지 여부를 지정. 개별 필드에도 사용 가능한 속성으로 폼 전체의 자동완성 속성 설정과 별개로 필드 단위로만 적용도 가능. |
| novalidate | novalidate | 폼 데이터를 전송할 때 HTML5 태그 중 값 체크를 하는 태그의 검사 기능을 수행한 후 폼 전송을 할지 여부를 지정. 값 체크 기능이 있는 태그에 개별적으로 "novalidate" 값을 지정할 수도 있다. |
Input "type" 속성 값들
| 타입 속성 값 | 설명 |
|---|---|
| text | 1줄 입력 필드 |
| hidden | 화면에 보이지 않는 감춤 폼 요소 생성. value 속성으로 값을 지정할 수 있으며, 폼(Form)을 전송할 때 함께 전송. |
| password | 패스워드 입력 필드. text와 동일한 한 줄 입력 필드지만, 입력하는 글자가 '*'로ㅓ 표시된다. |
| checkbox | 체크박스, 체크된 상태를 표시하는데 checked 속성을 사용. 이름(name) 속성값으로 그룹화해 하나의 체크박스 그룹을 생성. 같은 이름을 사용하는 체크박스 그룹안에서 checked 속성을 여러 개 사용 가능. |
| radio | 라디오버튼. 체크된 상태를 표시하는데 checked 속성을 사용. 이름(name) 속성값으로 그룹화해 하나의 라디오버튼 그룹을 생성. 같은 이름을 사용하는 체크박스 그룹안에서 checked 속성을 한 개만 사용 가능. |
| file | 파일 업로드를 위해 파일을 선택하는 파일 선택자. accept 속성을 이용해 선택하는 파일을 필터링 가능. |
| 이메일 주소 입력 필드. 폼 전송시에 입력한 내용이 이메일 주소가 맞는지 자동으로 체크. 이메일 주소가 아닐 경우 경고를 띄우고 폼 전송이 되지 않는다. ⭐️⭐️⭐️ 엄격한 체크는 하지 않으므로, 자바스크립트 정규식으로 정밀한 검증이 필요함. |
|
| tel | 전화번호 입력 필드, 일반 입력필드와 같다. 유효성 체크 따로 안함. 모바일 웹페이지를 제작할 경우 전화번호를 스마트폰에서 클릭하면 전화를 거는 기능으로 주로 사용. |
| range | 최소값과 최대값 사이의 값을 사용자가 선택할 수 있도록 슬라이더가 바에 표시. 최소값은 'min', 최대값은 'max'. step 속성을 사용하여 슬라이더가 움직일 때 배수단위로만 값이 지정되도록 설정 가능. |
button, image, reset, submit 등의 type 속성도 있지만, 굳이 input태그로 저 속성들을 사용하는 것보다
<button>,<img>를 이용하는게 좋다고 생각해서 위 4가지 속성은 제외하고 정리함.
Input 태그의 속성
| 속성 | 사용 값 | 설명 |
|---|---|---|
| value | 텍스트 | 요소의 값을 지정. 폼이 전송될 때 전송되는 요소의 실제 값. |
| alt | 텍스트 | 이미지를 위한 속성으로 이미지를 대체해 표시할 때 보이는 텍스트. 모바일 대응 웹페이지를 제작할 경우 꼭 사용할 것을 추천. |
| autocomplete | on / off | 입력 필드에 자동 완성 기능을 사용할지 여부를 지정. |
| autofoucs | autofocus | 페이지 로딩 완료 후 이 요소에 포커스가 자동으로 오도록 할지 여부를 지정. |
| checked | checked | input 태그를 체크박스, 라디오버튼으로 사용할 경우, 페이지 로딩 시점에 미리 선택되어 있는 상태 여부를 지정. |
| disabled | disabled | 미사용 상태, 요소가 옅은 회색톤으로 변하면서 요소가 사용 불가능 상태가 된다. 페이지 로딩 시점에 값이 미리 지정되어 있어도 폼 전송 시점의 해당 요소 값은 전송되지 않음. |
| width | 픽셀 | 이미지로 사용할 경우에만 적용됨. 너비. |
| height | 픽셀 | 이미지로 사용할 경우에만 적용됨. 높이. |
| multiple | multiple | 한 개 이상 여러 개의 값을 입력, 또는 선택할 수 있는지 여부를 지정. 요소를 파일 선택자로 사용해 여러 개의 파일을 선택하거나, 이메일 주소로 사용해 여러 개의 이메일 주소를 입력하는 경우 사용. |
| name | 텍스트 | 요소의 이름, 요소를 개별적으로 구별하는데 사용. |
| placeholder | 텍스트 | 입력필드 등에 예상되는 추천 값을 힌트로 미리보기로 보여주는 용도로 사용. 포커스 되는 경우 사라짐. |
| readonly | readonly | 읽기 전용. 입력 필드가 사용자 입력할 수 없는 상태가 됨. 페이지 로딩 시점에 지정된 value 값은 그대로 유지되며, disabled 와 달리 폼 전송 시점에 값도 전송됨. |
| required | required | 해당 입력 필드에 값이 반드시 입력되어 있어야만 폼이 전송 가능. 값이 없을 경우 경고 메시지가 나온다. |
| size | 0보다 큰 숫자 | 입력 필드의 너비 지정, 너비 값은 글자수로 지정. 20이면 20자(한글 기준) 너비만큼 입력 필드 영역 가로 길이 지정됨.(디테일한 부분은 CSS로 크기조절 필요) |
| src | url | 이미지 타입인 경우에만 사용. 이미지 경로 URL을 지정 |
드롭다운 리스트 (<select>)
목록에서 한 개, 또는 여러 개의 항목을 선택할 수 있도록 하는 폼 요소.
드롭다운 리스트라고 부르며, 태그는 <select> 와 <option> 을 함께 사용.
<select> 태그는 껍데기 역할을 하고, <option> 태그는 <select> 태그 안의 목록 항
목 1개를 표현하는 용도로 사용한다.
동적인 목록 관리 등에 유리하다.
사용자 선택에 따라 목록을 동적을 업데이트 해야 하는 경우, UI 화면의 큰 변경 없이 목록의 갱신이 가능해서 서버와 지속적으로 연동해야 하는 폼 요소를 만드는데 많이 사용.
드롭다운 리스트(<select>) 태그 속성들
| 속성 | 값 | 설명 |
|---|---|---|
| name | 텍스트 | select 태그 이름 |
| required | required | 필수 선택 항목이 된다. 폼 전송시에 해당 드롭다운 리스트에 선택한 옵션이 없으면 폼 전송 안됨. |
| size | 숫자 | 드롭다운 리스트에서 표시하는 옵션의 개수. 기본값은 1로 드롭다운 리스트 옵션값 1개만 표시. 1인 경우, 펼침 화살표를 클릭해 아래로 펼치는 리스트가 먼저 표시. |
| multiple | 드롭다운 리스트 옵션 2개 이상 선택할 수 있도록 한다. 💣multiple 속성이 부여된 경우 size 속성 유무와 무관하게 아래 펼칠 속성이 사라지므로 주의해야한다. |
|
| disabled | disabled | 드롭다운 리스트를 사용불가 상태로 만든다. |
| autofocus | autofocus | 페이지 로딩 후 자동으로 해당 드롭다운 리스트로 포커스가 가도록 한다. |
| form | 폼ID | 폼 외부에 작성한 드롭다운 리스트가 폼ID를 가진 폼의 일부가 되도록 한다. 폼 전송시에 드롭다운 리스트의 값도 함께 전송됨. |
옵션(<option>) 태그 속성들
드롭다운 리스트(<select>)의 개별 항목들을 표시하는데 사용하는 태그.
단독 태그로 사용할 수 없으며, 반드시 <select> 태그 안에 사용해야 한다.
드롭다운 리스트에 표시하는 옵션 라벨은 <option></option> 태그 사이에 입력한다.
옵션 속성 중 label 속성값을 지정했을 경우, "label" 속성의 값이 드롭다운 리스트에 표시되므로 주의해야 한다.
| 속성 | 값 | 설명 |
|---|---|---|
| selected | selected | 옵션이 기본 선택된 상태가 된다. 드롭다운 리스트에 'selected' 속성이 있는 옵션이 없을 경우 첫 번째 옵션이 선택된 상태가 된다. selected 속성이 있는 옵션이 2개 이상일 경우 가장 마지막 selected 속성이 있는 옵션이 선택된 상태가 된다. <select>태그 속성으로 multiple이 있는 경우 다중 선택이 가능해지기 때문에 selected 속성이 있는 모든 요소가 선택된다. |
| value | 텍스트 | 옵션 값, 폼 전송시에 서버로 전송되는 값. |
| label | 텍스트 | 옵션을 위한 짧은 표시 라벨을 지정한다. label 속성이 없을 경우 option 태그 사이의 값이 드롭다운 리스트 항목으로 표시되며, label 속성값이 있는 경우 이 값이 항목 리스트로 표시된다. |
| disabled | disabled | 옵션을 미사용 상태로 만든다. |
출처: HTML & CSS 마스터북 책