* 웹 접근성
정상적인 웹 컨텐츠 사용이 가능한 일반 사용자부터 고령자, 장애인 같은 신체적, 환경적 조건에 제한이 있는 사용자들을 포함해 모든 사용자들이 동등하게 접근할 수 있도록 컨텐츠를 제작하는 기법
웹 표준
여러 브라우저에서 동일한 사용자 경험을 줄 수 있도록 하는 기술, 방법들을 의미
크로스 브라우징
서식 태그
<서식태그>텍스트</서식태그>
* <strong>
텍스트를 굵게 표현하고 싶을 때 사용(의미적으로 강조)
<b> 태그와 동일한 기능(<b>는 그냥 글자를 굵게)
웹 접근성에 사용
* <em>
텍스트를 이탤릭체로 표현하고 싶을 때 사용
<i> 태그와 동일한 기능
웹 접근성에 사용
* <mark>
텍스트에 하이라이팅(형광) 효과를 적용
* <del>
텍스트 중앙에 가로줄을 만들어 텍스트를 지운 것과 같은 효과를 줌
* <ins>
텍스트 밑에 선을 그어 텍스트의 강조효과를 줌
* <sup>,<sub>
<sup> 태그를 위첨자를 표현할 때 사용
<sub> 태그는 아래첨자를 표현할 때 사용
HTML5의 문서 구조
<!DOCTYPE html>
HTML 문서의 선언
HTML 버전 5를 나타냄
<html lang="en">
lang 속성은 웹 접근성에 관한 명시
스크린 리더에서 언어를 인식하여 자동으로 음성을 변환하거나,
해당 언어에 적합한 발음을 제공
한국어로 설정하려면 lang="ko"
HTML 요소의 속성
속성은 해당 요소에 대한 추가적인 정보를 제공
<p class="my-p">
-- ----- ------
요소 속성명 속성값
속성에 대한 값은 따옴표를 꼭 사용하지 않아도 되지만,
속성값에 띄어쓰기가 있을 경우 문제가 발생할 수 있어서 따옴표를 쓰기 권장함(쌍따옴표, 따옴표 둘다 가능)
<img src=apple.jpg>
<img src="맛있는 사과.jpg">
meta 태그
meta태그는 <head>태그에 정보를 추가하기 위한 태그
<meta name="Author">
Keywords, Description ... 의 값을 설정
<meta charset="UTF-8">
charset 속성은 문자를 인코딩할 때 문자코드를 설정하는 역할을 지정
우리나라 윈도우 기본 문자셋인 EUC-KR을 사용해도 되지만,
다국어로 인코딩하기 위해서는 UTF-8 문자셋을 사용하기를 권장한다. (조합형)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport : 가상의 화면
모바일로 최적화된 사이트에 포함하는 META 속성 설정
도움되는 사이트
tcpschool
www.tcpshool.com
W3schools
www.w3schools.com
MDN
developer.mozilla.org/ko/docs/Web/HTML
목록 태그
* <ul>
순서가 없는 목록태그
블록 태그
<ul>
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
</ul>
* <ol>
순서가 있는 목록 태그
블록 태그
<ol type="">
<li>내용1</li>
<li>내용2</li>
...
</ol>
type
1 : 숫자(1,2,3,...)
A : 알파벳 대문자(A,B,C,...)
a : 알파벳 소문자(a,b,c,...)
I : 로마숫자 대문자(I,II,III,...)
i : 로마숫자 소문자(i,ii,iii,...)
* <dl>
사용자 정의 목록 태그
첫번째 목록은 <dt>, 두번째 목록은 <dd>
<dl>
<dt>정의 제목</dt>
<dd>정의 내용1</dd>
<dd>정의 내용2</dd>
...
<dt>정의 제목2</dt>
...
</dl>
이미지
* 비트맵 이미지(점으로 표현)
픽셀이 모여 만들어진 정보의 집합
레스터 이미지라고 부름
픽셀 단위로 화면에 렌더링함
그림판, 포토샵 등 툴로 편집
* 벡터 이미지
수학적 정보의 형태들이 만들어내는 결과물
이미지가 가지고 있는 점, 선, 면의 위치, 색상정보 등을 가지고 있음
확대 및 축소를 해도 이미지가 깨지지 않음
일러스트 같은 툴로 편집
이미지 파일 종류
* jpg(jpeg)
압축률이 훌륭하여 사진이나 예술분야에 많이 사용
가장 널리 쓰이는 이미지 포맷
표현 색상(24비트, 약 1600만 색상)이 뛰어나 고해상도 표시장치에 적합
손실 압축
* gif
이미지 파일 내에 이미지 및 문자열 같은 정보를 저장할 수 있는 파일
여러장의 이미지를 한 개의 파일에 저장할 수 있음(움짤, 애니메이션)
8비트(256색상) 컬러만 지원
비손실 압축
* png
gif의 대체 포맷으로 개발
8비트, 24비트 컬러 이미지 처리
알파 채널 지원 - 색을 덧입혀서 그라데이션
webp
jpg, png, gif를 모두 대체할 수 있는 구글이 개발한 이미지 포맷
gif 같은 애니메이션 지원
알파 채널 지원(손실, 비손실)
완벽한 포맷
브라우저 호환성 확인
https://caniuse.com
이미지 태그
이미지를 띄우기 위한 태그이다.
인라인 태그
<img src="이미지가 위치하는 주소 또는 경로" alt="대체할 문자열">
파일 경로
* 절대 경로
고유한 전체 경로
http, https, file에 대한 경로(file 경로는 사용하지 않음)
* 상대 경로
이미지가 HTML문서와 같은 폴더에 있는 경우
<img src="파일명">, <img src="./파일명">
이미지가 하위 폴더에 있는 경우
<img src="폴더명/파일명">, <img src="./폴더명/파일명">
이미지가 상위 폴더에 있는 경우
<img src="../파일명">,<img src="./../파일명">
이미지가 상위 폴더의 하위 폴더에 있는 경우
<img src="../하위폴더명/파일명">,<img src="./../하위폴더명/파일명">
무료 png 이미지 사이트(아이콘 파인더)
https://www.iconfinder.com
'HTML' 카테고리의 다른 글
| HTML (0) | 2022.03.03 |
|---|---|
| [프론트엔드] HTML 4 (0) | 2021.11.07 |
| [프론트엔드] HTML 3 (0) | 2021.11.07 |
| [프론트엔드] HTML 1 (0) | 2021.10.09 |