๐ป Naver clone coding
: ํ๊ทธ ์์ฒด์ ์๋ฏธ๋ฅผ ๋ถ์ฌํ์ฌ ๋งํฌ์ ์ ๊ตฌ์ฑํ๋ ๊ฒ.
โ๐ป ์๋งจํฑํ๊ทธ ์ฅ์
โ๐ป ์๋งจํฑํ๊ทธ์ ๊ตฌ์ฑ ๋ฐ ์ฌ์ฉ์ฉ๋
: header / main / footer
strong : ๋ฌธ์ฅ๊ฐ์กฐ ๊ฒ์๊ธ์์ ์ ๋ชฉ๊ธ
em: ๋จ์ด๊ฐ์กฐ ๊ฒ์๊ธ์์ ์นดํ
๊ณ ๋ฆฌ,๋ถ๋ฅ๊ธ
p : ๋ฌธ์ฅ,๋จ๋ฝ,๋ด์ฉ ์ ์๋ฏธํ ํ
์คํธ
span : ์๋ฏธ์๊ฑฐ๋ ๋จ์ ํ
์คํธ
i : ๋์์ธ
์๋ฏธ์์ด ์์ญ์ ๊ตฌ์ฑํ ๋
group-flex
column-left,column-right
col-left,col-right
row-top,row-bottom
์๋ฏธ์๊ฒ ์์ญ์ ๊ตฌ์ฑํ ๋
์น์
: sc-class
์์ญ: class-area
๋ฆฌ์คํธ: ul -> class-list , li -> class-item
aํ๊ทธ : ๋งํฌ์ด๋ -> link-๋ชฉ์ , ํน์ ํ ์ก์
btn-๋๋ณด๊ธฐ(์คํฌ๋ฆฝํธ์์ฉ)
class์์ฑ์ด 4๋จ๊ณ ์ด์์ ์ง์X
๐
๐ปโโ๏ธ[ํ๋ฆฐ์์ - ์์ฑํ๊ธฐ ํ๋ค๊ณ ์์์ด ๊ฒน์น ์ ์์]
.section-visual ul{}
.section-visual ul li{}
.section-visual ul li a{}
.section-visual ul li a img{}
๐๐ปโโ๏ธ[์ฌ๋ฐ๋ฅธ์์ - ๊ฐ๊ฒฐํ๊ณ ์ ํํจ]
.sc-visual .txt-list{}
.sc-visual .txt-item{}
.sc-visual .link-item{}
.sc-visual .link-item img{}
๐ example
.blind {
/* ๋ ์ด์์์ ์ํฅ์ ๋ผ์น์ง ์๋๋ก */
position: absolute;
/* ์คํฌ๋ฆฐ ๋ฆฌ๋๊ฐ ์ฝ์ ์ ์๋๋ก */
width: 1px;
height: 1px;
/* ๋์ ๋ณด์ด๋ ๋ถ๋ถ์ ์ ๊ฑฐ */
clip: rect(0 0 0 0);
margin: -1px;
overflow: hidden;
}
: ์์์์์ float๋ฅผ ์ ์ฉ ์ ํ๊ทธ๊ฐ ๋ถ- ๋จ๊ฒ๋๋ฉด์, ๋ถ๋ชจ๋ ์์์ด ์๋ค๊ณ ํ๋จํ๊ณ height๊ฐ์ ์๊ธฐ๋๋ฌธ์, ํด์ ๋ฅผ ํด์ฃผ์ด์ผ ํ๋ค.
๐ example
float๋ ์์์ ๋ถ๋ชจํ๊ทธ::after {
content:'';
display:block;
clear:both;
}
๐ example
-> ๊ณตํต์ผ๋ก ์ฐ์ด๋ ์์ญ ์ฝ๋์์ฑํ, ํด๋น ํด๋์ค์ ์ขํ๋ง ์ถ๊ฐํด์ฃผ๋ฉด๋จ
.class๋ช
:after{
background-image: url(../images/sp-bg.png);
background-size: 457px;
background-repeat: no-repeat;
}
https://spritegen.website-performance.org/
https://www.toptal.com/developers/css/sprite-generator
<nav class="gnb-area">
<ul class="gnb-list">
<li class="gnb-item"><a href="">๋ฉ์ผ</a></li>
<li class="gnb-item"><a href="">์นดํ</a></li>
<li class="gnb-item"><a href="">๋ธ๋ก๊ทธ</a></li>
<li class="gnb-item"><a href="">์ง์iN</a></li>
<li class="gnb-item"><a href="">์ผํ</a></li>
</ul>
</nav>
.header .gnb-area .gnb-list {
display: flex;
justify-content: space-between;
align-items: center;
}
.header .gnb-area .gnb-item {
font-size: 15px;
font-weight: bold;
line-height: 52px;
color: #19ce60;
}
๐ flex ์ฐธ๊ณ ์ฌ์ดํธ
https://studiomeal.com/archives/197
<ul class="media-list">
<li class="media-item">
<a href="" class="link-media">
<img src="https://s.pstatic.net/static/newsstand/2020/logo/light/0604/327.png" alt="๋ด๋ฐ์ผ๋ฆฌ">
</a>
</li>
<li class="media-item">
<a href="" class="link-media">
<img src="https://s.pstatic.net/static/newsstand/2020/logo/light/0604/014.png" alt="ํ์ด๋ธ์
">
</a>
</li>
</ul>
<!-- iํ๊ทธ๋ ๋จ์๋์์ธ-->
<!-- ์์ง์ -->
<i class="vt-line vt1"></i>
<i class="vt-line vt2"></i>
<i class="vt-line vt3"></i>
<i class="vt-line vt4"></i>
<i class="vt-line vt5"></i>
<!-- ์ํ์ -->
<i class="hr-line hr1"></i>
<i class="hr-line hr2"></i>
<i class="hr-line hr3"></i>
์ ์ฒด content๋ฐ์ค๋ง border 1px solid ์ฒ๋ฆฌ -> ๊ทธ์ธ ๋๋จธ์ง ์์ง์ ๊ณผ ์ํ์ ์ iํ๊ทธ๋ฅผ ํ์ฉํ์ฌ position:absolute;๋ก ์์น ๊ณ ์ ์ํด
์์ง์ ๊ณผ ์ํ์ ์ ๊ฐ๊ฐ ์ฝ๋ฉํ์ฌ ์์น ๊ณ ์ ์ ์ํจ ์ด์
: ๊ฐ li์ border์ฒ๋ฆฌ๋ฅผ ํ๋ค๊ณ ๊ฐ์ ํ์ ๋, ๋ง์ฝ ๋ฏธ๋์ด์ ๋ฆฌ์คํธ๊ฐ ๋ถ์กฑํ ๊ฒฝ์ฐ ๋์์ธ ๋ ์ด์์์ด ๋ง๊ฐ์ง๊ธฐ ๋๋ฌธ์
๐๐ป ์์ง์ ์ left๊ฐ์ผ๋ก ์กฐ์
.sc-news .vt-line {
position: absolute;
width: 1px;
height: 100%;
background: #dae1e6;
top: 0;
}
.sc-news .vt-line.vt1 {
left: 124px;
}
๐๐ป ์ํ์ ์ top๊ฐ์ผ๋ก ์กฐ์
.sc-news .hr-line {
position: absolute;
width: 100%;
height: 1px;
background: #dae1e6;
left: 0;
}
.sc-news .hr-line.hr1 {
top: 65px;
}
.box{
display:block; -> ๋ง์ค์ ์ฒ๋ฆฌ๋ฅผ ์ํด ๊ธ์ ์ถ๋ ฅํ ๊ณต๊ฐ์ด ํ์ํจ
white-space:nowrap; -> ํ
์คํธ๊ฐ ๋ถ๋ชจ๋๋น๋ณด๋ค ๋์ด์ง๋ฉด ์๋์ผ๋ก ์ค๋ฐ๊ฟ
overflow:hidden; -> ๋์น๋ ํ
์คํธ ์จ๊น์ฒ๋ฆฌ
text-overflow:ellipsis; -> ๋ง์ค์ ... ํ์
}
.box{
width:200px;
/*ํน์ ๋จ์๋ก ํ
์คํธ๋ฅผ ์๋ฅด๊ธฐ ์ํ ๊ตฌ๋ฌธ*/
white-space: normal; -> nowrap ํด์
display:-webkit-box; -> ๋ธ๋ก์ ์์ง,์ํ์ผ๋ก ๋ฐฐ์น ํน์ ์ญ์๋ฐฐ์ด ์์ ๋ฐฐ์น ์์ ๋ฐ๊ฟ ์ ์๋ ํน์ฑ
-webkit-line-clamp:3; -> ๋ธ๋ก ์ปจํ
์ด๋์ ์ปจํ
์ธ ๋ฅผ ์ง์ ํ ์ค ์ ๋งํผ ์ ํํ๋ ์์ฑ
-webkit-box-orient:vertical; -> ์ฝํ
์ธ ๋ฅผ ๊ฐ๋ก ๋๋ ์ธ๋ก๋ก ๋ฐฐ์นํ ์ง ์ฌ๋ถ๋ฅผ ๊ฒฐ์ ํ๋ ์์ฑ
overflow:hidden; -> ๋์น๋ ํ
์คํธ ์จ๊น์ฒ๋ฆฌ
}
.box{
width:200px;
white-space: normal;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
/*์ถ๊ฐ*/
line-height:1.2;
max-height:2.4; -> line-height๊ฐ 2๋ฐฐ
}