IP 이용해서 html에 원하는 사진 첨부하는 방법입니다.
저는 사진을 pinterest에서 저장한 후, 적용했습니다.
사진을 리눅스로 가져올 때 조심해야할 부분은 이미지 url에
.jpg가 없다면 적용되지 않으니 복사하실 때 주의하세요!
!!!!!! 파일 저장은 /var/www/html/ 저장경로 안에 저장해줘야 합니다 !!!!!!!!
먼저, wget <image url> 을 통해 사진을 가져와줍니다.
사진이 저장되면 긴 url이 잘려서 저렇게 저장 되는데,
이제 이 source 파일을 index파일에 저장합니다.
저장하기 전에 파일명을 알아보기 쉽게 mv명령을 통해 바꿔줍니다.
저 같은 경우 배우 김지원님 사진을 저장했기 때문에 jiwon.jpg로 바꿨습니다.
< 제가 연습중인 html 작성 코드를 보여드리겠습니다>
-------------------시작----------------------------
<html>
<head>
<meta charset="utf-8">
<title>연습중이요 . </title>
</head>
<body>
지원이 누나의 미모를 한번 보세요 미쳤습니다. <p>
사진 감상하시죠.<br>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Effect</title>
<style>
/* CSS for image hover effect */
.image-container img {
width: 300px;
transition: transform 0.3s ease;
}
.image-container img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<!-- Image with hover effect -->
<div class="image-container">
<img src="jiwon.jpg" alt="Image">
<img src="jiwon2.jpg" alt="Image">
<img src="jiwon3.jpg" alt="Image">
</div>
</body>
</html>
빨간색 부분을 저장한 소스 파일명으로 바꾸기만 하면
web에 적용되어 보이게 됩니다.
제가 적용한 css 코드는 사진에 마우스를 올렸을 때 사진이 확대되어
보이는 코드를 사용했습니다. 시각적으로 더 재밌는 효과를 줍니다.
사용해보고 싶은 분들은 css 부분만 가져가셔도 될것 같습니다.
아직 연습중이라 부족한 부분이 많습니다.
제가 연습한 부분을 기록하면서 다시 한번 공부하는 용도로 작성하는 글이니
피드백 주신다면 감사하게 받겠습니다!!