[HTML5] - 5 - 게시글에 사진 넣는 법
#주의#
이 글은 강의 글이 아니다.
틀린 부분, 깔끔하지 못한 부분 있을 수 있다.
지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다.
여기까지 따라왔다면 잘했다.
이제 게시글에 사진을 넣어 볼 것이다.
그래서 어떻게 넣는데?
사실 사진을 넣을 수 있는 방법은 여럿 있다.
하지만 나는 폴더 내에 사진을 저장 해 둔 상태에서의 방법이다.
Index.html 파일이 있는 폴더 안에 images 라는 폴더를 생성해준다.
그 다음 images 폴더 안에 사진을 넣어준다.
나는 편의상 사진의 이름을 1, 2 로 지정해주었다.
이제 다시 Visual Studio로 돌아가서 경로만 추가해주면 끝이다.
아까 작성했던 <div class="card">에 사진 경로를 추가하는 것이다.
<div class="card">
<h3>환영합니다.</h3>
<p>완성하시면 이런 모습입니다.</p>
<img src="images/1.webp" alt="이미지" style="width: 100%;">
</div>
<div class="card">
<h3>할 수 있습니다.</h3>
<p>포기하지 마세요.</p>
<img src="images/2.webp" alt="이미지" style="width: 100%;">
</div>나는 사진의 확장자가 webp 라서 webp로 적었다.
각자 사진에 맞는 확장자와 이름을 준수하여 작성하면 된다.
사진을 넣고나면 이런식으로 출력 될 것이다.
하지만, 게시글마다 각자 다른 사진의 크기가 마음에 들지 않는다.
그렇다면 <style> 태그에 원하는 사이즈를 정해주면 된다.
.image {
width: 300px;
height: 200px;
}그리고, 아래 코드에 해당하는 <div class="card">의 맨 밑의 style="width: 100%">를 다른 것으로 바꿔야한다.
<div class="card">
<h3>환영합니다.</h3>
<p>완성하시면 이런 모습입니다.</p>
<img src="images/1.webp" alt="이미지" style="width: 100%;">이것으로 바꿔주면 된다.
<img src="images/1.webp" alt="이미지" class="image">차이점이 보이는가?
style 에서 class로 바꿔주었다.
이는 위에 있는 <style>태그에서 image를 언급하여 하나의 사이즈로 정했고,
밑에서 그 .image의 규격에 맞춰라 하는 것이다.
그렇다면 아래와 같이 출력될 것이다.
혹시 따라오다가 놓친 분들을 위해 전체 코드를 작성해놓겠다.
<!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>
<style>
.card {
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 20px;
}
.btn {
display: inline-block;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.btn:hover {
background-color: #0069d9;
}
.image {
width: 300px;
height: 200px;
}
</style>
</head>
<body style="background-color: black;">
<div class="hero">
<h1 style="color: white; text-align: center;">이리의 맥 이야기</h1>
<h2 style="color: white; text-align: center;">컴온!!!!</h2>
</div>
<div class="card">
<h3>환영합니다.</h3>
<p>완성하시면 이런 모습입니다.</p>
<img src="images/1.webp" alt="이미지" class="image">
</div>
<div class="card">
<h3>할 수 있습니다.</h3>
<p>포기하지 마세요.</p>
<img src="images/2.webp" alt="이미지" class="image">
</div>
<div>
<button class="btn"><a href="https://www.naver.com/" target="_blank">네이버</a></button>
<button class="btn"><a href="https://www.daum.net/" target="_blank">다음</a></button>
<button class="btn"><a href="https://www.google.com/" target="_blank">구글</a></button>
<button class="btn"><a href="https://www.yahoo.com/" target="_blank">야후</a></button>
</div>
</body>
</html>꾸준히 열심히 같이 걸어가길 바란다.
질문 주시면 잘은 몰라도 열심히 답하겠다.
'개발 이야기 > [HTML5]' 카테고리의 다른 글
| [HTML5] - 7 - 더보기 기능 만드는 법(Read More) (5) | 2023.05.02 |
|---|---|
| [HTML5] - 6 - 약식 페이지네이션(두번째 페이지 만드는 법) (0) | 2023.05.02 |
| [HTML5] - 4 - 버튼 만드는 법 (0) | 2023.05.02 |
| [HTML5] - 3 - 게시글 카드 만드는 법 (0) | 2023.05.02 |
| [HTML5] - 2 - 웹페이지의 head와 body (0) | 2023.05.02 |
댓글