프로필 사진과 상태메시지 만들기

완성샷은 이러하다 가운데 니꼴라스 프로필과 상메를 만들었다.

 

메인 내용이었던 이번 프로필과 상태 텍스트는 모두 <div>로 만들었다.

특히 큰 <div> 하나에 들어갈 2개의 목록(현재는 하나만 만들어진 니꼴라스와 다른 목록 하나)이 있고

그 2개의 목록 중 하나인 니꼴라스 프로필 div에는 또다시 img(사진) div와 text(상메) div가 있었다. 

두 div를 하나의 라인에 놔야하니 당연스럽게 display;fiex;를 주었고

제일 큰 div 중 첫번째 자식에게만 해당하는 내용의 css를 선택하기 위해 

:first-child 선택자를 사용했다. 

오늘 적용한 뼈대 html 코드는 아래와 같다.

<div class="user-component">   
   <div class="user-component__column">     
     <img src="https://avatars3.githubusercontent.com/u/3612017"      
        class="user-component__avatar" />     
   <div class="user-component__text">       
       <h4 class="user-component__title">Nicolas</h4>       
       <h6 class="user-component__subtitle">this text whatever</h6>     
    </div>   
  </div>   
 <div class="user-component__column">
 </div>
</div>

오늘 건드린 코드는 밑줄표시.

css는 이러하다.

 

.user-component, .
user-component__column:first-child { 
display: flex;  align-items: center;
}
.user-component__avatar { 
width: 70px;  height: 70px;  border-radius: 27px;  margin-right: 20px;
}.
user-component__title { 
font-weight: 600;  font-size: 22px;
}.
user-component__subtitle { 
margin-top: 8px; 
color: rgba(0, 0, 0, 0.5); 
font-size: 17px;
}

 

새로 알게 된 것

 

1. html 코드 작성시 user-component*2 로 입력할 경우

클래스가 유저 컴포넌트인 div가 2개가 만들어진다. 

 

2. 반복되는 것들은 component로 만들어서 반복해서 사용할 수 있도록 한다