๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ



Solve/ํ‹ฐ์Šคํ† ๋ฆฌ-์œ ํŠœ๋ธŒ

ํ‹ฐ์Šคํ† ๋ฆฌ ์™“์—๋ฒ„ ์Šคํ‚จ ์ˆจ๊ฒจ์ง„ ๋ฒ„๊ทธ ์žก๊ธฐ - ๋‹คํฌ๋ชจ๋“œ 2ํƒ„

ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ๋ฅผ ์‹œ์ž‘ํ•œ ์ง€ 1๋…„ 3๊ฐœ์›”์ด ๋„˜์–ด๊ฐ€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ํ™ˆํŽ˜์ด์ง€ ๊ด€๋ฆฌ๋Š” 20์—ฌ๋…„ ์ „ ์žฌ๋ฏธ์‚ผ์•„ html๋ฅผ ๊ฑด๋“ค์–ด ๋ณธ ๊ฒƒ์ด ์ „๋ถ€์˜€๋Š”๋ฐ.. ๊ทธ๋•Œ ๋ฐฐ์šด ์•ฝ๊ฐ„์˜ html ์ง€์‹์œผ๋กœ ๊ทธ๋™์•ˆ ์–ด๋–ป๊ฒŒ ์ตœ์†Œํ•œ์˜ ๊ด€๋ฆฌ๋งŒ ํ•˜๋ฉฐ ๋ฒ„ํ…จ ์™”์Šต๋‹ˆ๋‹ค. 

์ตœ๊ทผ ๋ธ”๋กœ๊ทธ ์Šคํ‚จ์„ ๋‹คํฌ๋ชจ๋“œ๋กœ ์—…๊ทธ๋ ˆ์ด๋“œ(?) ๋ณ€๊ฒฝ์„ ํ•˜๋ฉฐ (drkimfixnsolve.tistory.com/142) ์ด๊ฒƒ ์ €๊ฒƒ ์ˆจ๊ฒจ์ง„ ๋ฒ„๊ทธ๋“ค์ด ์ €์ ˆ๋กœ ๋‚˜ํƒ€๋‚˜๋Š” ๋ฐ”๋žŒ์—.. (SONYLOVE๋‹˜์˜ ๋Œ“๊ธ€์— ์ž๊ทน๋„ ๋ฐ›๊ณ ..) ์–ด์ฉ”์ˆ˜ ์—†์ด ๋ฒ„๊ทธ์žก๊ธฐ๋ฅผ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. html ๋งŒ์œผ๋กœ๋Š” ํž˜๋“ค๊ณ  css ํŒŒ์ผ์„ ์ˆ˜์ •ํ•ด์•ผ ํ•˜๊ณ .. ์•ฝ๊ฐ„์˜ ์ž๋ฐ” ์ง€์‹๋„ ํ•„์š”ํ•œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋‹น์—ฐํžˆ ์ €๋Š” css๋‚˜ ์ž๋ฐ” ๋“ฑ์— ๊ฒฝํ—˜์ด ์ „ํ˜€ ์—†์ง€๋งŒ.. ๊ธฐ์กด์— ์žˆ๋Š” ์Šคํ‚จ ํŒŒ์ผ ๋‚ด์šฉ๋“ค๊ณผ ์ ๋‹นํžˆ ๋น„๊ตํ•˜๋ฉฐ ์ด๊ฒƒ ์ €๊ฒƒ ๋ฐ”๊ฟ”๊ฐ€๋ฉฐ ์‹คํ—˜ํ–ˆ๋”๋‹ˆ.. ๊ฝค ๋งŽ์€ ์ˆจ๊ฒจ์ง„ ๋ฒ„๊ทธ๋“ค์„ ์ฐพ์„ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์šฐ์„  ์ด์ „ ๊ธ€ ํ™•์ธํ•˜์‹œ๊ณ ์š”.

 

๊น€์„ ์ƒ FixnSolve ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ ๋‹คํฌ๋ชจ๋“œ ์ถœ์‹œ~ ๋˜ํ•˜๋‚˜์˜ ์—๋„ˆ์ง€ ์ ˆ์•ฝ ์•„์ดํ…œ

์š”์ฆ˜ ๋‹คํฌ๋ชจ๋“œ๊ฐ€ ์œ ํ–‰์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋งฅ๋„ ๋‹คํฌ๋ชจ๋“œ๋ฅผ ์ง€์›ํ•˜๊ณ , ์• ํ”Œ iOS ์ตœ์‹ ๋ฒ„์ ผ๋„ ๋‹คํฌ๋ชจ๋“œ๋ฅผ ์ง€์›ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์š”์ฆ˜ ๋ชจ๋ฐ”์ผ ๋‹ค์Œ๋„ ๋‹คํฌ๋ชจ๋“œ๋กœ ์ „ํ™˜ ์ค‘์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์–ด๋–ป๊ฒŒ ๋ณด๋ฉด ๋‹คํฌ

drkimfixnsolve.tistory.com

ํ‹ฐ์Šคํ† ๋ฆฌ ์™“์—๋ฒ„ (Whatever) ์Šคํ‚จ์— ํ•ด๋‹นํ•˜๊ณ ์š”, ์Šคํ‚จ ๋ฒ„์ ผ์— ๋”ฐ๋ผ ๋ฒ„๊ทธ๊ฐ€ ์žˆ์„ ์ˆ˜๋„ ์—†์„ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์ „ํ˜€ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ธฐ๋Šฅ์ผ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค๋งŒ.. ํ˜น์‹œ ๋„์›€ ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” ๋ถ„๋“ค์„ ์œ„ํ•ด ํ•˜๋‚˜์”ฉ ๊ณต๊ฐœํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์™“์—๋ฒ„ ์Šคํ‚จ ๋‹คํฌ๋ชจ๋“œ ๊ธฐ์ค€์ž…๋‹ˆ๋‹ค.

1. ์•ž์„œ ์ด๋ฏธ ๊ณต๊ฐœํ•œ ๋‚ด์šฉ์ธ๋ฐ ๋‹คํฌ๋ชจ๋“œ์—์„œ ๊ทธ๋ฆผ ์„ค๋ช…, ์˜คํ”ˆ๊ทธ๋ž˜ํ”„ ์ œ๋ชฉ, ๊ณต๊ฐ/๊ตฌ๋…ํ•˜๊ธฐ ๊ธ€์ž๋“ค์ด ๊ฒ€์€์ƒ‰์œผ๋กœ ํ‘œ์‹œ๋˜๋Š” ๋ฒ„๊ทธ๊ฐ€ ์žˆ๊ณ ์š”, ๋‹ค์Œ์˜ ์ฝ”๋“œ๋ฅผ ์Šคํ‚จํŽธ์ง‘/html ํŽธ์ง‘/css ๋งจ๋’ค์— ์ฒจ๊ฐ€ํ•ด์„œ ํ•ด๊ฒฐํ–ˆ์Šต๋‹ˆ๋‹ค.

.color-dark .postbtn_like, .txt_state{color:white}
.color-dark figcaption {color:gray !important}
.color-dark .og-title{color: #d4bca7 !important;}

2. ๋‹คํฌ๋ชจ๋“œ์—์„œ ๋Œ“๊ธ€์ด ๋„ˆ๋ฌด ์–ด๋‘ก๊ฑฐ๋‚˜ ๋Œ“๊ธ€ ๊ตฌ๋ถ„์„ ์ด ๊ฒ€์€์ƒ‰ (pc) ํ˜น์€ ํ•˜์–€์ƒ‰(๋ชจ๋ฐ”์ผ)์œผ๋กœ ํ‘œ์‹œ๋˜๋Š” ๋ฒ„๊ทธ๊ฐ€ ์žˆ์–ด ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ css ๋งจ๋’ค์— ์ฒจ๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.

.color-dark .comments .comment-list ul li p {color: #848484;}
.color-dark .comments .comment-list ul li ul {border-top: 1px solid #222;}

๊ธฐํƒ€ ๋Œ“๊ธ€ ์ž…๋ ฅ ๋ถ€๋ถ„์ด ๋„ˆ๋ฌด ์–ด๋‘ก๊ฑฐ๋‚˜ ๊ธฐํƒ€ ๊ตฌ๋ถ„์„ ์ด ๊ฒ€๊ฒŒ ํ‘œ์‹œ๋œ๋‹ค๋ฉด ์•„๋ž˜ ๋ถ€๋ถ„๋“ค์˜ ์ƒ‰๊น”์„ ์ˆ˜์ •ํ•ด ์ค˜์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์—ฌ๋Ÿฌ๊ฐ€์ง€ ๊ตฌ๋ถ„์„ ์ด ๊ฒ€๊ฒŒ ํ‘œ์‹œ๋  ๋•Œ ์‚ด์ง ๋ฐ๊ฒŒ ์กฐ์ •ํ•˜๋Š” ๋ถ€๋ถ„
๋Œ“๊ธ€ ์ž…๋ ฅ ํ™”๋ฉด ๋ฐ•์Šค ์ƒ‰๊น” ์กฐ์ •ํ•˜๋Š” ๋ถ€๋ถ„
๋Œ“๊ธ€ ์ž…๋ ฅ ํ™”๋ฉด์ด ๋„ˆ๋ฌด ์–ด๋‘์šธ ๋•Œ ์กฐ์ •ํ•˜๋Š” ๋ถ€๋ถ„

3. ์นดํ…Œ๊ณ ๋ฆฌ๊ธ€ ๋”๋ณด๊ธฐ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์ด์šฉํ•  ๋•Œ ๋ชจ๋ฐ”์ผ์—์„œ ๊ธ€์ž๊ฐ€ ๋„ˆ๋ฌด ์ž‘๊ฒŒ ํ‘œ์‹œ๋˜๋Š” ๋ฒ„๊ทธ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•ด๋‹น ๊ธฐ๋Šฅ์„ ๋‹ด๋‹นํ•˜๋Š” class๊ฐ€ another_category ์ธ๋ฐ css ํŒŒ์ผ์—๋Š” another-category๋ผ๊ณ  ์ž˜๋ชป ์ •์˜ํ•ด ๋†“์•˜์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ another-category๋ฅผ ์ฐพ์•„์„œ ์ „๋ถ€ another_category๋กœ ๋ฐ”๊ฟ”์ค˜์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰ ๋Œ€์‰ฌ(-)๋ฅผ ๋ฐ‘์ค„(_)๋กœ ๋ฐ”๊ฟ” ์ค˜์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ด๋ ‡๊ฒŒ ์ˆ˜์ •ํ•˜๊ณ  ๊ธ€์žํฌ๊ธฐ๋ฅผ ํ‚ค์šฐ๋ ค๋ฉด..

์นดํ…Œ๊ณ ๋ฆฌ๊ธ€ ๋”๋ณด๊ธฐ ๊ธ€์”จ ํ‚ค์šฐ๊ธฐ

์ด ๋ถ€๋ถ„์—์„œ font-size: 1.15em ๋ถ€๋ถ„์„ ์ˆ˜์ •ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ๋Œ“๊ธ€ ์นด์šดํŠธ ํ‘œ์‹œ๋„ ๋น„์Šทํ•˜๊ฒŒ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 

๋Œ“๊ธ€ ๊ฐฏ์ˆ˜ ํ‘œ์‹œ ํ‚ค์šฐ๊ธฐ

๋˜ํ•œ ๋‹คํฌ๋ชจ๋“œ์—์„œ ์ƒ‰๊น”์„ ๋ฐ๊ฒŒ ํ•˜๊ณ  ๋งˆ์šฐ์Šค๊ฐ€ ์˜ฌ๋ผ๊ฐ”์„ ๋•Œ ์ƒ‰๊น”์ด ๋ฐ”๋€Œ๊ฒŒ ํ•˜๋ ค๋ฉด ๋‹ค์Œ ์ฝ”๋“œ๋ฅผ css ๋งจ๋’ค์— ์ถ”๊ฐ€ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

.color-dark .another_category table th a {color: #bbbbbb !important;}
.color-dark .another_category table th a:hover {color: #d4bca7 !important;}

4. ๋ชจ๋ฐ”์ผ(์•„์ดํฐ ์‚ฌํŒŒ๋ฆฌ)์—์„œ ๋ณธ๋ฌธ๊ณผ ์‚ฌ์ง„์„ค๋ช…์˜ ๊ธ€์”จ ํฌ๊ธฐ๊ฐ€ ๋„ˆ๋ฌด ์ž‘๊ฒŒ ํ‘œ์‹œ๋˜์–ด ๊ธ€์”จ ํฌ๊ธฐ๋ฅผ ํ‚ค์šฐ๋ ค๋ฉด ๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ๋ชจ๋ฐ”์ผ ์Šคํ‚จ ๋ถ€๋ถ„์— ์ถ”๊ฐ€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋ฐ”์ผ ์ „์šฉ ์Šคํ‚จ ์‹œ์ž‘ํ•˜๋Š” ๋ถ€๋ถ„

 ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ์œ— ์‚ฌ์ง„ ์•„๋ž˜ ์ชฝ์— ์ฒจ๊ฐ€ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๋Œ€๋žต 2600๋ฒˆ์งธ ๋ผ์ธ ์ฏค์— ์ฒจ๊ฐ€ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

.entry-content p {
font-size: 1.15em;
}
.entry-content figure figcaption {
font-size: 0.95em;
}

5. ๊ทธ๋™์•ˆ ์•Œ๊ณ  ์žˆ์—ˆ์ง€๋งŒ ์–ด๋–ป๊ฒŒ ์ˆ˜์ •ํ•  ์ง€ ๋ชฐ๋ผ ์ฐธ๊ณ  ์žˆ์—ˆ๋˜ ๋ฒ„๊ทธ๋„ ์ˆ˜์ •ํ–ˆ์Šต๋‹ˆ๋‹ค. ํฌ๋กฌ์—์„œ๋Š” ๋ฐœ์ƒํ•˜์ง€ ์•Š๋Š”๋ฐ, ๋งฅ์ด๋‚˜ ์•„์ดํฐ ์‚ฌํŒŒ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ํ™ˆ ํ™”๋ฉด์˜ ์ธ๋„ค์ผ๋ฆฌ์ŠคํŠธ1์— ๋งˆ์šฐ์Šค๋ฅผ ์˜ฌ๋ฆฌ๋ฉด ์ด๋ฏธ์ง€๊ฐ€ ์‚ด์ง ์›€์ง์ด๋ฉฐ ๋ฐฐ์—ด์ด ๋’คํ‹€๋ฆฝ๋‹ˆ๋‹ค. ๋ญ๊ฐ€ ๋ฌธ์ œ์ธ์ง€ ์‚ดํŽด๋ณด๋‹ˆ ์•„๋ž˜ ์ฝ”๋“œ ๋ถ€๋ถ„์—์„œ after ๋ถ€๋ถ„์ด before๋ผ๊ณ  ์ ํ˜€ ์žˆ๋”๋ผ๊ตฌ์š”. after๋กœ ๋ฐ”๊ฟ” ์คฌ๋”๋‹ˆ ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋์Šต๋‹ˆ๋‹ค. before ๋ผ๊ณ  ์ ํ˜€ ์žˆ๋Š” ๋ถ„๋“ค์€ after๋กœ ๋ฐ”๊ฟ”์ฃผ์„ธ์š”.

์ธ๋„ค์ผ๋ฆฌ์ŠคํŠธ1์ด ์˜ค์ž‘๋™ํ•  ๋•Œ ๋…ธ๋ž€์ƒ‰ ํ‘œ์‹œ ๋ถ€๋ถ„์ด before๋ผ๊ณ  ์จ ์žˆ๋‹ค๋ฉด after๋กœ ๋ฐ”๊ฟ”์ฃผ์„ธ์š”

6. ์ธ๋„ค์ผ๋ฆฌ์ŠคํŠธ2์—๋„ ์ˆจ๊ฒจ์ง„ ๋ฒ„๊ทธ๊ฐ€ ์žˆ์—ˆ๋Š”๋ฐ์š”. ์ธ๋„ค์ผ ์„ค๋ช…์—์„œ ์ฒซ์ค„์—์„œ ๋ง์ค„์ž„ํ‘œ๊ฐ€ ๋‚˜ํƒ€๋‚œ๋‹ค๋ฉด ์•„๋ž˜ ๋นจ๊ฐ„์ƒ‰ line-clamp ๋ถ€๋ถ„ ์ˆซ์ž๋ฅผ 1์—์„œ 3์œผ๋กœ ๋ฐ”๊ฟ”์ฃผ์„ธ์š”.

์ธ๋„ค์ผ๋ฆฌ์ŠคํŠธ2์— ์ˆจ๊ฒจ์ ธ ์žˆ๋˜ ๋ง์ค„์ž„ํ‘œ๊ฐ€ ์ฒซ๋ฒˆ์งธ ์ค„์—์„œ ๋‚˜ํƒ€๋‚˜๋Š” ๋ฒ„๊ทธ (line-clamp) ๋ถ€๋ถ„

๋Œ€๋žต ์ด์ •๋„ ๋ฐœ๊ฒฌํ•œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. css์— ๋Œ€ํ•ด ์ „ํ˜€ ๋ชจ๋ฅด๋ฉด์„œ ๊ทธ๋ƒฅ trial-and-error ๋ฐฉ๋ฒ•์œผ๋กœ ์ฐพ์€ ํ•ด๋ฒ•๋“ค์ด๋ผ ์ „๋ฌธ๊ฐ€๋“ค์˜ ํŒ์— ๋น„ํ•˜๋ฉด ์‚ด์ง ๋ถ€๋„๋Ÿฌ์šด ๋‚ด์šฉ์ด ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜๋„ ์ €์ฒ˜๋Ÿผ ์ดˆ๋ณด์ž๋ถ„๋“ค๊ป˜๋Š” ์กฐ๊ทธ๋งŒ ๋„์›€์ด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. 

์™“์—๋ฒ„ ์Šคํ‚จ์— ์ˆจ๊ฒจ์ง„ ๋ฒ„๊ทธ๋“ค์„ ๋ณด๋ฉด์„œ ํ‹ฐ์Šคํ† ๋ฆฌ๋ฅผ ๊ฐœ๋ฐœํ•˜๊ณ  ์žˆ๋Š” ๋งŽ์€ ํ”„๋กœ๊ทธ๋ž˜๋จธ๋“ค์ด ์—ญ์‹œ ๋งค์šฐ ์ •์‹ ์—†์ด ์‚ด๊ณ  ์žˆ๊ฒ ๊ตฌ๋‚˜ ํ•˜๋Š” ์ƒ๊ฐ์„ ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ๋ถ„๋“ค๊ป˜ ํ‹ฐ์Šคํ† ๋ฆฌ๋ฅผ ๋งŒ๋“ค์–ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•˜๊ณ , ์˜ˆ์œ ์Šคํ‚จ์„ ๊ฐœ๋ฐœํ•ด์„œ ๋ฌด๋ฃŒ๋กœ ๊ณต๊ฐœํ•ด ์ฃผ์…”์„œ ๋”์šฑ ๊ฐ์‚ฌํ•˜๋‹ค๋Š” ๋ง์”€์„ ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ์ €๋„ ๋งŽ์€ ํ‹ฐ์Šคํ† ๋ฆฌ ์„ ๋ฐฐ๋“ค์˜ ๋„์›€์„ ๋ฐ›๊ณ  ์žˆ๊ณ ์š”.. ์ดˆ๋ณด์ง€๋งŒ ์ด๋ ‡๊ฒŒ ์ €๋ ‡๊ฒŒ ์•Œ์•„์„œ ์ž˜ ์ˆ˜์ •ํ•˜๋ฉฐ ๊ณต์œ ํ•˜๋ฉฐ ์‚ด๊ณ  ์žˆ๊ณ .. ๊ทธ๋ ‡๊ฒŒ ์šฐ๋ฆฌ๋ผ๋ฆฌ ์„œ๋กœ ๋„์šฐ๋ฉฐ ๊ฑด๊ฐ•ํ•œ ํ‹ฐ์Šคํ† ๋ฆฌ ์ƒํƒœ๊ณ„๊ฐ€ ํ˜•์„ฑ๋˜๊ณ  ์žˆ๋‹ค๊ณ  ๊ฐํžˆ ๋ง์”€๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค. 

(์ถ”๊ฐ€ 2020/6/28) ์™“์—๋ฒ„ ์Šคํ‚จ์—์„œ ๋ช‡๋ช‡ ๋ฒ„๊ทธ๊ฐ€ ๋” ๋ฐœ๊ฒฌ๋˜๊ณ  ์žˆ๋Š”๋ฐ.. ์™“์—๋ฒ„ ์Šคํ‚จ์˜ ํžˆ์Šคํ† ๋ฆฌ๋ฅผ ์ซ“์•„๊ฐ€ ๋ณด๋‹ˆ.. ์ด๋ฏธ ํ‹ฐ์Šคํ† ๋ฆฌ ์ธก์—์„œ ์ž‘๋…„ 4์›”์— ์—…๋ฐ์ดํŠธ๋ฅผ ํ•˜๋ฉฐ ๋ฒ„๊ทธ ์Š›ํŒ…์„ ํ–ˆ์—ˆ๋˜ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฑธ ๋ชจ๋ฅด๊ณ  ์ž‘๋…„ 3์›” ๋ฒ„์ „์œผ๋กœ ๊ณ„์† ์‚ฌ์šฉํ•˜๋‹ค ๋ณด๋‹ˆ ๋ฒ„๊ทธ๋ฅผ ๋ฐฉ์น˜ํ•˜๊ณ  ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์Šคํ‚จ์„ ์—…๋ฐ์ดํŠธํ•˜๋ฉด ๋˜๋Š”๋ฐ.. ๊ธฐ์กด์— ์ˆ˜์ •ํ–ˆ๋˜ ๋‚ด์šฉ๋“ค์„ ๋‹ค์‹œ ๊ธฐ์–ตํ•ด์„œ ์ผ์ผ์ด ์ ์šฉํ•ด ์ค˜์•ผ ํ•˜๋‹ˆ.. ์—…๋ฐ์ดํŠธ ๋ฐฉ๋ฒ•๋ณด๋‹ค๋Š” ๋ฒ„๊ทธ๋ฅผ ์žก๋Š” ํŽธ์ด ๋‚ซ๊ฒ ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฏธ ์ƒˆ ์™“์—๋ฒ„ ์Šคํ‚จ์„ ์‚ฌ์šฉํ•˜๋Š” ๋ถ„๋“ค์€ ํ•ด๋‹น ๋ฌธ์ œ๊ฐ€ ์—†์„ ์ˆ˜๋„ ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. 

์˜ค๋Š˜ ์ˆ˜์ •ํ•œ ๋ฒ„๊ทธ๋Š” ์นดํ…Œ๊ณ ๋ฆฌ ํด๋ฆญํ–ˆ์„ ๋•Œ ๋ฆฌ์ŠคํŠธํ˜•๊ณผ ์ธ๋„ค์ผํ˜•์„ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ.. ์ธ๋„ค์ผํ˜•์ผ ๋•Œ ๋ฐฐ์—ด์ด ํ‹€๋ ค์ง€๋Š” ๋ถ€๋ถ„์ด ์žˆ์Šต๋‹ˆ๋‹ค. pc, ๋ชจ๋ฐ”์ผ ๋‘˜ ๋‹ค ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๊ณ  ์žˆ๋Š”๋ฐ.. ๋‹ค์Œ ๋‘ ๋ถ€๋ถ„์„ ์ฝ”๋ฉ˜ํŠธ (/* ... */ ์ฒจ๊ฐ€) ์ฒ˜๋ฆฌํ•˜๋‹ˆ ํ•ด๊ฒฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. 

PC์—์„œ ์นดํ…Œ๊ณ ๋ฆฌ ์ธ๋„ค์ผํ˜• ๋ณด๊ธฐ์ผ ๋•Œ ๋ฒ„๊ทธ ์ŠˆํŒ… ๋ฐฉ๋ฒ•

๋ชจ๋ฐ”์ผ ๋ถ€๋ถ„์€ ๋‹ค์Œ ๋ถ€๋ถ„์„ ์ฝ”๋ฉ˜ํŠธ ์ฒ˜๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค. 

๋ชจ๋ฐ”์ผ์—์„œ ์นดํ…Œ๊ณ ๋ฆฌ ์ธ๋„ค์ผํ˜• ๋ณด๊ธฐ์ผ ๋•Œ ๋ฒ„๊ทธ ์ŠˆํŒ… ๋ฐฉ๋ฒ•

๋ผ์ธ ์ˆซ์ž๋Š” ์‚ฌ๋žŒ๋งˆ๋‹ค ๋‹ค๋ฅผ ์ˆ˜ ์žˆ์œผ๋‹ˆ last-child๋กœ ๊ฒ€์ƒ‰ํ•˜์‹œ๊ณ ์š”.. ๋‘ ๋ถ€๋ถ„ ๋ชจ๋‘ .post-item ํด๋ž˜์Šค์—์„œ last-child ๊ด€๋ จ๋œ ๋ถ€๋ถ„์ธ๋ฐ ์™œ ์ €๋ ‡๊ฒŒ ๋“ค์–ด๊ฐ€ ์žˆ๋Š”์ง€ ๋ชจ๋ฅด์ง€๋งŒ ํฌ์ŠคํŠธ ์ธ๋„ค์ผ ๋ฐฐ์—ด์„ ๋’คํ‹€๋ฆฌ๊ฒŒ ํ•˜๋Š” ์›์ธ์œผ๋กœ ๋ณด์ž…๋‹ˆ๋‹ค.

์นดํ…Œ๊ณ ๋ฆฌ๊ธ€ ๋”๋ณด๊ธฐ ์ œ๋ชฉ ํ•œ์ค„ ํ‘œ์‹œ ๊ธฐ๋Šฅ ์ถ”๊ฐ€

๊ทธ ๋ฐ–์— ์œ ์šฉํ•œ ๊ธฐ๋Šฅ์œผ๋กœ ์ถ”๊ฐ€ํ•œ ๊ฒƒ์„ ๊ณต๊ฐœํ•ด ๋ณด๋ฉด.. ์œ„์— ์ž‘์—…ํ•œ ์นดํ…Œ๊ณ ๋ฆฌ๊ธ€ ๋”๋ณด๊ธฐ (another_category) ํ”Œ๋Ÿฌ๊ทธ์ธ์—์„œ ์ œ๋ชฉ์„ Full๋กœ ๋…ธ์ถœํ•˜๋Š”๋ฐ pc์—์„œ๋Š” ๋ฌธ์ œ๊ฐ€ ์—†์ง€๋งŒ ๋ชจ๋ฐ”์ผ์—์„œ๋Š” ์ค„์ด ๊ธธ์–ด์ ธ ๊น”๋”ํ•˜์ง€ ์•Š์€ ๋ถ€๋ถ„์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์„ ๋‹ค๋ฅธ ๊ณณ์—์„œ ์ฒ˜๋Ÿผ ์ ๋‹นํ•œ ๊ธธ์ด๋กœ ์ž˜๋ผ ํ•œ์ค„๋งŒ ํ‘œ์‹œํ•ด ์ฃผ๋Š” ๋ถ€๋ถ„์„ ์ฒจ๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜ ๋ถ€๋ถ„์„ ์ฒจ๊ฐ€ํ•˜๋ฉด ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค.

	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;	

์ด๋ ‡๊ฒŒ ํ•˜๋‹ˆ ๊ธ€ 8๊ฐœ๋ฅผ ๋…ธ์ถœํ•ด๋„ ๊น”๋”ํ•˜๊ฒŒ ํ‘œ์‹œ๋˜๋”๋ผ๊ตฌ์š”. ์นดํ…Œ๊ณ ๋ฆฌ๊ธ€ ๋”๋ณด๊ธฐ ์ œ๋ชฉ ๋ถ€๋ถ„๋„ ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ css๋งจ ๋งˆ์ง€๋ง‰์— ์ถ”๊ฐ€ํ•ด์„œ ์กฐ๊ธˆ ๋” ๊ฐ•์กฐํ•ด ๋ดค์Šต๋‹ˆ๋‹ค.

.color-dark .another_category h4 {color: #bbbbbb !important; font-size: 1em !important;}
.color-dark .another_category h4 a {color: white !important;}
.tt_adsense_bottom{overflow:hidden}

๋งจ ๋งˆ์ง€๋ง‰ ์ค„์€ ์• ๋“œ์„ผ์Šค ๋•Œ๋ฌธ์— ์ผ๋ถ€ ๋งํฌ๊ฐ€ ๋™์ž‘ํ•˜์ง€ ์•Š๋Š” ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜๋Š” ์ด๋ ‡๊ฒŒ ์ž‘์—…ํ–ˆ์„ ๋•Œ ๋ชจ๋ฐ”์ผ์—์„œ ํ‘œ์‹œ๋˜๋Š” ์นดํ…Œ๊ณ ๋ฆฌ๊ธ€ ๋”๋ณด๊ธฐ ๋ฐ•์Šค ๋ชจ์Šต๋‹ˆ๋‹ค.

๋ชจ๋ฐ”์ผ์—์„œ ์นดํ…Œ๊ณ ๋ฆฌ๊ธ€ ๋”๋ณด๊ธฐ ๋ฐ•์Šค ๋ชจ์Šต

์ƒ๋‹นํžˆ ๊น”๋”ํ•ด ์ง„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์กฐ๊ธˆ์ด๋‚˜๋งˆ ์ดํƒˆ๋ฅ  ๊ฐ์†Œ์— ๋„์›€์ด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์™“์—๋ฒ„ ์Šคํ‚จ์ด ๋‚˜๋ฆ„ ๊น”๋”ํ•˜๊ณ  ๋ฉ‹์žˆ๋Š”๋ฐ ์ดˆ๊ธฐ ๋ฒ„์ ผ์— ์—ฌ๋Ÿฌ ๋ฒ„๊ทธ๊ฐ€ ์žˆ์—ˆ๋˜ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์•„์ง๋„ ์ดˆ๊ธฐ ๋ฒ„์ ผ ์“ฐ๊ณ  ๊ณ„์‹  ๋ถ„๋“ค์€ ์ฐธ๊ณ ํ•˜์‹œ๋ฉด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ ๋ชจ๋‘ ์ฆ๊ฑฐ์šด ํ‹ฐ์Šคํ† ๋ฆฌ ์ƒํ™œ ๋˜์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

(์ถ”๊ฐ€) ํŒŒ์ผ ๋‹ค์šด๋กœ๋“œ ๋ถ€๋ถ„๋„ ํŒŒ์ผ์ด๋ฆ„์ด ์–ด๋‘ก๊ฒŒ ์ฒ˜๋ฆฌ๋˜์–ด css ๋งจ ๋งˆ์ง€๋ง‰์— ๋‹ค์Œ์„ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค. 

.color-dark figure .name {color: #bbbbbb;}

๊ทธ๋ฆฌ๊ณ  ์ฝ”๋“œ๋ธ”๋Ÿญ์ด ๋‹คํฌ๋ชจ๋“œ์—์„œ ์ž˜ ํ‘œ์‹œ๊ฐ€ ์•ˆ๋˜์„œ ์ด์œ ๋ฅผ ์•Œ์•„๋ณด๋‹ˆ ์ฝ”๋“œ ๋ฌธ๋ฒ• ๊ฐ•์กฐ (Syntax Highlight) ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์ถ”๊ฐ€ํ•ด์•ผ ํ•˜๋”๋ผ๊ตฌ์š”. Atom One Dark ํ…Œ๋งˆ๋ฅผ ์„ ํƒํ•˜๋‹ˆ ๊น”๋”ํ•ด ๋ณด์ด๋„ค์š”.

๊ทธ๋™์•ˆ ๋‹คํฌ๋ชจ๋“œ ๋ฒ„๊ทธ ๊ด€๋ จํ•ด์„œ css ํŒŒ์ผ์— ์ถ”๊ฐ€ํ•œ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

.color-dark .postbtn_like, .txt_state{color:white}
.color-dark figcaption {color:gray !important}
.color-dark .og-title{color: #d4bca7 !important;}
.color-dark .comments .comment-list ul li p {color: #848484;}
.color-dark .comments .comment-list ul li ul {border-top: 1px solid #222;}
.tt_adsense_bottom{overflow:hidden}
.color-dark .another_category th a {color: #bbbbbb !important;}
.color-dark .another_category th a:hover {color: #d4bca7 !important;}
.color-dark .another_category h4 {color: #bbbbbb !important; font-size: 1em !important;}
.color-dark .another_category h4 a {color: white !important;}
.color-dark figure .name {color: #bbbbbb;}
pre code { margin-bottom: 20px;}

๊ทธ๋Ÿผ ์ฆ๊ฑฐ์šด ๋‹คํฌ๋ชจ๋“œ ํ‹ฐ์Šคํ† ๋ฆฌ ์ƒํ™œ๋˜์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

(์ถ”๊ฐ€ 2020/7/20) ์œ„ ๋ฆฌ์ŠคํŠธ์— ๋งจ ๋งˆ์ง€๋ง‰ ๋ผ์ธ๋„ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ฝ”๋“œ ๋ธ”๋Ÿญ ๋ฐ‘ ์ชฝ์— ์—ฌ๋ฐฑ ํ™•๋ณดํ•˜๋Š” ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค.

๊ทธ๋ฆฌ๋“œํ˜•(๊ด‘๊ณ ์ „์šฉ)

'Solve > ํ‹ฐ์Šคํ† ๋ฆฌ-์œ ํŠœ๋ธŒ' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌ Whatever ์Šคํ‚จ ๊ณต์ง€์‚ฌํ•ญ/๋ฐฉ๋ช…๋ก ๋ฒ„๊ทธ ์žก๊ธฐ - ๋‹คํฌ๋ชจ๋“œ ์ตœ์ ํ™” 4ํƒ„  (0) 2020.07.18
ํ‹ฐ์Šคํ† ๋ฆฌ ๊ตฌ๊ธ€์„œ์น˜์ฝ˜์†” 'ํด๋ฆญํ•  ์ˆ˜ ์žˆ๋Š” ์š”์†Œ๊ฐ€ ์„œ๋กœ ๋„ˆ๋ฌด ๊ฐ€๊นŒ์›€' ์˜ค๋ฅ˜ ํ•ด๊ฒฐ๋ฒ•  (2) 2020.07.06
ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ ๋„ค์ด๋ฒ„ ๋…ธ์ถœ ๋ฐ˜ํ† ๋ง‰ ์‚ฌ๊ฑด - ๊ตฌ๊ธ€/๋„ค์ด๋ฒ„/๋‹ค์Œ ๊ฒ€์ƒ‰ ์œ ์ž… ๋น„๊ต - ๋ทฐํƒญ ๋…ธ์ถœ  (10) 2020.07.05
ํ‹ฐ์Šคํ† ๋ฆฌ ์™“์—๋ฒ„ ์Šคํ‚จ ๋‹คํฌ๋ชจ๋“œ ์šฐ์™•์ขŒ์™• ์—…๊ทธ๋ ˆ์ด๋“œ 3ํƒ„ - ๋ชจ๋ฐ”์ผ ์ขŒ์šฐ์Šคํฌ๋กค ํ’€๋ฆผ ์šฐ์ธก๊ณต๋ฐฑ ๋ฌธ์ œ  (0) 2020.07.01
๊น€์„ ์ƒ FixnSolve ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ ๋‹คํฌ๋ชจ๋“œ ์ถœ์‹œ~ ๋˜ํ•˜๋‚˜์˜ ์—๋„ˆ์ง€ ์ ˆ์•ฝ ์•„์ดํ…œ  (10) 2020.06.09
ํ‹ฐ์Šคํ† ๋ฆฌ ์˜ฌ๋ฆฐ ๊ธ€ ๊ตฌ๊ธ€ ๋””์Šค์ปค๋ฒ„ (ํฌ๋กฌ ์ถ”์ฒœ ๊ธฐ์‚ฌ) ๋ฉ”์ธ ๋…ธ์ถœ ๋์–ด์š”~  (4) 2020.05.13
ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ ๋‹ค์Œ ๊ฒ€์ƒ‰ ์œ ์ž… ๋ฌธ์ œ ์žˆ์„ ๋•Œ ํ•ด๊ฒฐ๋ฒ• - ์ €ํ’ˆ์งˆ ํƒˆ์ถœ?  (5) 2020.02.03
๋‹๋ณด๊ธฐ๊น€์„ ์ƒ ์œ ํŠœ๋ธŒ 1๋…„ ๊ฒฐ์‚ฐ - ์กฐํšŒ์ˆ˜ 30๋งŒ ๊ตฌ๋…์ž 800๋ช… ๋ธ”๋กœ๊ทธ ์• ๋“œ์„ผ์Šค ์ˆ˜์ต๋‚ด๊ธฐ  (0) 2020.01.18