https://www.udemy.com/course/so_easy_html_css/
유데미 <너무 쉬운 HTML/CSS 입문> 에서 학습한 내용을 정리하였다.
링크에 대해 알아보자.
1. 앵커 Anchor
<a href="https://www.google.com">Visit Google</a>-태그는 <a>, </a>
-href 속성을 이용할 때 URL 주소를 사용하여 다른 리소스로 연결
-href는 hyper reference의 약어, URL은 Uniform Resource Locator 의 약어.
-href는 내부적으로 클릭했을 때 나오는 사이트.
-실제로 사용자 눈에 보이는 것은 <a>와 </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>Document</title>
</head>
<body>
<a href="https://www.google.com">Visit Google</a>
</body>
</html>
Visit Google이라는 파란색 글씨를 눌러보면
이렇게 구글이 나온다.
2. URL에 대해 더 자세히 알아보자.
https://www.google.com/search?q=url
URL
URL은 네트워크 상에서 자원이 어디 있는지를 알려주기 위한 규약이다. 즉, 컴퓨터 네트워크와 검색 메커니즘에서의 위치를 지정하는, 웹 리소스에 대한 참조이다. 쉽게 말해서, 웹 페이지를 찾
www.google.com
이라는 URL이 있다.
이 url로 들어가면 구글에 'url'을 검색한 결과가 나온다.
(1) 프로토콜 Protocol: https://
예: http, https,ftp
-일반적으로는 http라는 프로토콜 사용.
-보안 통신이 필요한 경우에는 https라는 프로토콜 사용.
왠만한 사이트는 다 https로 접속하도록 되어있음.
-ftp는 file transport protocol.
서버와 나 사이에 파일을 주고받기 위한 프로토콜.
자주 사용하지는 않고 특수한 경우에 사용됨.
(2) 도메인 이름 Domain Name / 서버 주소 : www.google.com
- 원래는 숫자로 이루어진 IP 주소를 이용해야 함. 근데 아이피 주소는 사람이 외우기 쉽지 않고 계속 변할 수 있기 때문에 이름을 IP 주소와 연결시켜 놓은 것이 domain name.
Domain name을 IP 주소와 연결시켜 주는 것이 DNS 서비스
- 때로는 포트 번호(Port number)를 포함한다.
우리가 자주 사용하는 프로그램마다 고유의 포트 번호가 있음. 근데 우리가 특수하게 그 포트번호를 바꿔 사용할 수도 있음.
- 기본적으로 http:는 80번 포트를 이용하고, https:는 443 포트를 이용함.
포트번호를 생략하면 기본적으로 사용하는 포트번호로 자동적으로 접속해줌.
특수한 경우가 아니라면 안 써줘도 됨.
(3) 경로 Path : /search
-폴더명, 파일명을 포함한다.
(4) 쿼리스트링 Querystring: ?q=url
- 추가적인 정보를 가지고 서비스 요청
- 이 경우는 검색창에 'url'이라는 검색어를 입력한 것이다.
- 사이트마다 쿼리스트링을 이용하는 방법은 다 다름.
3.
URL의 다양한 형태를 보자.
<a href="https://www.google.com">Querystring</a>
<a href="https://142.250.66.132/search?q=url">IP Address</a>
<a href="https://dic.daum.net/word/view.do?wordid=ekw000081980">Daum Subdictionary</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>Document</title>
</head>
<body>
<a href="https://www.google.com">Querystring</a>
<a href="https://142.250.66.132/search?q=url">IP Address</a>
<a href="https://dic.daum.net/word/view.do?wordid=ekw000081980">Daum Subdictionary</a>
</body>
</html>웹 페이지에는 다음과 같이 표현된다.
<a href="https://142.250.66.132/search?q=url">IP Address</a>는 IP 주소로 도메인 주소 대신 IP 주소를 이용한 것이다.
4.
우리가 URL 주소를 사용할 때 절대경로보다는 상대경로를 더 많이 쓴다.
(1) 절대 경로:
- 파일의 탐색 경로가 파일 시스템의 루트로부터 시작해 명시된 파일의 경로 이름.
- 누가 사용하든지 간에 그 리소스로 찾아갈 수 있게끔 만들어놓은 것.
(2) 상대 경로:
- 내가 현재 보고 있는 웹페이지를 기준으로, 같은 폴더에 있는 다른 페이지냐 혹은 상위 디렉토리에 있는 페이지냐 혹은 하위 디렉토리에 있는 페이지냐 하는 상대적인 위치에서 찾아갈 수 있게끔 만들어 놓은 것.
- 현재 접속해 있는 서버에서 상대적인 경로(Path)를 표시하는 방법
5. 상대 경로
경로를 찾아갈 때
-windows에서는 \ (역슬래시) 사용
- 웹에서는 / (슬래시) 사용
./ 은 현재 폴더
../은 상위 폴더
ex)
<a href="상대경로"></a>(1) 현재 폴더에 있는 present.html 참조
present.html 보통은 이렇게 사용됨
./present.html
(2) 상위 폴더에 있는 upper.html 참조
../upper.html
(3) root folder에 있는 in_root.html 참조
/in_root.html
(4) fol 라는 이름의 하위 폴더에 있는 in_fol.png 파일 참조
fol/in_fol.png
주로 (3),(4),(1) 이 많이 사용됨.
6. 타겟(Target) 속성
<a href="https://www.google.com" target="_blank">Visit Google</a>- 링크를 열 때, 어떤 window를 이용할 지 지정
- 생략하면 현재 창에서 열리고, _blank로 지정하면 새 창이 열림
<!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>Document</title>
</head>
<body>
<a href="https://www.google.com" target="_blank">Visit Google</a>
</body>
</html>웹 페이지에서 아래와 같이 표현된다.
눌러보면
이렇게 새 창에서 뜨는 것을 확인할 수 있다.
7.
bookmark.html 을 만들고 내가 가장 자주 찾는 사이트 3곳의 즐겨찾기를 만들어보았다.
<!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>Document</title>
</head>
<body>
<h1>My top 3 favorite sites.</h1>
<a href="https://www.google.com" target="_blank">Google</a>
<br><br>
<a href="https://www.youtube.com" target="_blank">Youtube</a>
<br><br>
<a href="https://www.naver.com/" target="_blank">Naver</a>
</body>
</html>
'Front-End > HTML_CSS' 카테고리의 다른 글
| [HTML/CSS] 220318 학습일기 (0) | 2023.03.19 |
|---|---|
| [HTML/CSS] 220317 학습일기 (0) | 2023.03.18 |
| [HTML/CSS] 230316 학습일기 (0) | 2023.03.17 |
| [HTML/CSS]220314 학습일기 (0) | 2023.03.15 |
| [HTML/CSS] 230312 학습일기 (2) | 2023.03.13 |
