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



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

ํ‹ฐ์Šคํ† ๋ฆฌ ์™“์—๋ฒ„ Whatever ์Šคํ‚จ ์˜ค๋ฅธ์ชฝ ์‚ฌ์ด๋“œ๋ฐ” ๊ตฌํ˜„

728x90

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

์–ด๋–ป๊ฒŒ ํ•˜๋ฉด ์ดํƒˆ๋ฅ ์„ ์ค„์—ฌ ๋ณผ ์ˆ˜ ์žˆ์„๊นŒ ๊ณ ๋ฏผํ•˜๋‹ค๊ฐ€.. ์ตœ๊ทผ ๋‹คํฌ๋ชจ๋“œ ์—…๊ทธ๋ ˆ์ด๋“œ๊ฐ€ ๋๋‚œ ์™“์—๋ฒ„ ์Šคํ‚จ์˜ ์‚ฌ์ด๋“œ๋ฐ”๋ฅผ ๋ณธ๋ฌธ ์˜ค๋ฅธ์ชฝ ์˜†์— ์œ„์น˜์‹œํ‚ค๊ธฐ๋กœ ๊ฒฐ์‹ฌํ•˜๊ณ  ํ”„๋กœ์ ํŠธ๋ฅผ ์ˆ˜ํ–‰ํ•ด ๋ดค์Šต๋‹ˆ๋‹ค. ๊ฐ„๋‹จํ•˜๊ฒŒ๋Š” ์‚ฌ์ด๋“œ๋ฐ”๊ฐ€ ์žˆ๋Š” ์Šคํ‚จ (์˜ˆ, ๋ถํด๋Ÿฝ ๋“ฑ)์œผ๋กœ ๋ฐ”๊พธ๋ฉด ๋˜๊ฒ ์ง€๋งŒ.. ๋‹คํฌ๋ชจ๋“œ ์—…๊ทธ๋ ˆ์ด๋“œํ•œ ๊ฒƒ์ด ์•„๊นŒ์›Œ์„œ ์™“์—๋ฒ„ ์Šคํ‚จ์„ ๋ณ€๊ฒฝ์‹œํ‚ค๋Š” ์ชฝ์œผ๋กœ ๋ฐฉํ–ฅ์„ ์žก์•˜์Šต๋‹ˆ๋‹ค. ์ตœ๊ทผ css ์‹ค๋ ฅ์ด ๋ถ€์ฉ ๋Š˜์—ˆ์œผ๋‚˜ ์ „ํ˜€ ๋ชจ๋ฅด๋Š” ๋ ˆ์ด์•„์›ƒ์„ ๊ฑด๋“ค๋ ค๊ณ  ํ•˜๋‹ˆ ๊ฝค ์‹œํ–‰์ฐฉ์˜ค๋ฅผ ๊ฒช์—ˆ์Šต๋‹ˆ๋‹ค. ์ตœ์ข…์ ์œผ๋กœ ๋งŒ์กฑ์Šค๋Ÿฝ๊ฒŒ ์‚ฌ์ด๋“œ๋ฐ”๋ฅผ ๋ณธ๋ฌธ ์˜ค๋ฅธ์ชฝ์— ๋ฐฐ์น˜ํ•˜๋Š”๋ฐ ์„ฑ๊ณตํ–ˆ์Šต๋‹ˆ๋‹ค. '์ฐ' ์‚ฌ์ด๋“œ๋ฐ”๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ์ฃ .

์‚ฌ์ด๋“œ๋ฐ” ์žฌ๋ฐฐ์น˜์— ์„ฑ๊ณตํ•œ ์™“์—๋ฒ„ ์Šคํ‚จ ๋‹คํฌ๋ชจ๋“œ ๋ชจ์Šต

ํ”„๋กœ์ ํŠธ์—์„œ ํ•ต์‹ฌ ๋””์ž์ธ์€ ๋ณธ๋ฌธ, ๋ฐฉ๋ช…๋ก, ํƒœ๊ทธ, ์นดํ…Œ๊ณ ๋ฆฌ ๋“ฑ์—๋Š” ์˜ค๋ฅธ์ชฝ์— ์‚ฌ์ด๋“œ๋ฐ”๋ฅผ ๋ฐฐ์น˜ํ•˜๊ณ  ํ™ˆ์—๋Š” ๊ธฐ์กด์ฒ˜๋Ÿผ ์•„๋ž˜์ชฝ์— ์‚ฌ์ด๋“œ๋ฐ”๋ฅผ ๋ฐฐ์น˜ํ•˜๋Š” ๊ฒƒ์ด์—ˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒŒ ์˜์™ธ๋กœ ์–ด๋ ค์šด๋ฐ ๊ฒฐ๊ตญ html ํŽธ์ง‘์—์„œ ๊ฐ ๋ชจ๋“ˆ์˜ ์œ„์น˜๋ฅผ ์•„๋ž˜ html ์ฝ”๋“œ์ฒ˜๋Ÿผ ์žฌ๋ฐฐ์น˜ ์‹œ์ผœ์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์ด๋“œ๋ฐ” (#aside) ๋‚ด์šฉ๋“ค์„ ๋ณธ๋ฌธ (#content .inner) ์•ˆ์œผ๋กœ ์ง‘์–ด ๋„ฃ๊ณ  ํ•˜๋Š” ๊ณผ์ •์ด๊ณ , ๋˜ ๋ณธ๋ฌธ article ์˜์—ญ์„ cover์™€ inner๋กœ ๋ถ„๋ฆฌํ•˜๊ณ , inner๋Š” ๋Œ€๋ถ€๋ถ„ ์ฝ˜ํ…์ธ ๋ฅผ ํฌํ•จํ•œ ์ขŒ์ธก main-body์™€ ์šฐ์ธก ์‚ฌ์ด๋“œ๋ฐ” aside๋กœ ๊ตฌ๋ถ„๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. main-body๋Š” ์ƒˆ๋กœ ์ •์˜ํ•ด ์ค€ class์ž…๋‹ˆ๋‹ค. ๋Œ€๋žต ์ด ๋ฐฉ๋ฒ•์œผ๋กœ ๋น„๊ต์  ๊ฐ„๋‹จํ•˜๊ฒŒ (์ฝ”๋“œ๋ฅผ ์ƒ๋Œ€์ ์œผ๋กœ ๋งŽ์ด ์ˆ˜์ •ํ•˜์ง€ ์•Š๊ณ ) ์šฐ์ธก ์‚ฌ์ด๋“œ๋ฐ” ๊ตฌํ˜„์— ์„ฑ๊ณตํ–ˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ €๋„ css ์ดˆ๋ณด๋กœ ๋ฐฐ์šฐ๋Š” ์ž…์žฅ์ด์–ด์„œ ์•„์ง ์™„๋ฒฝํ•˜์ง€ ์•Š์€ ๋ถ€๋ถ„์ด ๊ณณ๊ณณ์— ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

๋จผ์ € html ๋ณ€๊ฒฝ ๋ถ€๋ถ„์€ ์•ž์„œ ์„ค๋ช…ํ•œ ๊ฒƒ์ฒ˜๋Ÿผ ์•„๋ž˜ ๊ตฌ์กฐ๋กœ ๋ณธ๋ฌธ์„ ๋ณ€๊ฒฝํ–ˆ์Šต๋‹ˆ๋‹ค. 

<section class="container">
	<article id="content">
		<s_cover_group>
           		.
           		.	<! ์ปค๋ฒ„๋“ค์„ ์—ฌ๊ธฐ์— ์œ„์น˜์‹œํ‚ด >
           		.
		</s_cover_group>
        
		<div class="inner">
			<div class="main-body">
				<s_page_rep>
                
				</s_page_rep>
				<s_notice_rep>
                
				</s_notice_rep>
         
 	          		.
 	          		.   <! ๊ธฐํƒ€ ํƒœ๊ทธ, ๋ฐฉ๋ช…๋ก ๋“ฑ์„ ์—ฌ๊ธฐ์— ์œ„์น˜์‹œํ‚ด >
 	          		.
           
				<s_article_rep>
                
				</s_article_rep>
                
				<s_paging>
                
				</s_paging>
			</div>
								
			<aside id="aside">
			  <!div class="inner">	<! ์ฝ”๋ฉ˜ํŠธ ์ฒ˜๋ฆฌํ•ด์•ผ ํ•จ >
				<div class="sidebar-1">
                
	 	                .
		                .	<! ์‚ฌ์ด๋“œ๋ฐ”๋“ค์„ ์—ฌ๊ธฐ์— ์œ„์น˜์‹œํ‚ด >
		                .

				</div>
			  <!/div>
			</aside>					
		</div>
	</article>	
</section>

๋‹ค์Œ์€ pc ํ™”๋ฉด์—์„œ ํ™”๋ฉด ๋ถ„ํ• ํ•˜๋Š” css ์ฝ”๋“œ ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„ ๊ธฐ์กด์— ์žˆ๋˜ ์ฝ”๋“œ๋ฅผ ์‚ด์ง์”ฉ ์ˆ˜์ •ํ–ˆ๊ณ , .main-body ๋ถ€๋ถ„์€ ์ƒˆ๋กœ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.

#content .inner {
	overflow: hidden;
	max-width: 1200px;
	margin: 0 auto;
}
#content .main-body {
	overflow: hidden;
	max-width: 860px;
	width: 69%;
	margin: 0 auto;
	float: left;
}
#aside {
	margin-top:100px;
	padding:36px 0 80px;
	border-top: 1px solid #e6e6e6;
}
#aside .inner {
	overflow:hidden;
	max-width: 1200px;
	margin: 0 auto;
}
#aside h2 {
	margin-bottom: 7px;
	font-size:1em;
	color:#666;
}
#aside .sidebar-1 {
	float: left;
	width: 31%;
	min-height: 10px;
	padding-left: 70px;
	box-sizing: border-box;
}
#aside .sidebar-2 {
	float: left;
	width: 31%;
	min-height: 10px;
	padding-left: 70px;
	box-sizing: border-box;
}
#aside .sidebar-3 {
	float: left;
	width: 31%;
	min-height: 10px;
	padding-left: 70px;
	box-sizing: border-box;
}

๋ฏธ๋””์–ด ์Šคํฌ๋ฆฐ - ํƒœ๋ธ”๋ฆฟ ํ™”๋ฉด์—์„œ ๋‹ค์Œ css ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.

	#content .main-body {
	width: auto;
	float: none;
	padding: 0;
	}

๊ธฐํƒ€ ์ทจํ–ฅ์— ๋งž๊ฒŒ ์—ฌ๊ธฐ ์ €๊ธฐ ๊ณต๋ฐฑ, ์—ฌ๋ฐฑ, ํผ์„ผํ‹ฐ์ง€ ์ˆซ์ž๋“ค์„ ์กฐ์ ˆํ•ด ์ฃผ๋ฉด ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค. 

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

(์ถ”๊ฐ€ 2020/8/4) html ์ฝ”๋“œ ๋ถ€๋ถ„ ์„ค๋ช…์„ ์ข€ ๋” ๋ณด์™„ํ•ด ๋ดค์Šต๋‹ˆ๋‹ค. ๋ณธ๋ฌธ์˜ html ๊ตฌ์กฐ๋ฅผ ์˜ˆ์‹œ๋œ ๋ชจ์–‘์œผ๋กœ ๋ณ€๊ฒฝํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ํŠนํžˆ ์‚ฌ์ด๋“œ๋ฐ”์˜ #aside .inner class๋ฅผ ์˜ˆ์‹œ์ฒ˜๋Ÿผ ์ฝ”๋ฉ˜ํŠธ(!) ์ฒ˜๋ฆฌํ•˜๊ฑฐ๋‚˜ dummy๋กœ ๋งŒ๋“ค์–ด ์ฃผ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋Œ€๋žต ์ด์ •๋„๋ฉด ์ดˆ๋ณด์ž๋„ ์‰ฝ๊ฒŒ ๋”ฐ๋ผํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

(์ถ”๊ฐ€ 2020/8/18) ์™“์—๋ฒ„ ์Šคํ‚จ ์˜ค๋ฅธ์ชฝ์— '์ฐ' ์‚ฌ์ด๋“œ๋ฐ”๋ฅผ ๋ฐฐ์น˜ํ•˜๊ณ  ์ดํƒˆ๋ฅ  ๊ฐ์†Œ๋‚˜ ์ˆ˜์ต ์ฆ๊ฐ€๋ฅผ ๊ธฐ๋Œ€ํ–ˆ์ง€๋งŒ ์ƒ๊ฐ๋ณด๋‹ค ๋šœ๋ ทํ•œ ๋ณ€ํ™”๊ฐ€ ๋Š๊ปด์ง€์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์•„๋ฌด๋ž˜๋„ ๋ธ”๋กœ๊ทธ ๊ธ€์— ๋Œ€ํ•œ ์ง‘์ค‘๋„๊ฐ€ ๋” ๋–จ์–ด์ง€๋Š” ๊ฒƒ์ด ์•„๋‹Œ๊ฐ€ ์—ฌ๊ฒจ์ง‘๋‹ˆ๋‹ค. ๋‹ค์‹œ ์›๋ž˜ ์ƒํƒœ๋กœ ๋˜๋Œ๋ฆฌ๊ธฐ ์œ„ํ•ด์„œ๋Š” ์•„๋ž˜์ฒ˜๋Ÿผ main-body ํด๋ž˜์Šค์—์„œ width์™€ float๋งŒ ์ˆ˜์ •ํ•ด ์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค. 

#content .main-body {
	overflow: hidden;
	max-width: 860px;
	width: 100%;
	margin: 0 auto;
	float: none;
}

๋ฐฉ๋ฌธ์ž ์ƒํ™ฉ ๋ด๊ฐ€๋ฉด์„œ ์–ด๋Š ๊ฒƒ์ด ๋” ์ด๋กœ์šด์ง€ ์ด๊ฒƒ ์ €๊ฒƒ ์‹คํ—˜ํ•ด ๋ด์•ผ ํ•  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ผ๋‹จ ์ €๋Š” ์›์ƒ๋ณต๊ตฌํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

(์ถ”๊ฐ€ 2020/9/1) ์•„๋ž˜ ๋Œ“๊ธ€๋กœ ์™“์—๋ฒ„ ์Šคํ‚จ์—์„œ ์ž˜ ๊ตฌํ˜„์ด ์•ˆ๋œ๋‹ค๊ณ  ํ•˜์…”์„œ.. ๋‹ค๋ฅธ ๋ธ”๋กœ๊ทธ์—์„œ ์™“์—๋ฒ„ ์ตœ์‹  ๋ฒ„์ „์œผ๋กœ ์—ฐ์Šต์„ ํ•ด ๋ดค๋Š”๋ฐ ์—ญ์‹œ ์ž˜ ๋ฉ๋‹ˆ๋‹ค. ์™“์—๋ฒ„ ์Šคํ‚จ ๋ฒ„์ ผ ๋ฌธ์ œ๋Š” ์—†์—ˆ์Šต๋‹ˆ๋‹ค. ์ตœ์‹  ์Šคํ‚จ html ํŽธ์ง‘์—์„œ ๋‹ค์Œ ๊ณผ์ •์ด ํ•„์š”ํ–ˆ์Šต๋‹ˆ๋‹ค.

1. html ํŽธ์ง‘์—์„œ #content .inner ํด๋ž˜์Šค๋ฅผ ์ปค๋ฒ„ ๊ทธ๋ฃน ์ œ์™ธํ•˜๊ณ  ๋‚˜๋จธ์ง€๋ฅผ ๋‹ค ํฌํ•จํ•˜๋„๋ก <div> ... </div>๋ฅผ ์œ„์น˜์‹œํ‚ต๋‹ˆ๋‹ค.

2. ์ค‘๊ฐ„์— (#aside ์‚ฌ์ด๋“œ๋ฐ” ์œ„์—) ์œ„์น˜ํ•œ </article>๋ฅผ ๋งจ ๋งˆ์ง€๋ง‰์œผ๋กœ ์˜ฎ๊น๋‹ˆ๋‹ค.

3. #content .main-body ํด๋ž˜์Šค๋ฅผ #aside ์• ๋“ค๋งŒ ์ œ์™ธํ•˜๊ณ  ๋‹ค ํฌํ•จํ•˜๋„๋ก ์ƒˆ๋กœ <div> ... </div> ์ถ”๊ฐ€ํ•ด ์ค๋‹ˆ๋‹ค.

4. #aside .inner ํด๋ž˜์Šค๋ฅผ <!div> ... <!/div> ์ฝ”๋ฉ˜ํŠธ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

5. css ํŽธ์ง‘์„ ์œ„์˜ ์˜ˆ์‹œ์ฒ˜๋Ÿผ ๋ฐ”๊ฟ‰๋‹ˆ๋‹ค.

6. ์Šคํ‚จํŽธ์ง‘์—์„œ ์ปค๋ฒ„๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. (์ตœ์ดˆ ์ตœ์‹ ๊ธ€ ์ผ ๋•Œ๋Š” ๋™์ž‘ํ•˜์ง€ ์•Š๋”๋ผ๊ตฌ์š”)

์‚ฌ์ด๋“œ๋ฐ” ๊ตฌํ˜„ ๋„์ „ํ•ด ๋ณด์‹œ๋Š” ๋ถ„๋“ค ๊ผญ ์„ฑ๊ณตํ•˜์‹œ๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค. ์ œ๊ฐ€ ์–ด๋–ป๊ฒŒ ๋” ๋„์™€์ค„ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์€ ์—†๋„ค์š”.

(์ถ”๊ฐ€ 2020/9/13) ์™“์—๋ฒ„ ์Šคํ‚จ ์˜ค๋ฅธ์ชฝ ์‚ฌ์ด๋“œ๋ฐ”๋กœ ์˜ฎ๊ธฐ๋Š” ๊ฑธ ์œ„์˜ ๊ธ€๋กœ๋œ ์„ค๋ช…๋งŒ ๋ด์„œ ์–ด๋ ต๋‹ค๊ณ  ํ•˜์‹œ๋Š” ๋ถ„๋“ค์ด ์žˆ์–ด์„œ, ์•„๋ž˜ ๋™์˜์ƒ์—์„œ ์ง์ ‘ ์‹œ์—ฐ์„ ํ•˜๋ฉฐ ์„ค๋ช…ํ•ด ๋ดค์Šต๋‹ˆ๋‹ค. ๋™์˜์ƒ ๋ณด๊ณ  ๋”ฐ๋ผํ•˜๋ฉด ๋Œ€๋ถ€๋ถ„ ์„ฑ๊ณตํ•˜์‹ค ๊ฑธ๋กœ ์ƒ๊ฐ๋ฉ๋‹ˆ๋‹ค. ๋‚˜๋จธ์ง€ ๊พธ๋ฏธ๋Š” ๋ถ€๋ถ„์€ ๊ฐ์ž ์ทจํ–ฅ์— ๋งž๊ฒŒ ํ•˜์‹œ๋ฉด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. youtu.be/mdl-XFEuQ-Q

์™“์—๋ฒ„ ์Šคํ‚จ ์‚ฌ์ด๋“œ๋ฐ” ๋งŒ๋“ค๊ธฐ ๋™์˜์ƒ ์‹œ์—ฐ

(์ถ”๊ฐ€ 2020/9/21) ์ž.. ์ด๋ ‡๊ฒŒ ํ•ด๋„ ์–ด๋ ค์›Œ ํ•˜์‹œ๋Š” ๋ถ„๋“ค์„ ์œ„ํ•ด ์ด๋ฒˆ์—๋Š” ๊ฐ„๋‹จํ•œ ๋ณ€ํ˜• ์Šคํ‚จ์„ ๋ฐฐํฌํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๊ณต๋ถ€ํ•ด ๋ดค์Šต๋‹ˆ๋‹ค. ํ•˜๋‹คํ•˜๋‹ค ์ด์ œ ์Šคํ‚จ๊นŒ์ง€ ๋ฐฐํฌํ•˜๊ฒŒ ๋˜์—ˆ๋„ค์š” ใ…‹ใ…‹ ํ‹ฐ์Šคํ† ๋ฆฌ ์™“์—๋ฒ„ ์Šคํ‚จ์—์„œ ์‚ฌ์ด๋“œ๋ฐ” "์˜ค๋ฅธ์ชฝ" ๋…ธ์ถœ์„ ์œ„ํ•œ ๋ณ€ํ˜• ๋ฒ„์ ผ์ด๊ณ ์š”.. ๊ทธ๋ž˜์„œ ์ด๋ฆ„์„ Whatever-Side 1.0์œผ๋กœ ๋ถ™์˜€์Šต๋‹ˆ๋‹ค. ์•„๋ž˜ ์Šคํ‚จ์„ ๋‹ค์šด ๋ฐ›์œผ์…”์„œ ์ ์šฉํ•˜์‹œ๋ฉด ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์Šคํ‚จ์„ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋‹ค๋ฅธ ์œ /๋ฌด๋ฃŒ ์Šคํ‚จ ๋‹ค์šด๋ฐ›์•„ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ ๋˜‘๊ฐ™์Šต๋‹ˆ๋‹ค. ์Šคํ‚จ๋ณ€๊ฒฝ/์Šคํ‚จ๋“ฑ๋ก/์ ์šฉ ์ˆœ์„œ๋ฅผ ๋”ฐ๋ผํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์ฐธ๊ณ ๋กœ ๋ฉ”ํƒ€ํƒœ๊ทธ ํ”Œ๋Ÿฌ๊ทธ์ธ๊ณผ ๊ตฌ๊ธ€์„œ์น˜์ฝ˜์†” ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•˜๋ฉด ์Šคํ‚จ๋ณ€๊ฒฝ์‹œ ๊ตฌ๊ธ€๊ณผ ๋„ค์ด๋ฒ„ ์‚ฌ์ดํŠธ ์ธ์ฆ ํƒœ๊ทธ๋ฅผ ๋ณต๋ถ™ํ•˜๋Š” ๋ฒˆ๊ฑฐ๋กœ์›€์„ ์ค„์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ธฐ๋ณธ์ ์œผ๋กœ ์ตœ์‹  Whatever ์Šคํ‚จ์— 1. ์‚ฌ์ด๋“œ๋ฐ” ์œ„์น˜ ์˜ค๋ฅธ์ชฝ ๋ณ€๊ฒฝ, 2. ์นดํ…Œ๊ณ ๋ฆฌ ์ถ”๊ฐ€, 3. ๋ฐฉ๋ช…๋ก ์ธ๋„ค์ผ ์ˆ˜์ •, 4. ๊ณต์ง€์‚ฌํ•ญ ์ €์ž ํ‘œ์‹œ, 5. ๋‹คํฌ๋ชจ๋“œ ๋งˆ์ด๋„ˆ ๋ฒ„๊ทธ ์ˆ˜์ • ๋“ฑ์„ ๋ฐ˜์˜ํ–ˆ๊ณ , ํ‘ธํ„ฐ์— ๋‹๋ณด๊ธฐ๊น€์„ ์ƒ ์‚ฌ์ดํŠธ ๋งํฌ ๊ฑธ์—ˆ์Šต๋‹ˆ๋‹ค. ์Šคํ‚จ ํŽธ์ง‘์˜ "๋ชฉ๋ก ๋”๋ณด๊ธฐ" ์˜ต์…˜์€ ์‚ฌ์šฉ ์•ˆํ•˜์‹œ๋Š” ๊ฒŒ ์ข‹์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ ์ž˜ ์“ฐ์‹œ๊ณ  ๋Œ“๊ธ€ ํ•˜๋‚˜ ๋‹ฌ์•„์ฃผ์‹œ๊ณ  ์œ ํŠœ๋ธŒ ๋™์˜์ƒ ํ•œ๋ฒˆ์”ฉ ๋ด์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

(์ถ”๊ฐ€ 2020/9/25) Whatever-Side 1.1 ์—์„œ๋Š” ๋ช‡๊ฐ€์ง€ ๋ฒ„๊ทธ๋ฅผ ์ˆ˜์ •ํ–ˆ๊ณ , ์ธ๊ธฐ ํฌ์ŠคํŠธ, ์ตœ์‹  ๋Œ“๊ธ€์„ ์‚ฌ์ด๋“œ๋ฐ”์— ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.

(์ถ”๊ฐ€ 2020/10/3) Whatever-Side 1.2 ์—์„œ๋Š” ์œ ์—ฐํ•œ  (Flexible) ์‚ฌ์ด๋“œ๋ฐ” ๊ตฌ์กฐ๋ฅผ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์ด๋“œ๋ฐ”1์€ ์˜ค๋ฅธ์ชฝ์— ์‚ฌ์ด๋“œ๋ฐ” 2-4๋Š” ๊ธฐ์กด Whatever ์Šคํ‚จ์ฒ˜๋Ÿผ ์•„๋ž˜์ชฝ์— ๋ฐฐ์น˜ํ•˜๋Š” ๊ตฌ์กฐ๋กœ ๋ณ€๊ฒฝํ–ˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜ ์˜ˆ์‹œ์ฒ˜๋Ÿผ ์‚ฌ์ด๋“œ๋ฐ”๋ฅผ ๋ฐฐ์น˜ํ•ด ๋ณด์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค. ๊ทธ๋ฐ–์— ์Šฌ๋ผ์ด๋“œ ์ž๋™๋„˜๊น€, ํƒœ๊ทธ ํด๋ผ์šฐ๋“œ ํ‘œ์‹œ, ๋‹คํฌ๋ชจ๋“œ ์ƒ‰๊น” ์กฐ์ • ๋“ฑ์„ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.

์‚ฌ์ด๋“œ๋ฐ” ๋ฐฐ์น˜ ๋ฐฉ๋ฒ• ์˜ˆ์‹œ

(2020/10/4) ๋งŒ์ผ ์‚ฌ์ด๋“œ๋ฐ”๋ฅผ ์™ผ์ชฝ์œผ๋กœ ์˜ฎ๊ธฐ๊ณ  ์‹ถ๋‹ค๋ฉด main-body์˜ float ๋ณ€์ˆ˜๋ฅผ left์—์„œ right๋กœ ๋ฐ”๊ฟ”์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  sidebar-1์˜ padding-left๋ฅผ padding-right์œผ๋กœ ๋ฐ”๊ฟ”์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

#content .main-body {
	overflow: hidden;
	max-width: 860px;
	width: 72%;
	margin: 0 auto;
	float: right;
}

#aside .sidebar-1 {
	float: left;
	width: 28%;
	min-height: 10px;
	padding-right: 36px;
	box-sizing: border-box;		
}

(์ถ”๊ฐ€ 2020/10/15) Whatever-Side 1.3 ์—์„œ๋Š” ์ถ”์ฒœ ํฌ์ŠคํŠธ๋ฅผ ์‚ฌ์ด๋“œ๋ฐ”์— ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ถ”์ฒœ ํฌ์ŠคํŠธ๋ฅผ ํŽธ์ง‘ํ•˜๋ ค๋ฉด "์Šคํ‚จ ํŽธ์ง‘/html ํŽธ์ง‘"์—์„œ ์•„๋ž˜ ๋ถ€๋ถ„์„ ์ฐพ์•„ ์ฃผ์†Œ(์ˆซ์ž)์™€ ์ œ๋ชฉ ๋ถ€๋ถ„์„ ์ˆ˜์ •ํ•˜๊ณ  ์›ํ•˜๋Š” ํฌ์ŠคํŠธ๋งŒํผ ์ถ”๊ฐ€ํ•ด ์ฃผ์‹œ๋ฉด ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค.

	<li><a href="/2">(์˜ˆ์‹œ) ๊ณผํ•™์ž์˜ ์—ฐ๊ตฌ์ฃผ๊ธฐ๋Š” ์–ผ๋งˆ๊ฐ€ ์ ๋‹นํ•œ๊ฐ€</a></li>

๊ธฐํƒ€ ๊ฐ€๋…์„ฑ์„ ๋†’์ด๊ธฐ ์œ„ํ•ด ๊ธ€์ž ํฌ๊ธฐ์™€ ์ค„๊ฐ„๊ฒฉ์„ ์กฐ์ •ํ–ˆ๊ณ  ํ•œ๊ธ€ํฐํŠธ๋ฅผ ๋‚˜๋ˆ”๊ณ ๋”•์œผ๋กœ ๋ณ€๊ฒฝํ–ˆ์Šต๋‹ˆ๋‹ค.

(์ถ”๊ฐ€ 2020/11/9) ๋ธ”๋กœ๊ทธ ์ •๋ณด๋ฅผ ์‚ฌ์ด๋“œ๋ฐ”์— ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฐ–์— ํ”„๋ฆฌ๋ทฐ ํŒŒ์ผ์ด ๊นจ์ง€๋Š” ๊ด€๊ณ„๋กœ ๋ชจ๋“  ํŒŒ์ผ์„ ์›๋ณตํ•ด ๋ดค์Šต๋‹ˆ๋‹ค.

(์ถ”๊ฐ€ 2022/8/24) &nbsp ๊ณต๋ฐฑ๋ฌธ์ž ๊ด€๋ จ ๋ณธ๋ฌธ์— ์—‘๋ฐ•์ด ๋œจ๋Š” ๋ฌธ์ œ ํ•ด๊ฒฐํ•ด์„œ ๋ฐ˜์˜ํ–ˆ์Šต๋‹ˆ๋‹ค. https://drkimfixnsolve.tistory.com/261 

(์ถ”๊ฐ€ 2023/1/21) "๋‚˜์˜ ๋งํฌ" ์น˜ํ™˜์ž๋ฅผ ์ด์šฉํ•ด ์‚ฌ์ด๋“œ๋ฐ”์— ์ถ”์ฒœ ๋งํฌ๋ฅผ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค. https://drkimfixnsolve.tistory.com/275 ์ฐธ๊ณ ํ•˜์‹œ๊ณ , ์•„๋ž˜ ์ตœ์‹  ๋ฒ„์ „ ๋‹ค์šด ๋ฐ›์œผ์„ธ์š”. 

Whatever-Side 1.5.zip
0.12MB

*์ฃผ์˜* ์Šคํ‚จ ํŽธ์ง‘์˜ "๋ชฉ๋ก ๋”๋ณด๊ธฐ" ๋น„ํ™œ์„ฑํ™”ํ•ด์•ผ ์ •์ƒ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. 

๋ฐ๋ชจ์‚ฌ์ดํŠธ๋Š” sciencediary.tistory.com ์ž…๋‹ˆ๋‹ค. ์‚ฌ์ด๋“œ๋ฐ” ์œ„์น˜๋ฅผ ์ทจํ–ฅ์— ๋”ฐ๋ผ ์กฐ์ •ํ•ด์„œ ์“ฐ์‹œ๊ณ , ๋„์›€์ด ๋˜์—ˆ๋‹ค๋ฉด ๋Œ“๊ธ€ ํ•˜๋‚˜ ํ˜น์€ ์œ ํŠœ๋ธŒ ๋™์˜์ƒ ํ•œ๋ฒˆ์”ฉ ๋ด์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

 

์‚ฌ์ด์–ธ์Šค ๋‹ค์ด์–ด๋ฆฌ

๋‚˜์˜ ๊ณผํ•™์ผ๊ธฐ์ด์ž ๊ณผํ•™์ฝ๊ธฐ. ๊ตญ๋‚ด์™ธ ๊ณผํ•™ ๋‰ด์Šค์— ์ˆจ์–ด ์žˆ๋Š” ๊ณผํ•™์ž๋“ค์˜ ์ด์•ผ๊ธฐ๊ฐ€ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค.

sciencediary.tistory.com

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

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

ํ‹ฐ์Šคํ† ๋ฆฌ ์• ๋“œํ• AdFit ์ˆ˜์ต ๊ทน๋Œ€ํ™”ํ•˜๊ธฐ - ์ฒœ๊ธฐ๋ˆ„์„ค?  (55) 2020.10.16
๋„ค์ด๋ฒ„ ๊ฒ€์ƒ‰ ๋…ธ์ถœ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ณ€ํ™”์˜ ์‹œ์ž‘ - ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ ํŒŒ๋น„์ฝ˜ ๋ฐ ๋ทฐํƒญ ๋ฐ˜์˜  (2) 2020.09.11
ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ ์• ๋“œ์„ผ์Šค ๋ฌดํšจ ํด๋ฆญ ์ถ”์  - ๊ตฌ๊ธ€ ์• ๋„๋ฆฌํ‹ฑ์Šค ์ดํƒˆ๋ฅ ์˜ ๋น„์ •์ƒ์ ์ธ ์กฐ์ž‘ ๊ฐ€๋Šฅ์„ฑ  (9) 2020.08.28
์ƒˆ Bing ์›น๋งˆ์Šคํ„ฐ ๋„๊ตฌ ๊ฒ€์ƒ‰ ๋…ธ์ถœ ๊ธ‰๊ฐ - ๊ฒ€์ƒ‰์—”์ง„ ์ตœ์ ํ™” (SEO) h1 ํƒœ๊ทธ ๋ฌธ์ œ  (10) 2020.08.11
ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ ํŒŒ๋น„์ฝ˜/์•„์ด์ฝ˜ ์—…๋ฐ์ดํŠธ ์Šคํ† ๋ฆฌ - ๋‹คํฌ๋ชจ๋“œ ์—…๊ทธ๋ ˆ์ด๋“œ ์ตœ์ข… ๋งˆ๋ฌด๋ฆฌ  (4) 2020.07.24
ํ‹ฐ์Šคํ† ๋ฆฌ ๊ตฌ๊ธ€ ์• ๋“œ์„ผ์Šค ๊ด‘๊ณ  ๋ฉ”์นด๋‹ˆ์ฆ˜์˜ ๋ณ€ํ™” - CPC ์ž…์ฐฐ vs CPM ์ž…์ฐฐ  (6) 2020.07.23
ํ‹ฐ์Šคํ† ๋ฆฌ ์Šคํ‚จ ์Šฌ๋ผ์ด๋” ์ž๋™๋„˜๊น€ ์Šคํฌ๋ฆฝํŠธ - ๋งˆ์šฐ์Šค ์˜ฌ๋ ธ์„ ๋•Œ ์Šฌ๋ผ์ด๋“œ ๋ฉˆ์ถ”๊ธฐ ์ฝ”๋“œ  (7) 2020.07.21
[์ตœ์ดˆ] ํ‹ฐ์Šคํ† ๋ฆฌ ๋ฐฉ๋ช…๋ก์˜ ์ˆจ๊ฒจ์ง„ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€ ์น˜ํ™˜์ž ๊ณต๊ฐœ  (8) 2020.07.19