웹사이트에 링크 넣는 법
<!DOCTYPE html>
<html>
<head>
<title>Tistory</title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<p> <b>HTML</b>에 대해서 알아보자</p>
<a href="http://google.com" target="_blank">구글</a>
</body>
</html> 위의 코드처럼 <a href="주소"> 주소이름</a>을 입력하면 된다. 주소 이름 부분에는 내가 원하는대로 적으면 된다 !여기서 탭이 따로 열리길 바란다면 target="_blank"을 덧붙이면 된다.
웹사이트에는 이렇게 반영되는 것을 볼 수 있다.
만약에 웹사이트가 아닌 내가 가지고 있는 html파일로 이동하길 원한다면 파일경로를 적어줘야한다.
<a href="그 파일이 있는 폴더 이름 /내가 가고싶은 html 파일"> 파일이름 </a> 을 입력하면 된다.
대신 자신과 같은 폴더에 있는 html파일로 이동할땐 따로 폴더명을 안 적어도된다 ! 저 위에 practice.html가 그 예시이다.
하지만 폴더가 다를 경우는 경로를 다 적어줘야한다. 또한, 자기자신에게 링크를 걸때는 17번줄처럼 #만 입력하면된다.
웹사이트에 이미지 넣는 법
난 저작권이 없는 무료이미지 사이트인 픽사베이에서 이미지를 가져왔다 ! -->https://pixabay.com/ko/
<!DOCTYPE html>
<html>
<head>
<title>Tistory</title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<img src="https://cdn.pixabay.com/photo/2021/05/14/16/06/building-6253867_960_720.jpg">
</body>
</html>
사진의 이미지 주소를 복사한 후 <img src="이미지 주소"> 을 입력하면 된다.
<img src="https://cdn.pixabay.com/photo/2021/05/14/16/06/building-6253867_960_720.jpg" width="300">
width(가로) , height(세로) 를 이용해서 길이도 조정할 수도 있다.
<img src="folder1/photo.jpg">아니면 링크와 비슷한 방법으로 파일경로를 통해서 이미지를 넣을 수도 있다.
이미지 가운데 정렬하기
img {
display: block;
margin-left: auto; /*margin=여백*/
margin-right: auto;
}<style> 태그 안에 img 를 입력한 뒤, 위와 같이 내용을 입력해주면 된다.
이미지에 링크 넣기
<a href="http://google.com" target="_blank" ><img src="https://cdn.pixabay.com/photo/2021/05/14/16/06/building-6253867_960_720.jpg">
방금 배운 내용을 그대로 합쳐서 이동하고싶은 링크와 원하는 이미지를 적어주면 웹사이트에서 이미지를 클릭 시,
내가 원하는 사이트로 이동할 수 있다. target="_blank" 입력 시 , 탭이 따로 열린다는 사실을 잊지말자
'프론트엔드 > HTML CSS' 카테고리의 다른 글
| 인턴 교육 시작 + <fieldset> , <table> 태그 정리 (0) | 2022.08.30 |
|---|---|
| css 기초 개념 정리 (0) | 2022.05.30 |
| [HTML/CSS] CSS 파일을 적용하는 방법 (3) | 2021.06.12 |
| [HTML/CSS] 기초 개념 ③ 클래스(class), 아이디(id) (0) | 2021.06.11 |
| [HTML/CSS] 기초 개념 ① <b>,<i> , 주석 ... (1) | 2021.05.31 |