Position 01 연습
시작 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Position 1</title>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="user-card">
<div class="user-photo">
<img src="./assets/user.jpg" alt="Frenchkebab" />
<span class="user-status" aria-label="Active"></span>
</div>
<h1 class="user-name"> frenchkebab </h1>
</div>
</body>
</html>* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: 'Lato', sans-serif;
}
h1 {
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #273444;
}
/* ▼ WHERE YOUR CODE BEGINS */
CSS 입히기
이미지 동그랗게 만들어주기
.user-photo img {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
}
여기서, display 속성이 inline인데 특이하게도 width와 height를 갖는 것을 볼 수 있는데, 이는 img 자체의 width와 height가 있기 때문이다.
나중에 깔끔하게 먹도록 display: block;을 넣어주도록 하자.
초록색 active 점 넣기
.user-status {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #fff;
background-color: #21d891;
}
놀랍게도, 아무런 변화가 없다.
이는 역시 span 태그의 경우 display: inline; 이 디폴트로 적용되기 때문이다.
display: block; 속성을 추가하도록 하자.
텍스트와 이미지 가로배치 하기
이전에 배웠던 float를 사용하도록 하자.
.user-card::after {
content: '';
display: block;
clear: left;
}
.user-photo,
.user-name {
float: left;
}float된 요소(user-photo, user-name)의 크기를 부모(user-card)가 파악할 수 있도록, 가상 요소도 추가해 주도록 하자!
텍스트 수직 중간배치
.user-name {
padding: 8px 0px;
}
img의 높이가 40px, 텍스트의 높이가 24px 이므로 위아래 8px씩 넣어준다.
span (초록 점) 옮기기
user-photo를 기준으로 배치할 것이므로 position: absolute를 사용하도록 한다.
(viewport를 기준으로 하는 것이였다면, position: fixed를 사용)
user-status에 position: absolute;를 추가하고, absoulte의 경우 자동으로 display: block;이 되므로, 기존에 있었던 display: block;은 지우도록 하자.
.user-status {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #fff;
background-color: #21d891;
}조상 중에서 position: static;이 아닌 요소를 기준으로 잡을 수 있으므로, user-photo에 position: relative; 속성을 추가하도록 한다.
.user-photo {
position: relative;
margin-right: 12px;
}그리고 user-status를 오른쪽 아래에 박아주자.
.user-status {
position: absolute;
right: 0;
bottom: 0;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #fff;
background-color: #21d891;
}
아, 동그라미 끝이 딱 선이 맞지 않고 초록색 동그라미의 border 2px 정도가 떠있으므로 그만큼 보정을 해주면 되겠다.
.user-status {
position: absolute;
right: -2px;
bottom: -2px;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #fff;
background-color: #21d891;
}
여백 및 크기 맞춰주기
.user-card {
width: 240px;
padding: 8px 12px;
border: 1px solid #e5eaef;
border-radius: 4px;
}
정리
float의 경우 요소들을 나란히 놓고 싶을 때 사용하였고,
position 같은 경우에는 요소를 특정한 자리에 콕 갖다놓고 고정을 하고 싶을 때 사용하였다.
