https://paint-box.com/ 클론코딩
클론 코딩할때 또 기억해야 하는 것은 글자와 그림 배치를 보고 flex 로 할 건지 grid 로 할 건지 대충 머릿속에 그려놔야하고, 또한 flex로 했을때 direction이 column 인지 row인지도 미리 구상하면 더 명확하게 코딩 할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<body>
<header>
<nav>
<ul>
<li>NAIL STUDIOS</li>
<li>SHOP POLISH</li>
</ul>
<img src="logo.png" />
<ul>
JOURNAL
</ul>
</nav>
<!-- 역시나 위에 목록부분은 nav 와 header로 감싼다 -->
</header>
<div class="hero">
<h4>The Uptown Collection</h4>
<h3>
Meet our newest nails, designed in collaboration with our friends on the
Upper East Side.
</h3>
<a href="#">Read More</a>
</div>
<section class="under_hero">
<img src="studio.png" />
<div class="under_hero_content">
<div class="wrapper">
<h4>The studio</h4>
<h3>
Book a manicure at our Soho flagship studio or our new Uptown studio,
20 East 69th Street at Madison Avenue.
</h3>
<a href="#">Book a Manicure</a>
</div>
</div>
</section>
<section class="blog">
<article class="blog_post">
<img src="brown.png" />
<div class="post_content">
<span class="post_date">Feb 25, 2020</span>
<h4>New and Now: Fall–Winter 2020 Lookbook Collection</h4>
<a href="#">Read Story</a>
</div>
</article>
<article class="blog_post">
<img
src="https://images.unsplash.com/photo-1583255448430-17c5eda08e5c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
/>
<div class="post_content">
<span class="post_date">Feb 25, 2020</span>
<h4>New and Now: The Uptown Collection</h4>
<a href="#">Read Story</a>
</div>
</article>
<article class="blog_post">
<img
src="https://images.unsplash.com/photo-1583255448430-17c5eda08e5c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
/>
<div class="post_content">
<span class="post_date">Feb 25, 2020</span>
<h4>New and Now: The Uptown Collection</h4>
<a href="#">Read Story</a>
</div>
</article>
</section>
<section class="gallery">
<div class="gallery_poster">
<img src="gallery_web.png" />
</div>
<div class="gallery_poster">
<img src="gallery_web.png" />
</div>
<div class="gallery_poster">
<img src="gallery_web.png" />
</div>
</section>
<footer class="footer">
<div class="footer_column">
<span class="column_title">support</span>
<ul>
<li>F.A.Q.</li>
<li>Privacy Policy</li>
<li>Terms and Conditions</li>
<li>Accessibility</li>
</ul>
</div>
<div class="footer_column">
<span class="column_title">FOLLOW US</span>
<ul>
<li>INSTAGRAM</li>
<li>PINTEREST</li>
<li>FACEBOOK</li>
<li>NEWSLETTER</li>
</ul>
</div>
<div class="footer_column">
<span class="column_title">PAINTBOX</span>
<ul>
<li>OUR STUDIOS</li>
<li>CAREERS</li>
<li>PRESS</li>
<li>CONTACT US</li>
</ul>
</div>
</footer>
</body>
scss 코딩
우선 extend 와 variables 를 설정하자.
1
2
3
4
5
6
7
%miniTitle {
font-family: "Montserrat";
font-weight: 500;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 2px;
}
1
2
$bg: #f3ede8;
$sideSpace: 140px;
이렇게 일단 설정해놓고 styles.scss 는 다음 글에서 알아보자 글이 너무 길어질 것 같으니.