-
HTML 사진첩 제작프로젝트/프로젝트_사진첩 2023. 8. 13. 17:57
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Memories</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet"> <style> body { padding-left: 20px; } .layout { width: 1247.33px; height: 800px; } .title { width: 1195px; font-size: 40px; /* font-style: italic; */ font-family: 'Dancing Script', cursive; padding-top: 10px; padding-bottom: 10px; padding-left: 5px; height: 50px; border-bottom: 0.8px groove rgb(255, 188, 188); color: rgb(255, 188, 188); } .photoLayout { padding-top: 20px; width: 1200px; height: 900px; } .line { box-sizing: border-box; width: 1200px; height: 200px; } .photo { box-sizing: border-box; margin: 2px; width: 196px; height: 196px; float: left; border: 0.5px } .img { width: 196px; height: 196px; border-radius: 6px; } </style> </head> <body> <div class="layout"> <div class="title">Memories</div> <div class="photoLayout"> <div class="line"> <div class="photo"><a href="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbXV8cf%2Fbtsq8KwcR0j%2FAAAAAAAAAAAAAAAAAAAAACTGR-lgqCVWQWwW3w9XQ0BPVJa7sZCBJaBGkUsKeNdU%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DQQvhE8CSI06XmUdWqEm3y7LOJSs%253D"><img class="img" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FwReEc%2Fbtsq1dzABMw%2FAAAAAAAAAAAAAAAAAAAAAD9t6MYZxZNbvOXNoBjTfPuFPw9ROs09v7GPOITJYyAu%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DIrAz%252Foo%252F%252FnGnwO8hMA99xoE4BnY%253D" alt="미에엥!"></a> </div> <div class="photo"><a href="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fcdxd4n%2FbtsqZyEwGxr%2FAAAAAAAAAAAAAAAAAAAAANyMRvzjVY-Hi2we-sYT92fHXmnsxAXQNsJ6VuQXcyg0%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DMeyczavbQXgucy%252FI2%252B%252F0FYSjTYY%253D"><img class="img" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbeKlGA%2Fbtsq1b2ShHj%2FAAAAAAAAAAAAAAAAAAAAAJNCjpdMtmo1l-KjWl6DhYEu-kzPIrXSfQ4zPEL0yoEB%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3D5uZ9osvUBQ6529QsPGNqAxXAwKM%253D" alt="미에엥!"></a> </div> <div class="photo"><a href="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FmRIgg%2Fbtsq1Jky9pt%2FAAAAAAAAAAAAAAAAAAAAAFgPW1uDWmvSjMH8HaJEYTD7DBptovcAdB5-3qaEN9Ll%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DE%252FFWOSx7TJy5M0QHmp3N6Qpsumg%253D"><img class="img" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FLUPC4%2Fbtsq500oANf%2FAAAAAAAAAAAAAAAAAAAAALi2Fb47SfZUYQ0M5OYUHycpRRO2DcuDjz50GUJWH8Zk%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3D00wKO9jfyzdSBTt7tZqvmnKvQ%252FY%253D" alt="미에엥!"></a> </div> <div class="photo"><a href="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FdhCTdw%2Fbtsq5b15Qns%2FAAAAAAAAAAAAAAAAAAAAAIZfc0HdKXRgk93mJHGoCz9FyRPZV1Ddz3So927_jodl%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3Dqae83fJBWs6QT3U8ik9YpLZlYlM%253D"><img class="img" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FRl1oD%2Fbtsq8HM1Jb2%2FAAAAAAAAAAAAAAAAAAAAADLC-yxfopVSSGt0tsMlNKmUKyn_X9cCZW0NwR0sqRwX%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3Dt7vTNsJwr7j975ItmHOHTmP1JGk%253D" alt="미에엥!"></a> </div> <div class="photo"><a href="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbA0jTT%2Fbtsq7aIA6Ht%2FAAAAAAAAAAAAAAAAAAAAABya_tQye7W0I2YvJFn5NsE-kEvxfTIBOzh_aaCIIgyK%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3D7ugAPOzGRhzNXCJjo4EhPKe3Xk4%253D"><img class="img" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FdOjFb2%2Fbtsq2lKGJ3w%2FAAAAAAAAAAAAAAAAAAAAAMFAHqz8UmYypUV66fI-qnB4YCVy21qsIgTqXqAiJWwf%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DCU8DsIVTyvt8w2EecRdaywBhSig%253D" alt="미에엥!"></a> </div> <div class="photo"><a href="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FoO4sx%2FbtsraumurrL%2FAAAAAAAAAAAAAAAAAAAAAMByw9h5YIaQpBaEfVyDFk1Rh-FPaSbdFtDV4dQlpYDU%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DGIS26r1PQznXNK8%252FwX%252BbgvvSVB4%253D"><img class="img" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbqmFtv%2Fbtsq5c7LTgJ%2FAAAAAAAAAAAAAAAAAAAAAKClio0o7YxkHrw7BDpC47Ibywb3aOgRgoijMFSLu3T-%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DSEb4setX2nq7p6imS%252FNarErsPpQ%253D" alt="미에엥!"></a> </div> </div> <div class="line"> <div class="photo"><a href="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2F0eKuf%2FbtsqZ17BXMx%2FAAAAAAAAAAAAAAAAAAAAAASpELMSeLiVQIzMKWt8N4NjmBCrevmQ_Hlmd0mfX9sf%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3D7sBqQQ6BsDtmMcs0bqbgLeyGMos%253D"><img class="img" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2F0Ef5S%2Fbtsq2QwYLXS%2FAAAAAAAAAAAAAAAAAAAAAPhItDSGFUZWt2x7LQjJ9XRKmuzjGhFmC5vzEN6fxAFq%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DWbszH%252BdumvkapIXCsaj8RTb80Y4%253D" alt="미에엥!"></a> </div> <div class="photo"><a href="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fc5ygZQ%2Fbtsq5dFBft8%2FAAAAAAAAAAAAAAAAAAAAAOOPEm7zcturIvxZc-OIDYb25Rl_aGF1qqq1Y2zXu9wR%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DoBLaOb8h2yIYqJHsf0iSeSlPBOY%253D"><img class="img" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FIfkfB%2Fbtsq2jF69tC%2FAAAAAAAAAAAAAAAAAAAAAJ5AydTAfXjAPSHIKJhVpZTHiBPKgRgVyyLiKnKvT-n-%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DkB%252FC4ds2j50e0rfs0KQnwtEBzdQ%253D" alt="미에엥!"></a> </div> <div class="photo"></div> <div class="photo"></div> <div class="photo"></div> <div class="photo"></div> </div> <div class="line"> <div class="photo"></div> <div class="photo"></div> <div class="photo"></div> <div class="photo"></div> <div class="photo"></div> </div> <div class="line"> <div class="photo"></div> <div class="photo"></div> <div class="photo"></div> <div class="photo"></div> <div class="photo"></div> </div> <div class="line"> <div class="photo"></div> <div class="photo"></div> <div class="photo"></div> <div class="photo"></div> <div class="photo"></div> </div> </div> </div> </body> </html>만들면서 새로 알게된것들
1.구글 웹폰트
2.vs코드 rgb로 색깔지정
3.div를 통해 레이아웃
4.이미지 클릭시 페이지 이동
5.네이버블로그는 이미지주소복사로 이미지를 가져올수없음(그래서 티스토리로만듬..)
사진첩 주소 : https://h-love-j.netlify.app/
'프로젝트 > 프로젝트_사진첩' 카테고리의 다른 글
(기능추가 3-2) 무한스크롤 적용하기 (0) 2023.08.22 (기능추가3-1) 무한스크롤 구현하기 (0) 2023.08.21 (기능추가2) grid와 fixed를 이용한 상단바 꾸미기 (0) 2023.08.19 (기능추가1)label태그를 이용한 업로드 버튼 꾸미기 (2) 2023.08.17 사진첩 프로젝트(230817 기능 추가 기획) (0) 2023.08.17