<TIL - 0002> 미니프로젝트 -2-

---

---

(미니프로젝트 2일차) 팀원 소개 페이지
갑작스런 팀장의 이탈로 팀장이 교체되었고..
팀장과 같이하던 난 낙동강 오리알이 되었으나..
어느정도 완성을 해두었기에 코드병합을 하던 와중에 위기봉착.
(앞으로는 사전에 팀원끼리 클래스명을 어느정도 정하고 해야겠다..는 생각이 듦)

---

hover 시 transition 효과주기

팀원 소개 페이지 중
내 소개

<li class="team-item">
	<div class="profile profile_3">
		<img src="images/raon_profile.jpg">
      	<div class="profile-contents">
			<h2>임라온 <span>INTJ</span></h2>
			<p>
				.about_me {<br>
				&nbsp;&nbsp;&nbsp;goal : developer;<br>
				&nbsp;&nbsp;&nbsp;what I want to say : fighting!;<br>
				}
			</p>
		</div>
	</div>
</li>

개발자스럽게 소개글을 쓰고싶었지만 개 발 일지도.

---

.team-item {
    flex-basis: 300px;
    flex-shrink: 0;
    margin: 0 4px;
    opacity: 0.4;
    transition: all .4s;
    width: 100%;
    justify-content: space-around;
    align-items: center;
}
.profile-contents p {
    color: white;
    font-size: 20px;
    min-width: 140px;
    max-height: 0;
    overflow: hidden;
    line-height: 1.2;
    transition: all 1s;
    opacity: 0;
}
.team-item:hover .profile-contents p {
    opacity: 1;
    transition-delay: .2s;
    max-height: 6em;
    margin-top: 0.4em;
}

트랜지션 효과를 줘서 콘텐츠에 강조효과를 줬다.
0.1s 때문에 몇번을 바꿨는지 모르겠다.

---

---