๊ฑฐ์๋ค ์์ฑ๋์ด๊ฐ๋ค๊ณ ๋๋ ์ฆ์์ ๊ธฐํ์ด ๋ํญ ์์ ๋์๋ค. 17-19 OB๋ค์ด ์งํํ๋ ํ๋ก์ ํธ์ด์ง๋ง ์ฐ๋ฆฌ ์ข์๊ณ ํ๋๊ฒ ์๋๋ผ ํ๋ฐฐ๋ค ๋์์ฃผ๋ ค๋ ๋ชฉ์ ์ด ํฌ๊ธฐ ๋๋ฌธ์. ์ฝ๋ก๋ ๊ฑฐ๋ฆฌ๋๊ธฐ ๋๋ฌธ์ ๊ณต์ฐ์ ๋ค์ด์ฌ ์ ์๋ ์ธ์์๊ฐ ์ ํ์ด ๊ฑธ๋ ธ๋ค. ๊ด๋ จํด์ 21ํ๋ฒ ์์ ์น๊ตฌ๋ค๊ณผ ํ์๋ฅผ ์งํํ๋ค. ํฌ๊ฒ ๋๊ฐ์ง์ด๋ค. ์ธ๋น ํฐ์ผ์ 1๋งค์ฉ๋ง ๊ตฌ์ ํ ์ ์๊ณ ์๋ด๊ธฐ๋ ๊ณต์ง. ๊ทธ๋ฆฌ๊ณ ์๋ด๊ธฐ์ ๊ฒฝ์ฐ์๋ '๊ณต์ฐ ์ ์๋ชจ์'์ ์ ์ฒญํ ์ ์๋๋ก.
๋ณดํต์ ์ฒ์ ์ฌ๊ท ์น๊ตฌ๋ค๋ผ๋ฆฌ ์ผ์ผ์ค์ค ๋ชจ์ฌ์ ๋ค๊ฐ์ด ๊ณต์ฐ์ ๋ณด๋ฌ ์์๋๋ฐ ์ฝ๋ก๋ ์๊ตญ์๋ ๊ทธ๋ฌ๊ธฐ๊ฐ ์ด๋ ต์ง ์์๊น ๋ผ๋ ์๊ฒฌ์์ ๋์จ ๊ธฐํ์ด์๋ค. ๊ณต์ฐ ์ดํ ์ ์ฏค์ ์๋น๋ํ์ฒ๋ผ ์๋ด๊ธฐ ๋ช๋ช ๊ณผ ์ ๋ฐฐ๋ค ๋ช๋ช ์ด ๋ฏธ๋ฆฌ ๋ง๋์ ์ฐ์ ๋งบ๊ณ , ์นํด์ง ์น๊ตฌ๋ค๋ผ๋ฆฌ ๊ณต์ฐ์ ์ฌ ์ ์๋๋ก ํ๋... ์ ๋ ์ง๋ ๋ชจ๋ฅด์ง๋ง ๊ฝค ์ข์ ์์ด๋์ด๋ผ๊ณ ์๊ฐํ๋ค.
ํฐ์ผ์ ์๋งคํ๋ ๊ณผ์ ๊ณผ ์๋งคํ ํฐ์ผ์ ๋ณด๋ ํ์ด์ง๊ฐ ํฌ๊ฒ ๋ฌ๋ผ์ก๋ค. ์๋ด๊ธฐ ํฐ์ผ์ด ๊ณต์ง๊ฐ ๋์ผ๋ 1์ธ 1๋งค๋ก ์ ํํ๋ค. ๋์ ์น๊ตฌ์ ํฐ์ผ๋ค์ ๊ฐ์ด ์ฌ์ค ๊ฐ๋ฅ์ฑ์ด ์๋ ์ฌํ์, ์ ๋ฐฐ์ ๊ฒฝ์ฐ๋ฅผ ์ํด ์ด๋๋ฏผ ํ์ด์ง์์ ํฐ์ผ์ ๋ฐ๋ก ๋ฐ๊ธํ ์ ์๋๋ก ํ๋ค. ๊ธฐ์กด ๊ธฐํ์ธ '๋ด๊ฐ ์๋งคํ ํฐ์ผ ๋ฆฌ์คํธ'๋ฅผ ๋ณด์ฌ์ฃผ๋ ๋ง์ดํ์ด์ง๋ ๋น์ฐํ ์์ ๋์๋ค.
1. ํฐ์ผ ์๋งค ๊ณผ์

ํฐ์ผ ๋งค์๋ฅผ ์ ๋ ฅ๋ฐ๋ ์๋ฆฌ์์ ๋งค์ ๋์ ํ๋ฒ์ ์ ๋ ฅ๋ฐ๋๋ก ํ๋ค. ๊ทธ ํ๋ก ์ ์ ์๊ณผ ์ฌํ์์ด ๋ณผ ์ ์๋ ํ์ด์ง๋ฅผ ๋ถ๋ฆฌํ๋ค. ๋ง์ฝ ํ๋ฒ์ด C2๋ก ์์ํ๋ค๋ฉด ๊ณต์ฐ ์ ์๋ชจ์์ ์ ์ฒญํ ์ ์๋ ํ์ด์ง๋ก ๋์ด๊ฐ๋ค. 22ํ๋ฒ์ด ์๋๋ผ๋ฉด ๊ธฐ์กด๊ณผ ๋์ผํ๋ค. ๊ธฐํ 1ํธ

ํผ๊ทธ๋ง์์ ๋์์ธํ๋๋ก ๋๊ฐ์ด ๋ง๋ค์ด์ง๋ ํ๋ฉด์ ๋ณผ ๋ ์ซ ๋ฟ๋ฏํ๋ค. ์๋ชจ์ ์ ์ฒญ ํ ๊ธ ui๊ฐ ๋ง์ ๋ ๋ค. ์ํ ์ฌ์ดํธ์์ ์ฝ๊ด ๋์ํ๊ธฐ ๊ณผ์ ์์ ๋ชจํฐ๋ธ๋ฅผ ๋ฐ์๋ค. ๊ตฌ์ฒด์ ์ธ ์ค๋ช ์ด ํ์ํ ๋ถ๋ถ์ด๊ธฐ ๋๋ฌธ์ ๋ชจ๋ฌ์ฐฝ์ ๋์์ ์ ๋ณด๋ฅผ ๋ณด์ฌ์ฃผ๊ณ ์ ์ฒญ์ ํ ์ ์๋๋ก ํ๋ค.
์ ์ ์์ ๊ณต์ฐ์ด ๊ณต์ง๋ผ๋ ๊ฒ์ ํ๋ฒ ๋ ์๊ธฐ์์ผ์ฃผ๋ฉด์ ๋ง์ดํ์ด์ง๋ก ๊ณง๋ฐ๋ก ์ด๋ํ๋ค.
2. ๋ง์ดํ์ด์ง

์ผ์ชฝ์ ๊ธฐ์กด, ์ค๋ฅธ์ชฝ์ ์๋ก ๋ฐ๋ ํ์ด์ง์ด๋ค. ์์ดํฐ ์์ ฏ๊ฐ์ ๋๋์ ์ฃผ๊ณ ์ถ์๋ค. ๋ง์ดํ์ด์ง ์ด์ ๋ณด๋ค ๋ ๋ง์ ์ ๋ณด๋ฅผ ๋ฃ์ ์ ์๊ฒ ๋์ด์ ์๋งค์ผ ์ ๋ณด๋ฅผ ๋ฐ๋ก ๋บ๋ค. ์๋ด๊ธฐ๋ ์ ๊ธ์ ๋ณด๊ฐ ํ์ ์๊ณ ์ฌํ์์ ์๋ชจ์ ์ ๋ณด๊ฐ ํ์ ์๊ธฐ ๋๋ฌธ์ ๊ทธ ๋ถ๋ถ์ ๊ฐ๊ฐ ๋ค๋ฅด๊ฒ ๋ฃ์ด์ฃผ์๋ค.
์ด์ ๋ถํฐ ๊ณต์ฐ์ฅ ์ ๋ณด๋ฅผ ๋ฃ๊ณ ์ถ์ด๋ ๋ง๋ ํ ์์ด๋์ด๊ฐ ์์ด์ ๊ณ ๋ฏผํ๊ณ ์์๋๋ฐ, ๋ง์นจ ๋ฑ ๋ง๋ ๊ณต๊ฐ์ด ์๊ฒจ์ ๋ด์๋ค. ์ข๋ค. ํฐ์ ๋ฒํผ์ด ๋ฒํผ๊ฐ์ด ์์๊ฒผ๋ค๋ ํผ๋๋ฐฑ์ด ์์๋ค. ์ด์ ๋ณด๋ค ํจ์ ๋ ๋ฒํผ์ฒ๋ผ ๋ณด์ธ๋ค ์ด์ .

์์ ฏ์ ํฌ๊ธฐ์ ๋ง๊ฒ ํฐํธ์ ํฌ๊ธฐ๊ฐ ๋ง์์ผ ์ด๋ปค๋ค. font-size๋ฅผ vw ๋จ์๋ก ์ฃผ๋๊น ๋๋ฆ ๋ง์กฑ์ค๋ฝ๊ฒ ๋์๋ค. ์ด๋ฏธ ์ ํด๋์ ๋ ์ด์์ ๊ทธ๋ฆฌ๋ ๋์ด ๋๋ฌธ์ ๋์ ํ๋ฉด์์ ์ ์ฌ๊ฐํ ์์ ฏ์ ์ฌ์ฉํ ์ ์์๋ค. ์์ฌ์ด๋๋ก ๋์ด๋ ๊ณ ์ ํ๊ณ ๋๋น๋ง ๋๋ ค์ฃผ์๋ค.
import React from 'react';
const Tile = ({ children, color, ...props }) => {
return (
<div className="mypage-square" style={{ backgroundColor: `${color}` }}>
<div className="mypage-inner">
<div className="mypage-content" {...props}>
{children}
</div>
</div>
</div>
);
};
export default Tile;
//Tile.css
.mypage-square {
width: 100%;
border-radius: 22px;
position: relative;
}
.mypage-square:after {
content: '';
display: block;
padding-bottom: 100%;
}
.mypage-inner {
position: absolute;
width: 100%;
height: 100%;
}
.mypage-content {
height: 76%;
width: 76%;
padding: 12%;
}
๋ฐ์ํ ์ ์ฌ๊ฐํ ๋ชจ์์ผ๋ก ๊ณ ์ ํ๋๊ฒ ์๊ฐ๋ณด๋ค ๊น๋ค๋ก์ ๋ค. after ๊ฐ์ ์ ํ์๊ฐ ์ฌ๊ธฐ์ ๊ธฐ์ ์๊ธดํ๊ฒ ์ฐ์ธ๋ค. ์กฐ๊ธ ๋ ์ฐ์ตํด๋ด์ผ๊ฒ ๋ค. ์ ์ฌ๊ฐํ ํ๋ ๋๋ฌธ์ ์ฝ๋๊ฐ ๊ธธ์ด์ ธ ์ฝ๊ธฐ ํ๋ ๋๋์ด ์๋ค. ์ปดํฌ๋ํธ๋ก ๋ฐ๋ก ๋บ ํ์ ์์ ๋ด์ฉ์ children์ผ๋ก ๋๊ฒจ์ฃผ์๋ค.
props๋ฅผ ์คํ๋ ๋ ์ฐ์ฐ์๋ฅผ ์ด์ฉํด ๋๊ฒจ์ฃผ๊ณ , ์ํ๋ ์์น์์ {...props}
ํํ๋ก ๋ฐ์ ์ฌ์ฉํ ์ ์๋๋ก ํ๋ ๊ฑด ํ๋ก์ ํธ๋ฅผ ํ๋ฉด์ ๋ฐฐ์ด ๊ฒ๋ค ์ค ํ๋์ด๋ค. ์ข์ ๋ฐฉ์์ ์๋ ๊ฒ ๊ฐ๊ธด ํ์ง๋ง ํธํ๊ฒ ์ธ ์ ์๊ฒ ๋ค.
๊ฑฐ์๋ค ์์ฑ๋์ด๊ฐ๋ค๊ณ ๋๋ ์ฆ์์ ๊ธฐํ์ด ๋ํญ ์์ ๋์๋ค. 17-19 OB๋ค์ด ์งํํ๋ ํ๋ก์ ํธ์ด์ง๋ง ์ฐ๋ฆฌ ์ข์๊ณ ํ๋๊ฒ ์๋๋ผ ํ๋ฐฐ๋ค ๋์์ฃผ๋ ค๋ ๋ชฉ์ ์ด ํฌ๊ธฐ ๋๋ฌธ์. ์ฝ๋ก๋ ๊ฑฐ๋ฆฌ๋๊ธฐ ๋๋ฌธ์ ๊ณต์ฐ์ ๋ค์ด์ฌ ์ ์๋ ์ธ์์๊ฐ ์ ํ์ด ๊ฑธ๋ ธ๋ค. ๊ด๋ จํด์ 21ํ๋ฒ ์์ ์น๊ตฌ๋ค๊ณผ ํ์๋ฅผ ์งํํ๋ค. ํฌ๊ฒ ๋๊ฐ์ง์ด๋ค. ์ธ๋น ํฐ์ผ์ 1๋งค์ฉ๋ง ๊ตฌ์ ํ ์ ์๊ณ ์๋ด๊ธฐ๋ ๊ณต์ง. ๊ทธ๋ฆฌ๊ณ ์๋ด๊ธฐ์ ๊ฒฝ์ฐ์๋ '๊ณต์ฐ ์ ์๋ชจ์'์ ์ ์ฒญํ ์ ์๋๋ก.
๋ณดํต์ ์ฒ์ ์ฌ๊ท ์น๊ตฌ๋ค๋ผ๋ฆฌ ์ผ์ผ์ค์ค ๋ชจ์ฌ์ ๋ค๊ฐ์ด ๊ณต์ฐ์ ๋ณด๋ฌ ์์๋๋ฐ ์ฝ๋ก๋ ์๊ตญ์๋ ๊ทธ๋ฌ๊ธฐ๊ฐ ์ด๋ ต์ง ์์๊น ๋ผ๋ ์๊ฒฌ์์ ๋์จ ๊ธฐํ์ด์๋ค. ๊ณต์ฐ ์ดํ ์ ์ฏค์ ์๋น๋ํ์ฒ๋ผ ์๋ด๊ธฐ ๋ช๋ช ๊ณผ ์ ๋ฐฐ๋ค ๋ช๋ช ์ด ๋ฏธ๋ฆฌ ๋ง๋์ ์ฐ์ ๋งบ๊ณ , ์นํด์ง ์น๊ตฌ๋ค๋ผ๋ฆฌ ๊ณต์ฐ์ ์ฌ ์ ์๋๋ก ํ๋... ์ ๋ ์ง๋ ๋ชจ๋ฅด์ง๋ง ๊ฝค ์ข์ ์์ด๋์ด๋ผ๊ณ ์๊ฐํ๋ค.
ํฐ์ผ์ ์๋งคํ๋ ๊ณผ์ ๊ณผ ์๋งคํ ํฐ์ผ์ ๋ณด๋ ํ์ด์ง๊ฐ ํฌ๊ฒ ๋ฌ๋ผ์ก๋ค. ์๋ด๊ธฐ ํฐ์ผ์ด ๊ณต์ง๊ฐ ๋์ผ๋ 1์ธ 1๋งค๋ก ์ ํํ๋ค. ๋์ ์น๊ตฌ์ ํฐ์ผ๋ค์ ๊ฐ์ด ์ฌ์ค ๊ฐ๋ฅ์ฑ์ด ์๋ ์ฌํ์, ์ ๋ฐฐ์ ๊ฒฝ์ฐ๋ฅผ ์ํด ์ด๋๋ฏผ ํ์ด์ง์์ ํฐ์ผ์ ๋ฐ๋ก ๋ฐ๊ธํ ์ ์๋๋ก ํ๋ค. ๊ธฐ์กด ๊ธฐํ์ธ '๋ด๊ฐ ์๋งคํ ํฐ์ผ ๋ฆฌ์คํธ'๋ฅผ ๋ณด์ฌ์ฃผ๋ ๋ง์ดํ์ด์ง๋ ๋น์ฐํ ์์ ๋์๋ค.
1. ํฐ์ผ ์๋งค ๊ณผ์

ํฐ์ผ ๋งค์๋ฅผ ์ ๋ ฅ๋ฐ๋ ์๋ฆฌ์์ ๋งค์ ๋์ ํ๋ฒ์ ์ ๋ ฅ๋ฐ๋๋ก ํ๋ค. ๊ทธ ํ๋ก ์ ์ ์๊ณผ ์ฌํ์์ด ๋ณผ ์ ์๋ ํ์ด์ง๋ฅผ ๋ถ๋ฆฌํ๋ค. ๋ง์ฝ ํ๋ฒ์ด C2๋ก ์์ํ๋ค๋ฉด ๊ณต์ฐ ์ ์๋ชจ์์ ์ ์ฒญํ ์ ์๋ ํ์ด์ง๋ก ๋์ด๊ฐ๋ค. 22ํ๋ฒ์ด ์๋๋ผ๋ฉด ๊ธฐ์กด๊ณผ ๋์ผํ๋ค. ๊ธฐํ 1ํธ

ํผ๊ทธ๋ง์์ ๋์์ธํ๋๋ก ๋๊ฐ์ด ๋ง๋ค์ด์ง๋ ํ๋ฉด์ ๋ณผ ๋ ์ซ ๋ฟ๋ฏํ๋ค. ์๋ชจ์ ์ ์ฒญ ํ ๊ธ ui๊ฐ ๋ง์ ๋ ๋ค. ์ํ ์ฌ์ดํธ์์ ์ฝ๊ด ๋์ํ๊ธฐ ๊ณผ์ ์์ ๋ชจํฐ๋ธ๋ฅผ ๋ฐ์๋ค. ๊ตฌ์ฒด์ ์ธ ์ค๋ช ์ด ํ์ํ ๋ถ๋ถ์ด๊ธฐ ๋๋ฌธ์ ๋ชจ๋ฌ์ฐฝ์ ๋์์ ์ ๋ณด๋ฅผ ๋ณด์ฌ์ฃผ๊ณ ์ ์ฒญ์ ํ ์ ์๋๋ก ํ๋ค.
์ ์ ์์ ๊ณต์ฐ์ด ๊ณต์ง๋ผ๋ ๊ฒ์ ํ๋ฒ ๋ ์๊ธฐ์์ผ์ฃผ๋ฉด์ ๋ง์ดํ์ด์ง๋ก ๊ณง๋ฐ๋ก ์ด๋ํ๋ค.
2. ๋ง์ดํ์ด์ง

์ผ์ชฝ์ ๊ธฐ์กด, ์ค๋ฅธ์ชฝ์ ์๋ก ๋ฐ๋ ํ์ด์ง์ด๋ค. ์์ดํฐ ์์ ฏ๊ฐ์ ๋๋์ ์ฃผ๊ณ ์ถ์๋ค. ๋ง์ดํ์ด์ง ์ด์ ๋ณด๋ค ๋ ๋ง์ ์ ๋ณด๋ฅผ ๋ฃ์ ์ ์๊ฒ ๋์ด์ ์๋งค์ผ ์ ๋ณด๋ฅผ ๋ฐ๋ก ๋บ๋ค. ์๋ด๊ธฐ๋ ์ ๊ธ์ ๋ณด๊ฐ ํ์ ์๊ณ ์ฌํ์์ ์๋ชจ์ ์ ๋ณด๊ฐ ํ์ ์๊ธฐ ๋๋ฌธ์ ๊ทธ ๋ถ๋ถ์ ๊ฐ๊ฐ ๋ค๋ฅด๊ฒ ๋ฃ์ด์ฃผ์๋ค.
์ด์ ๋ถํฐ ๊ณต์ฐ์ฅ ์ ๋ณด๋ฅผ ๋ฃ๊ณ ์ถ์ด๋ ๋ง๋ ํ ์์ด๋์ด๊ฐ ์์ด์ ๊ณ ๋ฏผํ๊ณ ์์๋๋ฐ, ๋ง์นจ ๋ฑ ๋ง๋ ๊ณต๊ฐ์ด ์๊ฒจ์ ๋ด์๋ค. ์ข๋ค. ํฐ์ ๋ฒํผ์ด ๋ฒํผ๊ฐ์ด ์์๊ฒผ๋ค๋ ํผ๋๋ฐฑ์ด ์์๋ค. ์ด์ ๋ณด๋ค ํจ์ ๋ ๋ฒํผ์ฒ๋ผ ๋ณด์ธ๋ค ์ด์ .

์์ ฏ์ ํฌ๊ธฐ์ ๋ง๊ฒ ํฐํธ์ ํฌ๊ธฐ๊ฐ ๋ง์์ผ ์ด๋ปค๋ค. font-size๋ฅผ vw ๋จ์๋ก ์ฃผ๋๊น ๋๋ฆ ๋ง์กฑ์ค๋ฝ๊ฒ ๋์๋ค. ์ด๋ฏธ ์ ํด๋์ ๋ ์ด์์ ๊ทธ๋ฆฌ๋ ๋์ด ๋๋ฌธ์ ๋์ ํ๋ฉด์์ ์ ์ฌ๊ฐํ ์์ ฏ์ ์ฌ์ฉํ ์ ์์๋ค. ์์ฌ์ด๋๋ก ๋์ด๋ ๊ณ ์ ํ๊ณ ๋๋น๋ง ๋๋ ค์ฃผ์๋ค.
import React from 'react';
const Tile = ({ children, color, ...props }) => {
return (
<div className="mypage-square" style={{ backgroundColor: `${color}` }}>
<div className="mypage-inner">
<div className="mypage-content" {...props}>
{children}
</div>
</div>
</div>
);
};
export default Tile;
//Tile.css
.mypage-square {
width: 100%;
border-radius: 22px;
position: relative;
}
.mypage-square:after {
content: '';
display: block;
padding-bottom: 100%;
}
.mypage-inner {
position: absolute;
width: 100%;
height: 100%;
}
.mypage-content {
height: 76%;
width: 76%;
padding: 12%;
}
๋ฐ์ํ ์ ์ฌ๊ฐํ ๋ชจ์์ผ๋ก ๊ณ ์ ํ๋๊ฒ ์๊ฐ๋ณด๋ค ๊น๋ค๋ก์ ๋ค. after ๊ฐ์ ์ ํ์๊ฐ ์ฌ๊ธฐ์ ๊ธฐ์ ์๊ธดํ๊ฒ ์ฐ์ธ๋ค. ์กฐ๊ธ ๋ ์ฐ์ตํด๋ด์ผ๊ฒ ๋ค. ์ ์ฌ๊ฐํ ํ๋ ๋๋ฌธ์ ์ฝ๋๊ฐ ๊ธธ์ด์ ธ ์ฝ๊ธฐ ํ๋ ๋๋์ด ์๋ค. ์ปดํฌ๋ํธ๋ก ๋ฐ๋ก ๋บ ํ์ ์์ ๋ด์ฉ์ children์ผ๋ก ๋๊ฒจ์ฃผ์๋ค.
props๋ฅผ ์คํ๋ ๋ ์ฐ์ฐ์๋ฅผ ์ด์ฉํด ๋๊ฒจ์ฃผ๊ณ , ์ํ๋ ์์น์์ {...props}
ํํ๋ก ๋ฐ์ ์ฌ์ฉํ ์ ์๋๋ก ํ๋ ๊ฑด ํ๋ก์ ํธ๋ฅผ ํ๋ฉด์ ๋ฐฐ์ด ๊ฒ๋ค ์ค ํ๋์ด๋ค. ์ข์ ๋ฐฉ์์ ์๋ ๊ฒ ๊ฐ๊ธด ํ์ง๋ง ํธํ๊ฒ ์ธ ์ ์๊ฒ ๋ค.