์์ฑ๋ ๋ฐ์ํ์ ์ธ๋ค์ผ ๊ธ ๋ชฉ๋ก
๊ธฐ์กด์ ์ง์ HTML, CSS ์ฝ๋ ์ง์ ๋ง๋ค์๋,
ํฐ์คํ ๋ฆฌ ์คํจ์ด ๋๋ฌด ์กฐ์กํ๊ณ ์ด์ค๋ฌ์์,
๋ค์ ๊ธฐ๋ณธ ์คํจ Square๋ก ๋์์์ต๋๋ค.
์ด์ ์คํจ๋ Square ๊ธฐ๋ณธ ์คํจ์ ์์ ํด์ ๋ง๋ค์๋๋ฐ,
ํด๋น ์คํจ๊ณผ ๊ด๋ จํด์ ์ ๊ฐ ๋๋ ๊ฐ์ธ์ ์ธ ๋ถํธํจ์ ๊ฐ์ ํ๋ ๋ฐฉํฅ์ผ๋ก ๋ฐ๊ฟจ์์ฃ .
์ด๋ฒ์๋ ๊ธฐ๋ณธ ์คํจ์ ๊ทธ๋๋ก ์ฐ๋, ์ ๋ณด์์ผ๋ฉด ํ๋ ๋ถ๋ถ๋ง
์ด์ง ์ด์ง ๋ฐ๊ฟ๋ณด๋ ค ํฉ๋๋ค.์ ๋ง๋ค์ด์ง ์คํจ ์จ๋ ๋์ง๋ง, ๋๋ ์๊ธ์์กฑํ๋ ๊ฐ๋ฐ์๋๊น..
์ ์ฒด ๊ธ ๋ชฉ๋ก์์ ์ธ๋ค์ผ์ด ๋ณด์ด๊ฒ๋ ํ ์ ์์๊น?
๊ทธ ์ค์์ ๊ฐ์ฅ ์๊ธํ๋ ์ ์ ๋์ฆ๋ ๋ฐ๋ก ๊ธ ๋ชฉ๋ก์ด์์ต๋๋ค.
์ ๋ ๋ชจ๋ ๊ฒ์๊ธ์ ์ธ๋ค์ผ ์ฌ์ง์ ์ด์ฌํ ๋ง๋๋ ํธ์ธ๋ฐ,
ํด๋น ์ธ๋ค์ผ์ด ์ ๋๋ฌ๋๋ ๊ธ ๋ชฉ๋ก์ ๋ง๋ค ์ ์์์ผ๋ฉด ํ์ต๋๋ค.
๋ฐ๋ผ์ ๊ธฐ๋ณธ ํฐ์คํ ๋ฆฌ ์คํจ์ธ Square ์คํจ์ ์ด์ง ์์ ํด์,
๊ธ ๋ชฉ๋ก์ด ์ธ์คํ๊ทธ๋จ ๊ทธ๋ฆฌ๋์ฒ๋ผ ์ธ๋ค์ผ๋ก ๋์ฌ ์ ์๊ฒ ํด๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
์ฐธ๊ณ ๋ก ์ ๋ ๋ชจ๋ ๊ฒ์๊ธ์ ์ธ๋ค์ผ์ ์ ๋ฐฉํ ์ฌ์ด์ฆ๋ก ๋ง๋ค๊ณ ์์ด์,
๊ทธ๋ฆฌ๋ ์ญ์ ์ ๋ฐฉํ์ผ๋ก ๋ง๋ ๋ค๋ ์ ์ฐธ๊ณ ๋ฐ๋๋๋ค!
1. ํฐ์คํ ๋ฆฌ ์นํ์ ๊ฐ๋ ์ดํดํ๊ธฐ
์คํจ ์ปค์คํฐ๋ง์ด์ง๊ณผ ๊ด๋ จํด์, ์์์ผ ํ ํ์์ ์ธ ๋ถ๋ถ์ HTML, CSS๋ ์๊ฒ ์ง๋ง,
ํฐ์คํ ๋ฆฌ ์คํจ ํธ์ง๊ณผ ๊ด๋ จํด์๋ ์นํ์๋ผ๋ ๊ฐ๋ ์ ๋ ์๋กญ๊ฒ ์์์ผ ํฉ๋๋ค.
์ต๋ํ ์ฝ๊ฒ ์ค๋ช
ํ์๋ฉด,
ํฐ์คํ ๋ฆฌ ์นํ์๋ ๋ธ๋ก๊ทธ ๋ด์์ ๋ณด์ฌ์ง๋ ๋ค์ํ ๊ฐ๋ค์ ๋ด๋ ๋ณ์๋ผ ์๊ฐํ ์ ์์ต๋๋ค.
๋ธ๋ก๊ทธ ์ ๋ชฉ์ ๋ด๋ ๋ณ์, ๊ฒ์๊ธ์ ์ ๋ชฉ์ ๋ด๋ ๋ณ์, ๊ฒ์๊ธ ์์ฑ ๋ ์ง๋ฅผ ๋ด๋ ๋ณ์ ๋ฑ์ธ ๊ฒ์ด์ฃ .
์นํ์๋ฅผ HTML์์ ์ํ๋ ์์น์ ํ๊ทธ์ ๋ฃ์ผ๋ฉด, ์ค์ ๋ธ๋ก๊ทธ์์๋ ํด๋น ๋ฐ์ดํฐ๋ก ์๋์ผ๋ก ๋ณํ๋์ด ํ์๋ฉ๋๋ค.
ํฐ์คํ ๋ฆฌ ์นํ์๋ ์ ๋ง ๋ค์ํ๊ฒ ์กด์ฌํ๊ธฐ ๋๋ฌธ์ ์์ธํ ๋ด์ฉ์ ๊ฒ์๊ธ์ ๋ณ๋๋ก ๋ง๋ค์ด ์ ๋ฆฌํ ์ ์๋๋ก ํ๊ฒ ์ต๋๋ค.
2. ์์ ํ ์์ญ (๊ธ ๋ชฉ๋ก ์นํ์) ํ์ธํ๊ธฐ
๊ทธ๋ ๋ค๋ฉด ๊ธ ๋ชฉ๋ก์ ์์ ํ๊ธฐ ์ํด ๋ค๋ค์ผ ํ๋ ์นํ์๋ ๋ฌด์์ผ๊น์?
๋ฐ๋ก ๋ฆฌ์คํธ ๊ทธ๋ฃน ์นํ์์ ํด๋นํ๋ <s_list>์
๋๋ค.
<s_list> ์นํ์ ๊ด๋ จํด์๋ ๋ค์ ๋งํฌ์์ ์์ธํ๊ฒ ํ์ธํ ์ ์์ต๋๋ค.
https://tistory.github.io/document-tistory-skin/list/list.html
์ด๋ ๊ฒ ์คํจ ํธ์ง์์ s_list๋ฅผ ๊ฒ์ํ๋ฉด, ์ ์ฒด ๊ธ์ ํด๋นํ๋ ํ๊ทธ ๋ถ๋ถ์ ํ์ธํ ์ ์์ต๋๋ค.
์ ํฌ๋ s_list_rep ๋ถ๋ถ, ๊ทธ๋ฌ๋ ๋ชฉ๋ก์์ ๋ฐ๋ณต๋๋ ๋ถ๋ถ์ ์์ ํ๋ฉด ๋๋ ๊ฒ์ด์ฃ .
<s_list>
<div id="head">
<h2></h2>
</div>
<div id="body" class="list">
<ul>
<s_list_rep>
<li>
<a href=""></a> // ๊ธ ๋ชฉ๋ก์ ๊ฒ์๊ธ์ ์ ๋ชฉ
<span class="date"></span> // ๊ธ ๋ชฉ๋ก์ ๊ฒ์๊ธ์ ์์ฑ์ผ
<span class="cnt"></span> // ๊ธ ๋ชฉ๋ก์ ๊ฒ์๊ธ์ ๋๊ธ ์
<div class="clear"></div>
</li>
</s_list_rep>
</ul>
</div>
</s_list>
์ง๊ธ ๋ณด๋ฉด ๊ฒ์๊ธ์ ์ ๋ชฉ, ์์ฑ์ผ, ๋๊ธ ์๋ ์ ํ ์์ง๋ง ์ธ๋ค์ผ๊ณผ ๊ด๋ จ๋ ์นํ์๋ ์๋กญ๊ฒ ๋ฃ์ด์ค์ผ ํฉ๋๋ค.
์ธ๋ค์ผ๊ณผ ๊ด๋ จ๋ ์นํ์๋ฅผ ์ฐพ์์, ๋ฃ์ด์ฃผ๊ณ ๋ค๋ฅธ ๋ด์ฉ๋ค์ ์ง์์ฃผ๋๋ก ํฉ์๋ค.
3. ๊ธ ๋ชฉ๋ก ์ธ๋ค์ผ ์นํ์ ์ถ๊ฐํ๊ณ ๋ณ๊ฒฝํ๊ธฐ
<s_list>
<div id="head">
<h2></h2>
</div>
<div id="body" class="list">
<ul>
<s_list_rep>
<li>
<a href="">
<div class="thumb">
<img src="" alt="Thumbnail" style="width: 100%; height: auto; object-fit: cover;">
</div>
</a>
</li>
</s_list_rep>
</ul>
</div>
</s_list>
์ธ๋ค์ผ์ ๋๋ฅด๋ฉด ํด๋น ๊ฒ์๊ธ๋ก ๋์ด๊ฐ ์ ์๊ฒ, <a></a> ํ๊ทธ ์์
<img> ํ๊ทธ๋ฅผ ์ฝ์
ํฉ๋๋ค.
src์๋ ##_list_rep_thumbnail_## ์นํ์๋ฅผ ๋ฃ๊ณ ,
style์ width: 100%; height: auto; object-fit: cover;๋ก ์ค์ ํฉ๋๋ค.
์ด๋ฏธ์ง๊ฐ ๋ถ๋ชจ ์์์ ์ ์ฒด ๋๋น์ ๋ง์ถฐ์ง๊ณ , ๋์ด๋ ๋๋น์ ๋น์จ์ ์๋์ผ๋ก ์ ์งํ๊ฒ ๋ฉ๋๋ค.
์ด๋ฏธ์ง๊ฐ ๋ถ๋ชจ ์์๋ณด๋ค ํด ๊ฒฝ์ฐ์, object-fit: cover๋ก ์ธํด, ์๋์ผ๋ก ์กฐ์ ๋๋ฉฐ, ์๋ฆฌ๋ ๋ถ๋ถ์ด ์๋๋ก ํฉ๋๋ค.
4. CSS ์ค์ ํ์ฌ, ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ผ๋ก ๋ง๋ค๊ณ ๋ฐ์ํ ์ค์ ํ๊ธฐ
/*
* list
*/
.list ul {
display: grid;
gap: 20px;
padding: 0;
margin: 0;
list-style: none;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3);
}
/* ํ๋ธ๋ฆฟ - 3x3 ๊ทธ๋ฆฌ๋ */
@media (min-width: 641px) and (max-width: 1024px) {
.list ul {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3);
}
}
/* ๋ชจ๋ฐ์ผ - 2x2 ๊ทธ๋ฆฌ๋ */
@media (max-width: 640px) {
.list ul {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2);
overflow: hidden;
max-height: 480px; /* 2ํ๋ง ๋ณด์ด๋๋ก ๋์ด ์ ํ */
}
.list ul li:nth-child(n+5) {
display: none; /* ์ฒซ 4๊ฐ ํญ๋ชฉ๋ง ํ์ */
}
}
.list ul li {
border: 1px solid #ddd; /* ๊ฐ ํญ๋ชฉ ์ฃผ์์ ๊ฒฝ๊ณ์ ์ ์ถ๊ฐ */
padding: 10px; /* ํจ๋ฉ์ ์ถ๊ฐํ์ฌ ๋ด์ฉ๊ณผ ๊ฒฝ๊ณ์ ์ฌ์ด์ ๊ณต๊ฐ ์ฌ๋ฐฑ ์์ฑ */
background-color: #fff; /* ๋ฐฐ๊ฒฝ์์ ๊ฒฝ์ฐ, ํฐ์์ผ๋ก ์ค์ */
}
๋ค์์ผ๋ก๋ ์์์ ์์ ํด์ค์ผ ํฉ๋๋ค.
CSS์์ ๋ฆฌ์คํธ ํด๋์ค๋ฅผ ์์ ํ ์ ์๋๋ก .list์ ์์๋ฅผ ์ฐพ์ ๋ค์๊ณผ ๊ฐ์ด ์์ ํฉ๋๋ค.
@media๋ ๋ฏธ๋์ด ์ฟผ๋ฆฌ ๊ท์น์ผ๋ก ๋ค์ํ ๋์คํ๋ ์ด ํ๊ฒฝ (๋ชจ๋ฐ์ผ, ํ๋ธ๋ฆฟ, PC) ๋ฑ์ ๋ฐ๋ผ ์น ํ์ด์ง ์คํ์ผ์ ์์ ํ ๋, ํ์ฉํ๋ ๊ท์น์ ๋๋ค.
์ ๋ ๋ชจ๋ฐ์ผ ํ๊ฒฝ์์๋ 2*2 ๊ทธ๋ฆฌ๋ ํํ๋ก, ํ๋ธ๋ฆฟ๊ณผ PC์์๋ 3*3์ ๊ทธ๋ฆฌ๋ ํํ๋ก ๋ณด์ฌ์ง๋๋ก ํ๋๋ฐ, ํ๋ธ๋ฆฟ์ PC์ ๋์ผํ๋ฏ๋ก ๋ฃ์ง ์์๋ ๋ฉ๋๋ค.
ํ๋ธ๋ฆฟ์์๋ 2*2๋ก ํ ๊น ํ์ธํ๋๋ฐ, 3*3์ด ๋์ ๊ฒ ๊ฐ์์ ๊ทธ๋๋ก ๋์ต๋๋ค.
5. ๋ชฉ๋ก ๊ธ ์ ์ค์
๋ง์ง๋ง์ผ๋ก ํ ์ค์ ๊ณผ ๊ธฐ๋ณธ ์ค์ ์ ๊ธ ์๋ฅผ 9๊ฐ๋ก ์ค์ ํฉ๋๋ค.
๋ชจ๋ฐ์ผ ํ๊ฒฝ์์๋ 9๊ฐ๋ก ํด๋์๋๋ผ๋, CSS ์คํ์ผ๋ง์ ํตํด, 4๊ฐ ์ดํ์ ์ฌ๋ผ์ด๋๋ ๋ณด์ฌ์ง์ง ์๋๋ก ์ ์ค์ ํ์ต๋๋ค.
์ด๋ ๊ฒ ํฐ์คํ ๋ฆฌ ์คํจ ํธ์ง์ ๊ดํ์ฌ ์์ ๋ณด์์ต๋๋ค.
ํฐ์คํ ๋ฆฌ ์คํจ์ ์นํ์ ๋๋ฌธ์ด๋ผ๋ ๋ง๋๋๋ฐ ์กฐ๊ธ ๋ฒ๋ฒ
์ด๋ ๊ฒ ์๋๋ฐ, ๊ทธ๋๋ ๊ณ์ ๊ณต๋ถํ๊ณ , ์์ ํ๋ฉด์ ์ต์ํด์ง์ง ์์๊น ์๊ฐํฉ๋๋ค.
๊ถ๊ธํ ์ ์ ๋๊ธ๋ก ๋จ๊ฒจ์ฃผ์๋ฉด, ๊ฐ์ด ๊ณ ๋ฏผํด์ ๋์๋๋ฆด ์ ์๋๋ก ํ๊ฒ ์ต๋๋ค.
๊ฐ์ฌํฉ๋๋ค. (๊พธ๋ฒ )