속성 : 태그를 보완하는 역할
HTML 해석 및 풀이
<!DOCTYPE html> : 선언문, HTML5 나타냄
<html lang="en"> : 리더기의 언어를 설정.(시각장애인이신분들의 리더기를 말함. en : 영어, ko : 한국어)
lang = "en"
---- ----
속성 속성값
<meta charset="UTF-8"> : 언어셋을 설정
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport : 뷰포인트를 설정하겠다.
width=device-width : width는 사용자의 디바이스의width에 맞추겠다.
initial-scale=1.0 : 확대, 축소는 1.0으로 고정시킨다.
❖메타 태그<meta>
- HTML문서에 대한 정보를 정의할 때 사용
- <head>와 </head> 사이에 적용
- name, content, http-equiv, author, viewport, keyword, description등 여러가지 속성들을 사용
<title>이미지 태그</title> : 제목 표시줄의 텍스트를 출력해주는 역활
이미지
1. 비트맵 이미지
- 픽셀이 모여서 만들어진 정보의 집합
- 레스터 이미지라고도 부름
- 픽셀 단위로 화면에 렌더링함
- 그림판, 포토샵 등 툴로 편집이 가능함
- bmp, jpg(jpeg), gif, png, webp ...
2. 벡터 이미지
- 수학적 정보의 형태들이 만들어내는 결과물
- 이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고 있음
- 확대 및 축소를 해도 이미지가 깨지지 않음
- 일러스트 같은 툴로 편집을 함
jpg(jpeg)
- 압축률이 훌륭하여 사진이나 예술분야에 많이 사용
- 가장 널리 쓰이는 이미지 포멧
- 손실 압축
- 표현 색상(24비트, 약 1600만 색상)이 뛰어나 고행상도 표시장치에 적합
gif
- 이미지 파일내에 이미지 및 문자열 같은 정보를 저장할 수 있는 파일
- 여러장의 이미지를 한 개의 파일에 저장할 수 있음(움짤)
- 8비트(256색상) 컬러만 지원
- 비손실 압축
png
- gif의 대체 포멧으로 개발
- 8비트, 24비트 컬러 이미지 처리
- 알파 채널 지원
- w3c 권장 포멧
webp
- 구글에서 만든 가장 완벽한 포멧
- jpg, png, gif를 모두 대체할 수 있는 포멧
- 알파 채널 지원(손실, 비손실)
이미지태그<img>
- 이미지를 브라우저에 출력
- 인라인 태그
<img src='이미지가 위치하는 주소 또는 파일경로' alt = '이미지를 대신할 문장'>
▶︎파일 경로 작성 방법
1. 절대 경로(물리적 경로)
URL : https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png
파일 : file:///Users/admin/Documents/korea/HTML/Day2/rain4.png (웹사이트 개발시 사용하지 않음)
2. 상대 경로
- 이미지가 HTMl 문서와 같은 디렉토리에 있는 경우
<img src='파일명'>, <img src='./파일명'>
- 이미지가 하위 디렉토리에 있는 경우
<img src='test/파일명'>,<img src='./test/파일명'>
- 이미자가 상위 디렉토리에 있는 경우
<img src='../파일명'>, <img src='./../파일명'>
- 이미지가 상위 디렉토리의 하위 디렉토리(test)에 있는 경우
<img src='../test/파일명'>, <img src='./../test/파일명'>
하이퍼 링크
- 다른 페이지 또는 사이트로 연결하는 링크(문자 또는 이미지)
- 인라인 태그
<a href='이동할 사이트 또는 문서의 경로'>링크에 사용할 문자 똔느 이미지</a>
❖호스팅
서버 컴퓨터의 전체 또는 일정 공간을 이용할 수 있도록 임대해주는 서비스
FTP(File Transfer Protocol)
- 클라이언트와 서버간의 파일 전송 프로토콜
- 주로 대량의 파일을 처리할 때 사용
- 기본포트 : 21
▶︎ 닷홈 호스팅 주의사항
- 첫 페이지는 항상 index.html로 업로드 해야 함(소문자로 해야함)
- html 디렉토리에 저장해야 함
extension
ftp-simple 설치
f1키 -> ftp-simple : config - FTP connection setting ->
이렇게 나온다.
[
{
"name": "아무이름",
"host": "ftp IP주소",
"port": 21,
"type": "ftp",
"username": "ftp아이디",
"password": "ftp비밀번호",
"path": "/",
"autosave": true,
"confirm": true
}
]
f1키 0> ftp-simple -> Remote directory open to workspace
책갈피
<a> 태그의 name 속성 또는 id 속성을 이용하여 책갈피 기능을 설정
<a name = "도착지">문자 또는 이미지</a>
<특정 태그 id = "도착지">문자 또는 이미지></a>
<a href="#도착지">링크에 사용될 문자 또는 이미지</a>
'Study > HTML' 카테고리의 다른 글
| [HTML] Day3 (0) | 2023.10.10 |
|---|---|
| [HTML] Day2-1 (1) | 2023.10.10 |
| [HTML] Day1 (0) | 2023.09.25 |
| [HTML] 활용 (0) | 2023.09.25 |
| HTML을 의한 VScode 설치 (0) | 2023.09.25 |