>문단 태그
- 내용상 끊어서 구분할 수 있는 부분 즉 문단을 만드는 태그/블록태그
<p>내용</p>
>제목 태그
-제목을 표현할 수 있는 태그
--> 가장 큰 <h1>태그부터 가장 작은 <h6> 태그까지 제공
검색 엔진에서 키워드로 사용/블록태그
<h3>제목</h3>
>웹 접근성
- 정상적인 웹 컨텐츠 사용이 가능한 일반 사용자부터 고령자, 장애인 같은 신체적, 환경적 조건에 제한이 있는
이용자들을 포함해 모든 사용자들이 동등하게 사이트에 접근할 수 있도록 웹 컨텐츠를 제작하는 기법
>웹 표준
-여러 브라우저에서 동일한 사용자 경험을 줄 수 있도록 하는 기술, 방법등을 의미/ 크로스 브라우징(호환성)
>서식 태그
<서식태그>텍스트</서식태그>
<strong>
텍스트를 굵게 표현하고 싶을때 사용
<b>태그와 동일한 기능
*strong은 스크린리더가 시각장애인 위해서 구별되게 읽어준다
<em>
텍스트를 이탤릭채로 표현하고 싶을때 사용
<i> 태그와 동일한 기능
*em은 접근성을 보장하는 서식 태그
<mark>
텍스트에 하이라이팅(형광) 효과를 적용
<del>
텍스트 중앙에 가로줄을 만들어 텍스트를 지운것 같은 효과를
준다.
<ins>
텍스트 밑에 선을 그어 텍스트의 강조 효과를 줌
<sup>,<sub>
sup 태그는 위첨자를 표현할 때 사용
sub 태그는 아래첨자를 표현할 때 사용
>HTML 요소의 속성
- 속성은 해당 요소에 대한 추가적인 정보를 제공
<P class="text">
-- ----- ------
요소 속성 값
- 속성에 대한 값은 따옴표를 꼭 사용하지 않아도 되지만, 속성값에 띄어쓰기가 있을 경우 문제가 발생할 수 있어서 따옴표를 쓰길 권장. (큰 따옴표,작은 따옴표 둘 다 가능)
- 속성을 여러개 주는 경우에는 띄어쓰기로 구분하여 다음 속성에 대한 정의를 작성해줌.
>HTML5의 문서 구조
<!DOCTYPE html>
-HTML 문서의 선언 / HTML 버전 5를 나타냄
<html lang="en">
-Lang 속성은 웹 접근성에 간한 명시
:스크린 리더에서 언어를 인식하여 자동으로 음성을 변환하거나, 해당 언어에 적합한 발음을 제공(한국어 설정은 lang="ko")
<meta charset="UTF-8">
- charset 속성은 문자를 인코딩할때 문자코드를 설정하는 역할을 지정
- 우리나라 윈도우 기본 문자셋인 EUC-KR을 사용해도 되지만, 다국어로 인코딩 하기 위해서는 UTF-8문자셋을 사용 하기 권장(인코딩하는 방식 설정해주는 것 UTP-F)
*타기계에 넣기위해 새롭게 재해석해서주는것:인코딩
<meta name="" content="">
name, http-equiv
Author, keyword, Description,...
>content: 설정 텍스트
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-->모바일로 최적화된 사이트에 포함하는 META 속성 설정
>목록 태그
<ul>
순서가 없는 목록 태그/블록태그
ex) -김사과
-반하나
<ol>
순서가 있는 목록 태그/블록태그
ex) 1.김사과
2.반하나
<dl>
사용자 정의 목록 태그까지
<dl>
<dt>제목1</dt>
<dd>내용1</dd>
<dd>내용2</dd>
<dt>제목2</dt>
<dd>내용1</dd>
<dd>내용2</dd>
</dl>
------------------------------------------------------------------------------------------------------------------------
>비트맵과 백터이미지
-비트맵 이미지
:픽셀이 모여서 만들어진 정보의 집합
:"레스터 이미지"라고 부름
:픽셀 단위로 화면에 렌더링함(rendering 이미지합성)
:그림판, 포토샵 등 툴로 편집
-백터 이미지
:수학적 정보의 형태들을 만들어내는 결과물
:이미지가 가지고 있는 점, 섬, 면의 위치,색상정보 등을 가지고 있음
:확대 및 축소를 해도 이미지가 깨지지 않음.
:일러스트 같은 툴로 편집
<종류>
1.jpg(jpeg)
-압축률이 훌륭하여 사진이나 예술분야에 사용된다.
-가장 널리 쓰이는 이미지 포맷
-표현 색상(24비트, 약 1600만 색상)이 뛰어나 고해상도 표시장치에 적합
-손실 압축
2.gif
-이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장할 수 있는 형태
-여러장의 이미지를 한 개의 파일에 저장할 수 있음 (움짤, 애니메이션)
-8비트(256색상) 컬러만 지원
-비손실 압축
3.png
-gif 의 대체 포맷으로 개발
-8비트, 24비트 컬러 이미지를 처리
-W3C 권장 포맷
-알파 채널 지원(투명도)
4.webp
-jpg,png,gif를 모두 대체할 수 있는 구글이 개발한
-이미지 포맷
-gif같은 애니메이션 지원
-알파 채널 지원(손실,비손실)
-완벽한 포멧
<이미지 호환 확인, 무료 이미지 사이트>
브라우저 호환성 확인 사이트
https://caniuse.com/
무료 png 이미지 사이트
https://www.iconfinder.com/
>이미지 태그
: 인라인태그
<img src = "이미지가 위치하는 주소 또는 경로"
alt= "이미지를 대체할 문자열">
*alt는 선택(알 수 없는 이미지가 나올경우를 대비하여 쓴다.)
>파일 경로
1. 절대 경로
-고유한 전체 경로
-http,https,file에 대한 경로 (file 경로는 사용하지 않는다.)
2. 상대 경로
현재 보고있는 문서의 위치를 기준으로 설정하는 경로
같은 폴더(현재 폴더) ./파일명.확장자
하위 폴더 폴더명/파일명.확장자
상위 폴더 ../파일명.확장자
'프로그래밍 > HTML' 카테고리의 다른 글
| HTML 4일차 - 폼,디스플레이 속성 (0) | 2021.12.17 |
|---|---|
| HTML 3일차 - 테이블 (0) | 2021.12.16 |
| HTML 1일차 -웹브라우저, HTML 의 요소 (0) | 2021.12.15 |