[start project] 연락처 앱 마크업하기 - 3. 상세화면

[start project] 연락처 앱 마크업하기 - 1. 화면 설계

[start project] 연락처 앱 마크업하기 - 2. 메인화면

[start project] 연락처 앱 마크업하기 - 3. 상세화면

[start project] 연락처 앱 마크업하기 - 4. 정리

 

✨ 파일 생성

- main.html : 메인 화면
- detail.html : 상세 화면
- style.css : 공통 스타일과 main.css, detail.css 를 import 하는 파일
- main.css : 메인화면 스타일
- detail.css : 상세화면 스타일

 

✨ 전체 프레임

전체 프레임은 이전에 만들었던 대로 만들면 된다.

<!-- detail.html -->

...

<div class="root">
	<div class="container">
		<div class="header center">Phone Book</div>

		</div>
	</div>
 </div>
    
 ...

 

✨ 뒤로가기 버튼과 상세 정보 컨테이너

화면 설계에는 없었지만.. 뒤로가기 버튼도 만들어주었다.

또 헤더, 뒤로가기 버튼을 제외한 상세 정보들을 화면 한 가운데에 위치시켜주기 위해 detail-container 도 하나 만든다.

한 가운데에 있고 세로로 나열하는 css 를 이미 공통 css 로 만들어두었기 때문에 .center .col 클래스를 주면 알아서 정렬된다.

<!-- detail.html -->

...

<div class="root">
	<div class="container">
		<div class="header center">Phone Book</div>
			<div class="detail-backbtn">
				<i class="fas fa-arrow-left"></i>
			</div>
        
			<div class="detail-container center col">
            
			</div>
		</div>
	</div>
 </div>
    
 ...

/* detail.css */

.detail-backbtn {
  margin: 20px 20px 0px 20px;
}

.detail-backbtn:hover {
  color: skyblue;
  cursor: pointer;
}

.detail-container {
  height: 100%;
}

cursor: pointer 는 뒤로가기 버튼에 마우스를 댔을 때(:hover) 마우스 커서를 pointer 로 하라는 의미다.
detail-container 는 display 가 block이므로 height 가 자기 자신의 콘텐츠밖에 안 된다. 이러면 세로로 가운데 정렬을 못 하니 100% 로 만들어준다.
100%는 부모 요소의 height 만큼 차지한다는 의미다.

 

✨ 상세화면 프로필

상세 화면 프로필은 이전의 연락처 리스트의 프로필을 가져다 쓴다.

다른 점은, 연락처 리스트에서는 가로로 나열했지만 여기서는 세로로 나열한다는 점이다.

마찬가지로 공통 스타일을 만들었으니 클래스 .col 만 붙여주면 알아서 세로로 나열된다.

img 와 text 들을 main 과 다른 스타일을 적용시켜주기 위해 부모 요소의 클래스를 detail-profile 로 바꾸었다.

<!-- detail.html -->

...

<div class="detail-container center col">
	<div class="detail-profile center col">
		<img src="https://picsum.photos/id/237/100/100" />
		<div class="profile-text center col">
			<div class="profile__name">Friend name</div>
			<div class="profile__msg">Message</div>
		</div>
	</div>            
</div>
    
 ...

/* detail.css */

...

.detail-profile img {
  width: 100px;
  border-radius: 20px;
}

.detail-profile .profile__name {
  font-size: 20px;
}

.detail-profile .profile-text {
  margin: 10px;
}

 

✨ 상세 정보와 메뉴

상세 정보와 메뉴는 별거 없다. 아래처럼 입력하자.

<!-- detail.html -->

...

<div class="detail-container center col">
	<div class="detail-profile center col">
		<img src="https://picsum.photos/id/237/100/100" />
		<div class="profile-text center col">
			<div class="profile__name">Friend name</div>
			<div class="profile__msg">Message</div>
		</div>
	</div>
        
	<div class="detail-info">
		<div>Birth: 1999-11-11</div>
		<div>Phone: 010-9999-9999</div>
	</div>

	<div class="detail-menu">
		<i class="fas fa-phone-volume"></i>
		<i class="fas fa-envelope"></i>
	</div>
</div>
    
 ...

/* detail.css */

...

.detail-info {
  margin: 20px;
}

.detail-menu {
  width: 200px;
  display: flex;
  justify-content: space-around;
  font-size: 30px;
  margin: 10px;
}

 

그럼 이렇게 완성된다!