***속성이란?
태그를 보완하는 역할로 일반적으로 속성 이름과 벨류(값)로 되어있습니다.
<a href="https://www.example.com" alt="예시 웹사이트">클릭하세요</a>
a 태그 안에 href라는 속성 이름(하이퍼링크) = "https://www.example.com" 라는 속성 값(링크가 이동할 URL주소)이 있습니다. 이어서 alt 라는 속성 키( 이미지의 대체 텍스트(Alternative Text)를 제공) 와 = "예시 웹사이트"(실제 띄울 값)라는 값이 있는걸 볼 수 있습니다.
1. 기본 코드 화면
vs code에서 .html파일을 생성하고 !를 입력하면 기본 코드가 생성됩니다.
<!DOCTYPE html> : 선언문입니다. 해당 HTML언어가 HTML 5임을 나타냅니다.
<html lang="en"> : 리더기의 언어를 설정합니다. (en: 영어, ko: 한국어)
<meta charset="UTF-8"> : 언어셋을 설정합니다.
✔️ 메타 태그 <meta>
헤드와 헤드 사이에서 페이지 성격을 나타냅니다. 따라서 와 사이에 적용하고 HTML 문서에 대한 정보를 정의합니다.
- name, content, http-equiv, author, viewport, keyword, description 등 여러가지 속성들을 사용합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
: [해석] 디바이스 가로폭에 맞춰서 뷰포트를 조절, 확대-축소 방지(1.0으로 고정)
<title>Document</title> : 제목 표시줄에 텍스트 출력합니다. 기본은 Document로 지정되어있고 표출을 희망하는 제목으로 변경하면 됩니다.
2. 이미지
1. 비트맵 이미지 (웹에서 사용) ✔️
- 픽셀이 모여서 만들어진 정보의 집합입니다.
- 레스터 이미지라고도 부릅니다.
- 픽셀 단위로 화면에 렌더링합니다.
- 그림판, 포토샵 등 툴로 편집 가능합니다.
- bmp, jpg(jpeg), gif, png, webp ...
2. 벡터 이미지
- 수학적 정보의 형태들이 만들어내는 결과물입니다.
- 이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고 있습니다.
- 따라서 확대 및 축소를 해도 이미지가 깨지지 않습니다.
- 일러스트 같은 툴로 편집합니다.
- 웹에서 사용하는 비트맵 이미지의 종류
jpg(jpeg)
- 압축률이 훌륭하여 사진이나 예술분야에 많이 사용
- 가장 널리 쓰이는 이미지 포멧
- 손실 압축 (여러번 복사하면 화질이 흐려짐)
- 표현 색상(24비트, 약 1600만 색상)이 뛰어나 고해상도 표시장치에 적합
gif
- 이미지 파일 내에 이미지 및 문자열 같은 정보를 저장할 수 있는 파일
- 여러장의 이미지를 한 개의 파일에 저장할 수 있음(움짤 등)
- 8비트(256 색상) 컬러만 지원
- 비손실 압축
png
- gif의 대체 포멧으로 개발
- 8비트, 24비트 컬러 이미지 처리
- 알파 채널 지원(투명도를 조정할 수 있음)
- W3C 권장 포멧
webp
- 구글에서 만든 가장 완벽한 포멧
- jpg, png, gif를 모두 대체할 수 있는 포멧
- 알파 채널, 손실, 비손실 전부 지원
- 최근에 나와서 이전 브라우저에서 호환X
3. 이미지 태그
이미지 태그 <ing>
- 이미지를 브라우저에 출력할 수 있는 태그입니다.
- 인라인 태그(본인 크기 만큼만 차지)입니다.
- 닫는 태그가 따로 없습니다.
<img src = '이미지가 위치하는 주소 또는 파일경로' alt = '이미지를 대신할 문장'>
✔️ 파일 경로 작성 방법
1. 절대 경로(물리적 경로)
URL: https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png (이미지에서 이미지 주소 복사)
파일: C:\jun\HTML\Day2\rain1.png
(!!! 웹사이트 개발시 사용하지 않음 !!! 서버 컴퓨터에 방문한 클라이언트 컴퓨터에는 해당 자료들이 존재하지 않기때문에 사용이 불가합니다.)
2. 상대 경로
- 이미지가 HTML문서와 같은 디렉토리에 있는 경우
<img src = '파일명'>, <img src = './파일명'>
- 이미지가 하위 디렉토리(test)에 있는 경우
<img src = 'test/파일명'>, <img src = './test/파일명'>
- 이미지가 상위 디렉토리에 있는 경우
<img src = '<../파일명'>, <img src='./../파일명'>
- 이미지가 상위 디렉토리의 하위 디렉토리(test)에 있는 경우
-<img src = '<../test/파일명'>
3. 하이퍼 링크
- <a> 태그는 하이퍼링크(Hyperlink) ; 다른 페이지 또는 사이트로 연결하는 링크를 생성하는 데 사용되는 요소입니다. 이 태그는 사용자를 다른 웹 페이지, 문서, 파일 또는 웹 리소스로 연결할 수 있도록 합니다. 주로 텍스트 또는 이미지를 클릭할 때 다른 위치로 이동하거나 다른 웹 페이지로 이동하는 링크를 생성하는 데 사용됩니다.
- 인라인 태그입니다.
<a href = '이동할 사이트 또는 문서의 경로'> 링크에 사용할 문자 또는 이미지</a>
위는 '서브페이지로 이동'이라는 텍스트를 링크로 사용하고 아래는 'rain4.png'라는 이미지를 클릭하면 "./subpage/1-1.이미지태그.html" 페이지로 이동하게 됩니다.
4. 책갈피
<a> 태그의 name 속성 또는 id 속성을 이용하여 책갈피 기능을 설정할 수 있습니다.
- 도착지로 갈 링크 설정
<a href="#도착지"> 링크에 사용될 문자 또는 이미지</a>
- 도착지: 링크를 누르면 도착할 곳에 설정해둔 id 혹은 name 명 ' '을 달아둔다.
<a name ="도착지"> 문자 또는 이미지</a>
<태그 id ="도착지"> 문자 또는 이미지</a>
✔️ 호스팅
서버 컴퓨터의 전체 또는 일정 공간을 이용할 수 있도록 임대해주는 서비스.
닷홈 호스팅
닷홈은 도메인, 무료 웹호스팅, 웹빌더, 메일호스팅, SSL보안인증서, 서버호스팅, 코로케이션 등 다양한 호스팅 서비스를 제공하고 있습니다.
www.dothome.co.kr
✔️ 닷홈 호스팅 주의사항
- 첫 페이지는 항상 index.html로 업로드 해야 함(소문자)
- html 디렉토리에 저장해야 함
FTP(File Transfer Protocol)
- 클라이언트와 서버간의 파일 전송 프로토콜
- 주로 대량의 파일을 처리할 때 사용
- 기본포트 : 21
✔️ extension
ftp-simple 설치
F1키 - > ftp-simple : comfig - FTP connection setting ->
[
{
"name": "이름",
"host": "FTP IP 주소",
"port": 21,
"type": "ftp",
"username": "FTP 아이디", ->
"password": "FTP 비밀번호",
"path": "/",
"autosave": true,
"confirm": true
}
]
F1키 -> ftp-simple: Remote directory open to workspace
'웹 > HTML' 카테고리의 다른 글
| HTML(span, div, Semantic 태그) (0) | 2023.10.10 |
|---|---|
| HTML(폼 태그) (0) | 2023.10.08 |
| HTML (테이블 태그) (0) | 2023.10.08 |
| HTML 웹 살펴보기 (2) | 2023.09.25 |
