[start project] ์ฐ๋ฝ์ฒ ์ฑ ๋งํฌ์ ํ๊ธฐ - 1. ํ๋ฉด ์ค๊ณ
[start project] ์ฐ๋ฝ์ฒ ์ฑ ๋งํฌ์ ํ๊ธฐ - 2. ๋ฉ์ธํ๋ฉด
[start project] ์ฐ๋ฝ์ฒ ์ฑ ๋งํฌ์ ํ๊ธฐ - 3. ์์ธํ๋ฉด
โจ ํ์ผ ์์ฑ
- main.html : ๋ฉ์ธ ํ๋ฉด
- detail.html : ์์ธ ํ๋ฉด
- style.css : ๊ณตํต ์คํ์ผ๊ณผ main.css, detail.css ๋ฅผ import ํ๋ ํ์ผ
- main.css : ๋ฉ์ธํ๋ฉด ์คํ์ผ
- detail.css : ์์ธํ๋ฉด ์คํ์ผ
โจ ์ ์ฒด ํ๋ ์
์ฐ๋ฝ์ฒ ํ๋ฉด์ ํ๋ฉด ํ ๊ฐ์ด๋ฐ์ ๋์ธ ๊ฒ์ด๋ค.
๋จผ์ html ์ ์๋์ฒ๋ผ ์์ฑํ์.
<!--main.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phonebook</title>
</head>
<body>
<div class="root">
</div>
</body>
root ๋ ํ๋ฉด ์ ์ฒด๋ฅผ ์ฐจ์งํ๋ ๋น ๊ณต๊ฐ์ด๋ค.
root ์์ ๋ฉ์ธ ํ๋ฉด๊ณผ ์์ธ ํ๋ฉด์ด ๋ค์ด๊ฐ๋ฏ๋ก ๊ณตํต ์คํ์ผ ํ์ผ์ ์ ์ด์ค๋ค. ์๋ css ๋ฅผ ์ ๋ ฅํ์.
/* style.css */
@import "./main.css";
@import "./detail.css"
.root {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}@import ๋ ๋ค๋ฅธ css ํ์ผ์ ํฌํจํ๋ผ๋ ๋ฌธ์ฅ์ด๋ค.
div ๋ display: block ์ด๋ฏ๋ก ์ฝํ ์ธ ๋งํผ height ๋ฅผ ์ฐจ์งํ๋ค.
ํ๋ฉด ์ ์ฒด๋ฅผ ์ฐจ์งํ๊ธฐ ์ํด์๋ height ๋ฅผ ๋ด๊ฐ ๋ณด๋ ํ๋ฉด, ์น ๋ธ๋ผ์ฐ์ ํฌ๊ธฐ(๋ทฐํฌํธ) ๋งํผ ์ง์ ํด์ค์ผ ํ๋ค. (vw, vh)
์ด์ root ๋ฐ์ค ์์ ํ๋ฉด์ ๋์๋ณด์. container ๋ฅผ ๋ง๋ค๊ณ ์คํ์ผ์ ์ด์ง ์ค๋ดค๋ค.
์๋ ์ฝ๋๋ฅผ ๊ฐ๊ฐ์ ํ์ผ์ ์ ๋ ฅํ์.
<!-- main.html -->
...
<body>
<div class="root">
<div class="main-container">
</div>
</div>
</body>
.../* style.css */
.container {
width: 350px;
height: 600px;
border-radius: 20px;
box-sizing: border-box;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 2px 2px rgba(0, 0, 0, 0.2),
0 4px 4px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.1),
0 16px 16px rgba(0, 0, 0, 0.05);
}border-raduis ๋ ๋ฐ์ค ํ ๋๋ฆฌ์ ๋ฅ๊ธ๊ธฐ๋ฅผ ์ง์ ํ๋ ๊ฒ์ด๋ค.
box-sizing ์ padding, margin ์ ํฌํจํ์ฌ ์ด width ๋ฅผ ๊ณ์ฐํ๋ ๊ฒ์ด๊ณ
box-shadow ๋ ๋ฐ์ค์ ๊ทธ๋ฆผ์๋ฅผ ์ฃผ๋ ์ต์ ์ด๋ค.
๋ค ์ ๋ ฅํ๋ฉด ์๋ ํ๋ฉด์ฒ๋ผ ๋ ๊ฒ์ด๋ค.
โจ ๋ฉ์ธํ๋ฉด
์ด์ ์์ ๋ด์ฉ๋ฌผ์ ์ฑ์๋ณด์.
- ํค๋
<!-- main.html -->
...
<body>
<div class="root">
<div class="container">
<div class="header center">Phone Book</div>
</div>
</div>
</body>
</html>
...์๋ ์คํ์ผ์ ๊ณตํต ์คํ์ผ์ด๋ค. ์ฌ๋ฌ ๊ตฐ๋ฐ์ ์์ฃผ ์ฌ์ฉํ ๊ฒ ๊ฐ์ ์คํ์ผ์ ์ด๋ ๊ฒ ๋ฐ๋ก ๋ง๋ค์ด์ค๋ค.
center ํด๋์ค๋ฅผ html ์ ์ฃผ๋ฉด ํด๋น ์คํ์ผ์ด ์ ์ฉ๋๋ค.
/* style.css */
...
.center {
display: flex;
justify-content: center;
align-items: center;
}header ๋ฅผ flex box ๋ก ๋ง๋ค์ด ๊ฐ๋ก๋ก ๊ฐ์ด๋ฐ ์ ๋ ฌ(justify-content) ์ธ๋ก๋ก ๊ฐ์ด๋ฐ์ ๋ ฌ(align-items) ๋ฅผ ํด์ค๋ค.
๊ฐ์ด๋ฐ ์ ๋ ฌ ๋ฐฉ๋ฒ์ ์ฌ๋ฌ๊ฐ์ง๊ฐ ์์ง๋ง ๋๋ flex ๋ฅผ ์์ฃผ ์ฌ์ฉํ๋ค.
/* main.css */
...
.header {
height: 50px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background-color: #74ebd5;
background-image: linear-gradient(90deg, #74ebd5 0%, #9face6 100%);
color: rgb(255, 255, 255, 0.8);
font-weight: 600;
font-size: 20px;
}border-top-left-radius ์ฒ๋ผ ํ์ชฝ ๋ชจ์๋ฆฌ์ ๋ฅ๊ธ๊ธฐ๋ง ์ง์ ํด์ค ์ ์๋ค.
container ๊ฐ ๋ฅ๊ทธ๋ฏ๋ก ํค๋๋ ๋ฅ๊ธ๊ฒ ํด์ค์ผ ํ๋ค. ์๋๋ฉด ๋ชจ์๋ฆฌ๊ฐ ์์ ธ๋์จ๋ค.
background gradient ๋ https://cssgradient.io/gradient-backgrounds/ ๋ฅผ ์ด์ฉํ๋ค. ๋ถ์ฌ๋ฃ๊ธฐ๋ง ํ๋ฉด ๋๋ค.
font-weight ๋ ๊ธ์์ ๊ตต๊ธฐ์ด๋ค.
- ๋ด ํ๋กํ
<!-- main.html -->
...
<body>
<div class="root">
<div class="container">
<div class="header center">Phone Book</div>
<div class="my-profile center col">
<img src="https://picsum.photos/id/237/100/100" />
<div>my name</div>
</div>
</div>
</div>
</body>
...
๋ง์ฐฌ๊ฐ์ง๋ก ๊ณตํต ์คํ์ผ์ด๋ค. col ํด๋์ค๋ฅผ ์ฃผ๋ฉด ์์์์๋ค์ ์ธ๋ก๋ก ๋์ดํ๋ค.
/* style.css */
...
.col {
display: flex;
flex-direction: column;
}
flex ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ๊ฐ๋ก ๋์ด(row) ์ด๋ฏ๋ก flex-direction ์ ์ธ๋ก ๋์ด(column) ์ผ๋ก ๋ณ๊ฒฝํด์ค๋ค.
/* main.css */
...
.my-profile {
margin: 20px;
}
.my-profile img {
border-radius: 50%;
}
.my-profile div {
font-size: 20px;
margin: 10px;
}
์ฐธ๊ณ ๋ก ํ๋กํ ๋ฐ์ ๊ฐ๋ก์ ์ ์ ์๋ป์ ๋บ๋ค...ใ ใ
- ๊ฒ์๋ฐ
๋๋ณด๊ธฐ ์์ด์ฝ์ https://fontawesome.com/ ์์ ๊ฐ์ ธ์๋ค.
Fontawesome ๋ผ์ด์ ์ค๋ฅผ head ์ ๋ฃ์ด์ฃผ๋ฉด <i> ํ๊ทธ๋ก ์ฌ์ฉ ๊ฐ๋ฅํ๋ค.
<!-- main.html -->
...
<head>
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
</head>
...
<body>
<div class="root">
<div class="container">
<div class="header center">Phone Book</div>
<div class="my-profile center col">
<img src="https://picsum.photos/id/237/100/100"/>
<div>my name</div>
</div>
<div class="search-box center">
<i class="fas fa-search"></i>
<input type="search" placeholder="input name..."></input>
</div>
</div>
</div>
</body>
...placehoder ๋ input ์ ์๋ฌด๋ฐ ๊ฐ์ด ์์ ๋ ๋ํ๋๋ ๊ธ์จ์ด๋ค.
/* main.css */
...
.search-box input {
width: 200px;
height: 30px;
border: 1px solid rgb(0, 0, 0, 0.2);
border-radius: 20px;
padding-left: 10px;
color: #63717f;
font-size: 10pt;
}
.search-box input:focus {
outline: none;
}
.search-box i {
margin-right: 10px;
color: rgb(0, 0, 0, 0.2);
font-size: 20px;
}input ์ ๊ธฐ๋ณธ ์คํ์ผ์ด ์๋ค. ๊ธฐ๋ณธ ์คํ์ผ์ ๋ฎ์ด์์ฐ๊ธฐ ์ํด ์ฌ๋ฌ ์ค์ ์ ํ๋ค.
padding-left ์ ๊ฒฝ์ฐ ๋ชจ์๋ฆฌ๋ฅผ ๋ฅ๊ธ๊ฒ ํ๊ธฐ ๋๋ฌธ์ ์ปค์๊ฐ ๋ฅ๊ทผ ์ชฝ ์์ ๋ค์ด๊ฐ ์์ด ์ฃผ๋ ์ต์ ์ด๋ค.
rgb ์ ๋ง์ง๋ง ์์์ ์ ํฌ๋ช ๋ ์ต์ ์ด๋ค.
- ์ฐ๋ฝ์ฒ์ ์ฐ๋ฝ์ฒ ๋ฆฌ์คํธ
<!-- main.html-->
...
<body>
<div class="root">
<div class="container">
<div class="header center">Phone Book</div>
<div class="my-profile center col">
<img src="https://picsum.photos/id/237/100/100"/>
<div>my name</div>
</div>
<div class="search-box center">
<i class="fas fa-search"></i>
<input type="search" placeholder="input name..."></input>
</div>
<ul class="phone-list">
<li class="phone">
<button>
<div class="profile">
<img src="https://picsum.photos/id/237/100/100" />
<div class="profile-text">
<div class="profile__name">Friend name</div>
<div class="profile__msg">Message</div>
</div>
</div>
</button>
</li>
</ul>
</div>
</div>
</body>
...๋ฆฌ์คํธ๋ ๋ณดํต ul, li ๋ก ๋ง๋ ๋ค.
๋ ์ฐ๋ฝ์ฒ ํญ๋ชฉ์ ๋๋ฅด๋ฉด ์์ธ ํ๋ฉด์ผ๋ก ๋์ด๊ฐ๋ button ์ผ๋ก ํ๋ค.
๋ฒํผ ์์ ์ด๋ฏธ์ง, name, message ๋ profile ๋ก ๋ฌถ์๋ค.
img ๋ ๋๋ค ์ด๋ฏธ์ง์ด๋ค. https://picsum.photos/ ๋ฅผ ์ด์ฉํ๋ค.
/* main.css */
...
.phone-list {
padding: 0px;
margin: 20px 0px;
height: 300px;
overflow-y: scroll;
}
.phone {
list-style-type: none;
border-bottom: 1px solid rgb(0, 0, 0, 0.2);
}
.phone:nth-child(1) {
border-top: 1px solid rgb(0, 0, 0, 0.2);
}
.phone button {
background: none;
width: 100%;
border: none;
}
.phone button:hover {
background-color: rgb(0, 0, 0, 0.1);
}
.profile {
display: flex;
align-items: center;
}
.profile img {
margin: 10px;
width: 60px;
border-radius: 50%;
}
.profile__name {
font-size: 15px;
}
.profile__name,
.profile__msg {
display: flex;
color: rgb(0, 0, 0, 0.5);
}ul๊ณผ button ๋ ๊ธฐ๋ณธ ์คํ์ผ์ด ์์ผ๋ ๋ฎ์ด์์์ค๋ค.
ul ์ ๊ธฐ๋ณธ์ ์ผ๋ก padding ๊ณผ margin ์ด ์์ผ๋ ์ด๊ธฐํํด์ฃผ๊ณ ,
button ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ํ ๋๋ฆฌ, ๋ฐฐ๊ฒฝ์์ด ์์ผ๋ฏ๋ก ์์ ์ค๋ค.
list ์ height ์ ์ฃผ์ง ์์ผ๋ฉด ๋ง์์ก์ ๋ ํ๋ฉด ๋ฐ์ผ๋ก ํญ๋ชฉ๋ค์ด ์์ ธ๋์จ๋ค.
height ์ ์ฃผ๊ณ , height ๋ณด๋ค list ๊ฐ ๋ง์์ง๋ฉด ์คํฌ๋กค์ด ์๊ธฐ๊ฒ overflow-y: scroll ์ ๋ช ์ํด์ค๋ค.
list-style-type ์ ul ์ผ์ชฝ์ ๋๊ทธ๋ ๋งํฌ์ด๋ค. none ํด์ฃผ๋ฉด ์์ด์ง๋ค.
phone:nth-child(1) ์ ๋ฆฌ์คํธ์ ์ฒซ๋ฒ์งธ ์ด๋ค. ์ฒซ๋ฒ์งธ์ด๋ฉด ์์ ํ ๋๋ฆฌ๋ ๊ทธ๋ ค์ค๋ค.
button์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ ธ์ ๋(:hover) ๋ฐฐ๊ฒฝ ์์ด ํ์์ผ๋ก ๋ฐ๋๊ฒ ํด์ค๋ค.
๋ค์์ ์์ธ ํ๋ฉด์ ๊พธ๋ฉฐ๋ณด๊ฒ ๋ค.
๋ฐ์ํ
