FEDAY 02
웹 접근성
정상적인 웹 컨텐츠 사용이 가능한 일반 사용자부터
고령자, 장애인 같은 신체적, 환경적 조건에 제한이 있는 사용자들을
포함해 모든 사용자들이 동일한 조건에서 접근할 수 있도록
웹 컨텐츠를 제작하는 기법
웹 표준
여러 브라우저에서 동일한 사용자 경험을 줄 수 있도록 하는
기술, 방법 등을 의미 / 크로스 브라우징
서식 태그
<서식태그>텍스트</서식태그>
<strong>
텍스트를 굵게 표현
<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">
--- ----- -------
요소 속성명 속성값
속성에 대한 값은 따옴표로 꼭 묶어주지 않아도 되지만,
속성값에 띄어쓰기가 있을 경우 문제가 발생할 수 있어서
따옴표를 쓰기 권장함(쌍따옴표, 따옴표 둘 다 가능)
ex)
<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">
viewport : 가상의 화면
모바일로 최적화된 사이트에 포함하는 META 속성 설정
목록 태그
<ul>
순서가 없는 목록 태그
블록 태그
<ul>
<li>내용1</li>
<li>내용2</li>
...
</ul>
<ol>
순서가 있는 목록 태그
블록 태그
<ol>
<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,...)
start
목록의 시작 번호
<dl>
사용자 정의 목록 태그
첫번째 목록은 <dt>, 두번째 목록은 <dd>
<dl>
<dt>정의 제목1</dt>
<dd>정의 내용1</dd>
<dd>정의 내용2</dd>
...
<dt>정의 제목2</dt>
<dd>정의 내용3</dd>
<dd>정의 내용4</dd>
...
</dl>
이미지
비트맵 이미지
픽셀이 모여 만들어진 정보의 집합
레스터 이미지 라고 부름
픽셀 단위로 화면에 렌더링함
그림판, 포토샵 등 툴로 편집
벡터 이미지
수학적 정보의 형태들이 만들어내는 결과물
이미지가 가지고 있는 점, 선, 면 의 위치, 색상정보 등을 가지고 있음
확대 및 축소를 해도 이미지가 깨지지 않음
일러스트 같은 툴로 편집
이미지의 파일 종류
jpg(jpeg)
압축률이 훌륭하여 사진이나 예술분야에 많이 사용
가장 널리 쓰이는 이미지 포맷
표현 색상(24비트, 약 1600만 색상)이 뛰어나 고해상도 표시장치에 적합
손실 압축
gif
이미지 파일 내에 이미지 및 문자열 같은 정보를 저장할 수 있는 파일
여러장의 이미지를 한 개의 파일에 저장할 수 있음(움짤, 애니메이션)
8비트(256색상) 컬러만 지원
비손실 압축
png
gif의 대체 포맷으로 개발
8비트, 24비트 컬러 이미지 처리
w3c 권장 포맷
알파 채널 지원
webp
jpg, png, gif를 모두 대체할 수 있는 구글이 개발한 이미지 포맷
완벽한 포맷
gif 같은 애니메이션 지원
알파 채널 지원
손실, 비손실 압축
이미지 태그
이미지를 띄우기 위한 태그이다.
인라인 태그
<img src="이미지가 위치하는 주소 또는 경로" alt="대체할 문자열">
파일 경로
절대 경로
고유한 전체 경로
http, https, file에 대한 경로(file 경로는 사용하지 않음)
상대 경로
./ : 현재 문서가 있는 폴더
../ : 현재 문서가 있는 폴더의 상위 폴더
이미지가 HTML문서와 같은 폴더에 있는 경우
<img src="./파일명"> <img src="파일명">
이미지가 하위 폴더에 있는 경우
<img src="./폴더명/파일명"> <img src="폴더명/파일명">
이미지가 상위 폴더에 있는 경우
<img src="../파일명">
이미지가 상위 폴더의 하위 폴더에 있는 경우
<img src="../폴더명/파일명">
