[TIL] 반응성 박스 코딩

첫 주 이틀차.

팀원들과 팀원 소개 웹페이지를 만드는 미니프로젝트를 진행 중이다.

 

 

어제 전체적인 레이아웃을 와이드프레임을 그려 공유하였고,

각자 구현하고자하는 영역을 정하여 차근차근 만들어보고 있다.

 

 

같은 부분을 담당하게된 팀장님과 상의하여 여행파트에 대해

더 자세한 와이드프레임을 작성하고, html로 디자인을 만들었다.

아래는 공유받은 코드.

<div class="profile-section2">
	<div class="portrait-member">
		 <img src="../static/img/m.jpg" alt="배경 사진">
		<img src="../static/img/profile_img.jpg" alt="프로필 사진" class="profile-img">
	</div>
	<div class="member">
		<img src="../static/img/member1.jpg" alt="멤버1">
		<h3>멤버1</h3>
		<p>안녕하세요! 저는 멤버1입니다. </p>
</div>

이 코드를 팀원분이 만든 레이아웃에 넣고 실행했을 때, 가로가 flexible한 페이지여서

크기에 따라 프로필 사진과 멤버카드가 세로로 설정되는 문제가 있었다.

 

portrait-member div, member div를  div로 묶어 수평 정렬을 시도했다.

flex-direction이나 justify-content로 수평정렬을 해보려했으나 두 div가 그대로 고정되어 움직이지 않는 새로운 문제가 발생했다... 완전 멘붕

여러 가지으로 flex 설정을 찾아 공부하던 중, 박스 크기가 고정되어있어 한 줄에 들어가지 않는다는 생각이 들어

div를 풀고 member div를 반응형 박스로 바꾸었다.

 

width: 50%; < 이 설정은 어떤 영향이 있는지 더 공부해야할 것 같다.

 

상위 div의 profile-section에 있는 flex wrap을 basis로 변경하고,

하위 div에 flex-shrink를 적용하여 flexible한 박스를 만들었다.

 

박스가 너무 길어지는 것을 min- 코드를 이용하여 수정하고,

텍스트가 박스 바깥으로 나가는 문제점이 있어 해결하였다.

.profile-section2 {
    display: flex;
    flex-basis: auto;   /*아래 flex-shrink를 적용하기위해 flex-wrap에서 변경함*/
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.member {
    width: 300px, 100%;
    min-width: 100px;
    height: 120px;
    overflow: hidden;  		    /*을 사용해 영역을 감출 것*/
    text-overflow: ellipsis;  	/*로 ... 을 만들기*/
    line-clamp: 4;              /*4줄 아래로 내려가는 것을 막기위해*/
    text-align: center;
    background-color: #f9f9f9;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    flex-shrink: 1;
}

 

완성된 웹페이지

 

 

문제를 발견하고 해결하기 위해 노력한 시간이 아깝지 않을 만큼

문제를 해결한 후의 후련함과 기쁨이 매우 컸다!

이것이 자기주도적 학습의 효과!

 

 

다음 과제는 사진 위에 마우스를 올리면 사진확장 / 흐리게 / 글씨가 뜨는 코드 작성하기!