2022-08-04
오늘 진행 사항
1) 오전 10시 멘토링
뭔가 멘토링 내용 정리 담당이 된 듯
220804멘토링
이번주에 마무리되면 다음주에 코드리뷰도 하고
URL과 함께 리소프트에 제출할 때
1) 5조만의 특징, 구현 포인트 추가작업한 것들 등.. 아까우니까 문서(내용)를 준비해둬도 좋을 듯
왜 그렇게 구현을 했는지....
2) 테스트 진행한 내용도 문서 만들면 좋을듯
2) 조 모임 간단히 후 개별 작업 진행
3) 개발일지 작성
까먹지 않으려고 작업 진행 어느 정도 되면 바로 쓸 생각
4) 4시 40분 모여 폼제출 후 해산할 듯
2) 개별 작업 진행
미디어 쿼리를 계속 진행중.
1280px 기준으로 세부적인 페이지 수정중에 있다.
- 화면이 작아지면서 flex했던 레퍼런스 로고가 튀어나가는 현상을 고쳐야 한다
-> 해결 방법
1) html 구조에서 div class="logo-wrap"으로 클래스 지정
2) 미디어 쿼리에 logo-wrap:last-child로 마지막에 튀어나온 로고 부분에 한번더 flex
3) 그러면 맨 마지막 부분은 카드가 하나 없으므로 margin: 0 auto를 넣었을때 배열이 망가지는 현상이 발생
4) 맨 마지막에 실제로는 사용하지 않는 카드 공간을 하나 더 생성
5) visibility:hidden을 사용하여, 보이진 않지만 실제로 공간은 차지하는 속성 부여
6) 깔끔히 해결!
<!-- 레퍼런스 -->
<section class="main-reference-container">
<div class="reference">
<h1 class="main-title">레퍼런스</h1>
<p class="sub-title">REFERENCE</p>
<div class="ref-logo-wrap">
<div class="logo-wrap">
<div class="ref-logo"><img src="./img/toco-img1/logo-DG-KIRA.png" alt="KIRA대구광역시건축사회"></div>
<div class="ref-logo"><img src="./img/toco-img1/logo-DCU.svg" alt="DCU대구가톨릭대학교"></div>
<div class="ref-logo"><img src="./img/toco-img1/logo-KMOU.svg" alt="KMOU국립한국해양대학교"></div>
<div class="ref-logo"><img src="./img/toco-img1/logo-DGtech-Highschool.png" alt="TECH대구공업고등학교"></div>
<div class="ref-logo"><img src="./img/toco-img1/logo-dalseo.svg" alt="대구광역시 달서구"></div>
</div>
<div class="logo-wrap">
<div class="ref-logo"><img src="./img/toco-img1/logo-colorfulDG.svg" alt="컬러풀 대구"></div>
<div class="ref-logo"><img src="./img/toco-img1/logo-songpa.svg" alt="송파구"></div>
<div class="ref-logo"><img src="./img/toco-img1/logo-DCCI.png" alt="DCCI대구상공회의소"></div>
<div class="ref-logo"><img src="./img/toco-img1/logo_DG-ICT.png" alt="대경ICT산업협회"></div>
<div class="ref-logo"><img src="./img/toco-img1/logo-DIP.png" alt="DIP대구디지털산업진흥원"></div>
</div>
<div class="logo-wrap">
<div class="ref-logo"><img src="./img/toco-img1/logo-maeil-newsletter.svg" alt="매일신문"></div>
<div class="ref-logo"><img src="./img/toco-img1/logo_people-power.svg" alt="국민의힘"></div>
<div class="ref-logo"><img src="./img/toco-img1/logo-CAK.svg" alt="CAK대한건설협회"></div>
<div class="ref-logo"><img src="./img/toco-img1/logo_KR-Master-Chef.png" alt="MasterChef한국조리기능장협회"></div>
<div class="ref-logo"><img src="./img/toco-img1/logo_Rotary.png" alt="국제로타리"></div>
</div>
<div class="logo-wrap">
<div class="ref-logo"><img src="./img/toco-img1/logo-KNU.svg" alt="경북대학교"></div>
<div class="ref-logo"><img src="./img/toco-img1/logo-Lions-clubs.svg" alt="라이온즈 클럽 인터네셔널"></div>
<div class="ref-logo"><img src="./img/toco-img1/logo-JCI.svg" alt="JCI한국청년회의소"></div>
<div class="ref-logo"><img src="./img/toco-img1/logo-Kibwa.png" alt="IT여성기업인협회"></div>
<div class="ref-logo"><img src="./img/toco-img1/logo-suseong.svg" alt="행복수성"></div>
</div>
<div class="logo-wrap">
<div class="ref-logo"><img src="./img/toco-img1/logo-MBC.png" alt="대구MBC"></div>
<div class="ref-logo"><img src="./img/toco-img1/logo-KECA.png" alt="KECA한국전기공사협회"></div>
<div class="ref-logo"><img src="./img/toco-img1/logo-KMU.svg" alt="계명대학교"></div>
<div class="ref-logo"><img src="./img/toco-img1/logo-eupjong.svg" alt="eupjong중소기업융합중앙회"></div>
<div class="ref-logo"><img src="./img/toco-img1/logo-TBN.svg" alt="TBN대구교통방송"></div>
</div>
<div class="logo-wrap">
<div class="ref-logo"><img src="./img/toco-img1/logo-DG-SportsCouncil.png" alt="sports대구광역시체육회"></div>
<div class="ref-logo"><img src="./img/toco-img1/logo-Bareumi.png" alt="바르미 (주)즐거운세상"></div>
<div class="ref-logo"><img src="./img/toco-img1/logo-MMU.svg" alt="MMU국립목포해양대학교"></div>
<div class="ref-logo"><img src="./img/toco-img1/logo-DG-Credit.png" alt="대구신용보증재단"></div>
<div class="ref-logo" id="hidden"><img src="./img/toco-img1/logo-DG-Credit.png" alt=""></div>
</div>
</div>
</div>
</section> .main-reference-container {
width: 100%;
height: 100%;
background-color: #F9F9F9;
}
.main-reference-container .ref-logo-wrap {
margin: 0 auto;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
border: 1px solid blue;
}
.main-reference-container .logo-wrap:last-child {
margin: 0 auto;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between ;
}
.main-reference-container #hidden {
visibility: hidden;
}
.main-reference-container .ref-logo{
width: 220px;
height: 100px;
margin-top: 1rem;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
border: 1px solid red;
}
- 그 밖에 사이즈 조절
화면에 맞춰 새 소식 뉴스 카드 하나 사라지게 만듬
서비스 부분 json 이미지 작아짐
화면 줄일때 양쪽 여백.... 등등 패딩이나 여백 고친게 많다
어려운 점
해결 방법
막힌 점, 해결 방법은 진행사항에 써놓음
소감
레퍼런스 부분. html에서 class:last-child에서 flex를 한번 더 주는 것까진 했는데, 마지막 줄만 회사 로고 하나가 부족해서 정렬이 이상하게 됐다. 처음에는 margin: 80%, 79.5%, 79%.... 주면서도 배열이 잘 맞지 않아서 아... 이상한데, 하다가 이걸 손으로 직접 맞추고 있는 것 자체가 어라 이게 아닌데 싶었다. 그렇게 떠오른게 강의시간에 배웠던 display: none; 과 visibility: hidden이다. 이 둘의 차이는 전자는 해당 내용물이 숨겨지면서 공간도 차지하지 않지만, 후자는 내용물은 숨겨지지만 공간은 차지하는 거다. 설마 이게 이렇게 쓰일 줄은 몰랐다. 너무 많은 정보를 머릿속에 넣는 것 같아서 어질하긴 했지만 알아두면 다 써먹는 구나.. 싶다.
