인덱스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>최초의 내 사이트</title>
</head>
<body>
<h1>내 홈페이지</h1>
<h2>최초의 내 홈페이지에 오신것을 환영합니다</h2>
<img src ="images/capybara.png" alt="카피바라">
</body>
</html>
하이퍼 링크
- 다른 페이지 또는 사이트로 연결하는 링크(문자 또는 이미지)
<a href='이동할 사이트 또는 문서의 경로'> 링크에 사용할 문자 또는 이미지 </a>
✔️ 호스팅
서버 컴퓨터의 전체 또는 일정 공간을 이용할 수 있도록 임대해주는 서비스
FTP(File Transfer Protocol)
- 클라이언트 - 서버(c/s)용 프로토콜
- 클라이언트가 파일을 요청하면 서버가 요청된 파일을 제공
- 클라이언트가 서버로 파일을 전달
- 주로 대량의 파일을 처리할 때 사용
- 기본포트: 21
✔️ 닷홈 호스팅 주의사항
- 첫페이지는 항상 index.html로 업로드(파일이름 소문자로 꼭 작성하기!)
- html 디렉토리에 저장해야 함
파일질라 다운로드
FTP 클라이언트 프로그램으로 사용
vscode에 ftp-simple 설치
비쥬얼스튜디오 코드에 설치하여 FTP 프로그램으로 사용
- 설정
f1키 -> ftp-simple: comfig - FTP commection setting을 선택
ex)
[
{
"name": "이름암거나",
"host": "ip 주소",
"port": 21,
"type": "ftp",
"username": "아이디",
"password": "비밀번호",
"path": "/",
"autosave": true,
"confirm": true
}
]
- 접속
f1키 -> ftp-simple: Remote directory open to workspace
1. 하이퍼링크.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>하이퍼링크</title>
</head>
<body>
<h2>하이퍼링크</h2>
<a href="http://koreaisacademy.co.kr/">코리아 아카데미</a>
<a href="http://www.daum.net"><img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" alt="다음로고"></a>
<a href="subpage.html">서브페이지</a>
<a href="subpage.html"><img src="sea2.png" alt="바다이미지"></a>
</body>
</html>
코리아 아카데미 누르면 학원 사이트로 들어가지고, 다음 이미지를 누르면 다음페이지가 열림!
서브페이지와 고래를 누르면 만들어둔 서브페이지로 들어가짐!
서브페이지 코드!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>서브페이지</title>
</head>
<body>
<h2>서브페이지</h2>
<p><img src ="capybara.png" ></p>
</body>
</html>
책갈피
<a> 태그의 name 속성 또는 id 속성을 이용하여 책갈피 기능을 설정
가려는 곳으로 슈슉 데려다줌
<a href="#도착지에 쓰일 name">링크에 사용될 문자 또는 이미지</a>
<a name="도착지 name">문자 또는 이미지</a>
<태그 id="도착지 name">문자 또는 이미지</a>
<a href="#도착지 name">문자 또는 이미지</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>책갈피</title>
</head>
<body>
<h2 id = "menu">책갈피</h2>
<p><a href="#book">목적지로 이동합니다!</a></p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti tempore possimus consequuntur molestiae nisi quae dolores nemo iure doloremque tempora nihil suscipit ipsa similique dolore, velit, ipsam, a sit debitis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti tempore possimus consequuntur molestiae nisi quae dolores nemo iure doloremque tempora nihil suscipit ipsa similique dolore, velit, ipsam, a sit debitis!</p>
<!-- 위에 쓴거 더 여러줄 해서 줄 길어지게 하기 -->
<p><a name = "book">도착지</a></p>
<p><a href="#menu">위로</a></p>
<p><a href="#">위로2</a></p>
</body>
</html>
'KDT 수업 > HTML | CSS' 카테고리의 다른 글
| [CSS]선택자의 종류2 (0) | 2023.03.30 |
|---|---|
| [CSS]선택자의 종류1 (0) | 2023.03.30 |
| [CSS]CSS란? (0) | 2023.03.29 |
| [HTML] day1 (+ 추가) 파일 경로 작성방법 (0) | 2023.03.24 |
| [HTML] day1: HTML 태그 (2) | 2023.03.23 |