flex UI : 유저 리스트

1분코딩, 인프런 강의 CSS Flex와 Grid 제대로 익히기를 공부하며 기록한 내용입니다. flex 를 활용해 가장 기본적인 UI 형태를 만들어 봅니다. 아래 내용은 프로필 사진과 이름이 나열된 리스트를 만드는 방법입니다. 이름의 경우 길어지면 말줄임표를 사용합니다.

html 마크업은 아래와 같이 작성합니다.

<ul class="friend-list"> 
	<li class="friend-item">
		<figure class="user-photo" style="background-image:url(이미지 주소);">
		</figure>
		<p class="user-name">Lorem15</p>
 	</li>
    <li class="friend-item">
		<figure class="user-photo" style="background-image:url(이미지 주소);">
		</figure>
		<p class="user-name">Lorem15</p>
	</li>
    <li class="friend-item">
		<figure class="user-photo" style="background-image:url(이미지 주소);">
		</figure>
		<p class="user-name">Lorem15</p>
	</li>
</ul>

메시지 리스트 처럼 이미지는 인라인 스타일, 백그라운드 이미지로 넣어줍니다. (이미지의 비율, 크기가 달라도 통일된 형식으로 편집하기 위해)

우선 말줄임표를 만드는 css 코드를 넣어줍니다. 아래 코드는 세트로 묶어서 사용되는 경우가 많으니 기억해둡니다.

.user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

위 코드를 적용하면 아래와 같이 말줄임표가 생깁니다.

이제 flex 를 적용해 가로정렬을 해줍니다.

.user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.friend-item {
    display: flex;
    align-items: center; // 세로 정렬 조정
    margin-bottom: 1.2em; // 리스트 간격 조절
}

그럼 아래와 같이 만들어집니다.