본문 바로가기
HTML 연습

HTML 사진 첨부하는법

by CloudEngineer 2024. 4. 28.

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 부분만 가져가셔도 될것 같습니다.

 

아직 연습중이라 부족한 부분이 많습니다.

제가 연습한 부분을 기록하면서 다시 한번 공부하는 용도로 작성하는 글이니

피드백 주신다면 감사하게 받겠습니다!!