728x90
반응형
SMALL
HTML의 특수 태그
< : <
> : >
띄워쓰기 :
줄바꿈 태그
<br> = </br>
주석
<!-- --> 한줄 또는 여러줄
문단 태그 <p> ~ </p>
- 문단을 나타내는 태그
- 블록 태그(한 라인을 다 차지한다)
제목 태그 <h1> ~ <h1>
- h1 ~ h6 까지 크기
- 블록 태그
- 검색엔진에서 제목으로 표현됨
Auto Rename Tag
- 시작태그와 종료태그가 변화하면 태그를 동일하게 변경해줌
서식 태그
- 글자를 꾸며주는 태그
- <b>: 텍스트를 굵게 표현
- <strong): 텍스트를 굵게 표현, 리더기에서 거센 발음으로 읽어줌
- <i>: 텍스트를 이탤릭체로 표현
- <em>: 텍스트를 이탤릭체로 표현, 리더기에서 거센 발음으로 읽어줌
웹 표준
- 웹에서 표준적으로 사용되는 기술이나 규칙
- w3c가 권고한 표준안에 따라 웹사이트를 작성할때 이용하는 HTML, CSS, JavaScript등에 대한 규정
웹 접근성
장애인, 고령자 등이 웹사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할수 있도록 보장
목록 태그
- <ul>: 순서가 없는 목록 태그, 블록태그
· 김사과
· 오렌지
· 반하나
<ul>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ul>
에밋(emmet)
- html, xml, xsl 문서 등을 편집할때 빠른 코딩을 위해 사용되는 플러그인
- 원래 부르던명칭은 젠코딩
- <ol>: 순서가 있는 목록 태그, 블록태그
1. 김사과
2. 오렌지
3. 반하나
<ol>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ol>
vscode 코드정렬
전체선택: 컨트롤 + a
코드정렬: 컨트롤 + k,f
- <dl>: 정의 목록 태그, 블록 태그
해바라기반 선생님
김사과 학생
오렌지 학생
반하나 학생
<dl>
<dt>해바라기반 선생님</dt>
<dd>김사과 학생</dd>
<dd>오렌지 학생</dd>
<dd>반하나 학생</dd>
<dl>
이미지 태그
1. 비트맵 이미지
- 픽셀이 모여서 만들어진 정보의 집합
- 레스터 이미지라고 부름
- 픽셀 단위로 화면에 렌더링함
- 그림판, 포토샵 등 툴로 편집
2. 벡터 이미지
- 수학적 정보의 형태들이 만들어내는 결과물
- 이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고있음
- 확대 및 축소를 해도 이미지가 깨지지 않음
- 일러스트 같은 툴로 편집
jpg(jpeg)
- 압축률이 훌륭하여 사진이나 예술분야에 많이 사용
- 가장 널리 쓰이는 이미지 포멧
- 손실 압축
- 표현 색상(24비트, 약 1600만개 색상)이 뛰어나 고해상도 표시장치에 적합
gif
- 이미지 파일내에 이미지 및 문자열 같은 정보를 저장할 수 있는 파일
- 여러장의 이미지를 한 개의 파일에 저장할 수 있음(움짤, 애니메이션)
- 8비트(256색상)
- 비손실 압축
png
- gif 대체 포멧으로 개발
- 8, 24bit 컬러 이미지 처리
- 알파 채널 지원(투명도 0이면 투명 1로갈수록 불투명)
- w3c 권장 포멧
webp
- jpg, png, gif를 모두 대체할수 있는 구글이 개발한 이미지 포멧
- gif 같은 애니메이션 지원
- 알파채원 지원(손실, 비손실)
- 가장 완벽한 포멧
이미지 태그
- 이미지를 브라우저에 출력
- 인라인 태그(컨텐츠 크기 만큼만 영역 사용)
<img src='이미지가 위치하는 주소or파일 경로' alt='이미지를 대신할 문장'>
https://www.iconfinder.com/
무료로 png이미지를 얻을수 있는곳
속성
태그를 보완하는 역할
<!DOCTYPE html>: HTML 버전
<html lang="en">: lang="en", 리더기(장애인분둘을 위한)의 언어를 설정(en: 영어, ko: 한국어)
<head>
<meta charset="UTF-8">: 케릭터 셋이 utf-8 인코딩방식, 전세계의 모든국가의 os, 브라우저에서 모든 언어셋에 대해 설정
<meta http-equiv="X-UA-Compatible" content="IE=edge">: 익스플로어에서 엣지 웹 호환하게 해주는것
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 모바일 브라우저에서 가장 최적의 크기로 페이지를 보여주고, 확대/축소를 금지
<title>목록 태그</title>
</head>
메타 태그
- HTML 문서에 대한 정보를 정의 할때 사용
- <head> </head> 사이에 적용
- name, content, http-equiv, author, viewport, keyword, description....등 여러가지 속성
파일 경로 작성 방법
1. 절대경로
- 물리적 경로
- URL주소: https://t1.daumcdn.net/b2/creative/97194/9b05b283fc19c06a3fee05c8baf5748b.jpg
- 드라이브: C:\eadgnus\html\day1\sea1.png (웹사이트 개발시 사용하지 않음)
2. 상대경로
이미지가 HTML문서와 같은 디렉토리에 있는경우:
<img src="파일명">, <img src="./파일명">
이미지가 하위 디렉토리에 있는 경우:
<img src="디렉토리명/파일명">, <img src="./디렉토리명/파일명">
이미지가 상위 디렉토리에 있는 경우:
<img src="../파일명">, <img src="./../파일명">
이미지가 상위 디렉토리의 다른 하위 디렉토리에 있는경우:
<img src="../하위 디렉토리명/파일명">, <img src="./../하위디렉토리명/파일명">
728x90
반응형
LIST
'HTML' 카테고리의 다른 글
| HTML- <Table> (1) | 2023.03.24 |
|---|---|
| HTML- 책갈피 만들기(hyper link 이용) (0) | 2023.03.24 |
| HTML- 호스팅 (0) | 2023.03.24 |
| HTML- 하이퍼링크(Hyper link) (0) | 2023.03.24 |
| HTML- 기본편 (0) | 2023.03.23 |