-
(기능추가4-1)상세팝업 레이아웃 구현하기프로젝트/프로젝트_사진첩 2023. 9. 6. 23:23
-전체소스코드
html
<?php$conn=mysqli_connect("localhost:81","root","mysql","project_memories");?><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Memories</title><link href="style_display.css" rel="stylesheet"></head><body><div class="layout"><div class="topLayout"><div class="titleContents" id="who">who</div><div class="titleContents" id="when">when</div><div class="titleContents" id="close">X</div></div><div class="photo"><div class="photoLayout" id="leftLayout"></div><div class="photoLayout" id="rightLayout"><div class="chatLayout"></div><div class="chatInputLayout"></div></div><div></div></body></html>css
html, body {width : 100% ;height : 100% ;margin : 0;}
div.layout{box-sizing: border-box;width : 75% ;height : 100% ;margin-left : 12.5%;margin-right : 12.5%;border : 0.6px groove rgb(208, 208, 208);}
div.photo{height : 92%;}div.photoLayout{height : 100%;}
div.topLayout{display:table;box-sizing: border-box;width : 100%;height : 8%;border-bottom : 0.6px groove rgb(208, 208, 208);}
div.titleContents{display:table-cell;vertical-align:middle;height : 100%color : rgb(208, 208, 208);line-height: 250%;float : left;}
#who {box-sizing: border-box;float : left;padding-left: 2%;width : 62%;height : 100%;}
#when {box-sizing: border-box;float : left;width : 32%;height : 100%;}
#close {box-sizing: border-box;float : right;padding-right: 8px;width : 3%;height : 100%;}
div#leftLayout{box-sizing: border-box;width : 70%;border-right : 0.6px groove rgb(208, 208, 208);float : left;}
div#rightLayout{box-sizing: border-box;width : 30%;float : left;display : grid;grid-template-rows: 1fr 45px;}
div.chatLayout{box-sizing: border-box;}
div.chatInputLayout{box-sizing: border-box;border-top : 0.6px groove rgb(208, 208, 208);}현재 페이지
가장 큰 화면엔 사진, 오른쪽 길쭉한 박스엔 댓글과 댓글input을 넣을 예정 느낀점>
1.사실 하는것 자체는 어렵지 않았는데, 구조적으로 크기조절을 하는것에 시간이 많이 걸린것 같다.
->figma를 이용하면 더 좋았을거 같다(다음에 공부해보자)
2.who, when, x(닫기 버튼)의 위치를 조절하는데 시간이 오래걸렸다. 페이지가 줄어들면 저 박스들도 같이 줄어들어야하는데, 비율개념이 안잡혀있어서 여러가지 시도를 하면서 더 오래걸렸다.
아직까지 문제점이 많아보이지만(수직으로 줄일때 글자의 위치가 고정되어있는것 vh나 % vw같은 비율단위를 다 써봤지만 별 효과가 없는거 같다.) 이후 경험이 더 쌓이면 더 완벽하게 만들수 있을것이라 생각한다.
->아래의 페이지를 참고하여 display:table 속성과 vertical-align 속성을 활용하니 해결되었다.
https://velog.io/@hsecode/CSS-%EC%88%98%EC%A7%81-%EC%A4%91%EC%95%99-%EC%A0%95%EB%A0%AC
[CSS] 수직 가운데 정렬, 수직 중앙 정렬 하기vertical align
그냥 가운데에 놔주세요.. 아니! 세로로 중앙 정렬하기는 가로 중앙정렬처럼 간단하지 않다구요 🥺
velog.io
->table 속성에 관한 링크
웹퍼블리셔가 알고있어야 할 display: table 속성!
안녕하세요.! 글 작성하다가 방금 꿀밤을 한대 맞은(힁 ㅠㅠ....) 맑은 커뮤니케이션의 나이 막내(?) 스물다섯스물하나입니다.! 오늘 다룰 주제는 사이트에서 많이 사용되는 형태인 동일한 넓이와
www.biew.co.kr
기획안
'프로젝트 > 프로젝트_사진첩' 카테고리의 다른 글
(기능추가4-3) 작성자 테이블 구축, 양식초기화, select 태그 (0) 2023.09.09 (기능추가4-2) 상세페이지 내용 DB에서 불러오기 (0) 2023.09.09 (기능추가5-1) 업로드, 로드기능 구현하기 (0) 2023.09.05 (기능추가 3-2) 무한스크롤 적용하기 (0) 2023.08.22 (기능추가3-1) 무한스크롤 구현하기 (0) 2023.08.21