Dabeen

<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 15.4px; line-height: 20px; white-space: pre;">
<div><span style="color: #c586c0;">@media</span> (<span style="color: #9cdcfe;">max-width</span>: <span style="color: #b5cea8;">768px</span>) {</div>
<div>&nbsp; <span style="color: #d7ba7d;">html</span> {</div>
<div>&nbsp; &nbsp; <span style="color: #9cdcfe;">scroll-behavior</span>: <span style="color: #ce9178;">smooth</span>;</div>
<div>&nbsp; }</div>
<div>&nbsp; &nbsp; <span style="color: #6a9955;">/* Entire Layout */</span></div>
<div>&nbsp; <span style="color: #d7ba7d;">.cd-section</span> {</div>
<div>&nbsp; &nbsp; <span style="color: #9cdcfe;">height</span>: <span style="color: #ce9178;">auto</span>;</div>
<div>&nbsp; }</div>
<div>&nbsp; <span style="color: #d7ba7d;">.cd-section</span> > <span style="color: #d7ba7d;">div</span> {</div>
<div>&nbsp; &nbsp; <span style="color: #9cdcfe;">height</span>: <span style="color: #ce9178;">auto</span>;</div>
<div>&nbsp; }</div>
<div>&nbsp; <span style="color: #d7ba7d;">.contents</span> {</div>
<div>&nbsp; &nbsp; <span style="color: #9cdcfe;">position</span>: <span style="color: #ce9178;">static</span>;</div>
<div>&nbsp; &nbsp; <span style="color: #9cdcfe;">width</span>: <span style="color: #b5cea8;">100%</span>;</div>
<div>&nbsp; &nbsp; <span style="color: #9cdcfe;">height</span>: <span style="color: #b5cea8;">100%</span>;</div>
<div>&nbsp; }</div>
<div>}</div>
<br />
<div><span style="color: #6a9955;">/* Header */</span></div>
<div><span style="color: #d7ba7d;">header</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">transition</span>: <span style="color: #b5cea8;">0.5s</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">z-index</span>: <span style="color: #b5cea8;">100</span>;</div>
<div>}</div>
<div><span style="color: #d7ba7d;">header.active</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">background-color</span>: <span style="color: #ce9178;">#fff</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">border-bottom</span>: <span style="color: #b5cea8;">1px</span> <span style="color: #ce9178;">solid</span> <span style="color: #ce9178;">#eee</span>;</div>
<div>}</div>
<div><span style="color: #d7ba7d;">.menu</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">display</span>: <span style="color: #ce9178;">block</span>;</div>
<div>}</div>
<div><span style="color: #d7ba7d;">.slogan</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">display</span>: <span style="color: #ce9178;">none</span>;</div>
<div>}</div>
<div><span style="color: #d7ba7d;">.gnb</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">background-color</span>: <span style="color: #ce9178;">#fff</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">position</span>: <span style="color: #ce9178;">fixed</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">top</span>: <span style="color: #b5cea8;">0</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">right</span>: <span style="color: #b5cea8;">-270px</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">width</span>: <span style="color: #b5cea8;">250px</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">height</span>: <span style="color: #b5cea8;">100vh</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">box-shadow</span>: <span style="color: #b5cea8;">-5px</span> <span style="color: #b5cea8;">0</span> <span style="color: #b5cea8;">10px</span> <span style="color: #dcdcaa;">rgb</span>(<span style="color: #b5cea8;">0</span>, <span style="color: #b5cea8;">0</span>, <span style="color: #b5cea8;">0</span>, <span style="color: #b5cea8;">0.05</span>);</div>
<div>&nbsp; <span style="color: #9cdcfe;">transition</span>: <span style="color: #b5cea8;">0.5s</span>;</div>
<div>}</div>
<br />
<div><span style="color: #d7ba7d;">.gnb.active</span> {</div>
<div>&nbsp;<span style="color: #9cdcfe;">right</span>: <span style="color: #b5cea8;">0</span>;</div>
<div>}</div>
<div><span style="color: #d7ba7d;">.menu</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">line-height</span>: <span style="color: #b5cea8;">40px</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">margin-top</span>: <span style="color: #b5cea8;">60px</span>;</div>
<div>}</div>
<div><span style="color: #d7ba7d;">.menu</span> <span style="color: #d7ba7d;">a</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">text-align</span>: <span style="color: #ce9178;">right</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">display</span>: <span style="color: #ce9178;">block</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">padding-right</span>: <span style="color: #b5cea8;">20px</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">color</span>: <span style="color: #ce9178;">#000</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">font-size</span>: <span style="color: #b5cea8;">20px</span>;</div>
<div>}</div>
<br />
<div><span style="color: #6a9955;">/* Trigger */</span></div>
<div><span style="color: #d7ba7d;">.trigger</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">display</span>: <span style="color: #ce9178;">block</span>;</div>
<div>&nbsp; <span style="color: #6a9955;">/* border: 1px solid red; */</span></div>
<div>&nbsp; <span style="color: #9cdcfe;">width</span>: <span style="color: #b5cea8;">24px</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">height</span>: <span style="color: #b5cea8;">14px</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">position</span>: <span style="color: #ce9178;">fixed</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">right</span>: <span style="color: #b5cea8;">20px</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">top</span>: <span style="color: #b5cea8;">20px</span>;</div>
<div>}</div>
<div><span style="color: #d7ba7d;">.trigger</span> <span style="color: #d7ba7d;">span</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">position</span>: <span style="color: #ce9178;">absolute</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">height</span>: <span style="color: #b5cea8;">1px</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">width</span>: <span style="color: #b5cea8;">100%</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">background-color</span>: <span style="color: #ce9178;">#000</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">transition</span>: <span style="color: #b5cea8;">0.5s</span>;</div>
<div>}</div>
<div><span style="color: #d7ba7d;">.trigger</span> <span style="color: #d7ba7d;">span:nth-child</span>(<span style="color: #b5cea8;">1</span>) {</div>
<div>&nbsp; <span style="color: #9cdcfe;">top</span>: <span style="color: #b5cea8;">0</span>;</div>
<div>}</div>
<div><span style="color: #d7ba7d;">.trigger</span> <span style="color: #d7ba7d;">span:nth-child</span>(<span style="color: #b5cea8;">2</span>) {</div>
<div>&nbsp; <span style="color: #9cdcfe;">top</span>: <span style="color: #b5cea8;">50%</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">width</span>: <span style="color: #b5cea8;">80%</span>;</div>
<div>}</div>
<div><span style="color: #d7ba7d;">.trigger</span> <span style="color: #d7ba7d;">span:nth-child</span>(<span style="color: #b5cea8;">3</span>) {</div>
<div>&nbsp; <span style="color: #9cdcfe;">top</span>: <span style="color: #b5cea8;">100%</span>;</div>
<div>}</div>
<div><span style="color: #d7ba7d;">.trigger.active</span> <span style="color: #d7ba7d;">span:nth-child</span>(<span style="color: #b5cea8;">1</span>) {</div>
<div>&nbsp; <span style="color: #9cdcfe;">top</span>: <span style="color: #b5cea8;">50%</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">transform</span>: <span style="color: #dcdcaa;">rotate</span>(<span style="color: #b5cea8;">45deg</span>);</div>
<div>}</div>
<div><span style="color: #d7ba7d;">.trigger.active</span> <span style="color: #d7ba7d;">span:nth-child</span>(<span style="color: #b5cea8;">2</span>) {</div>
<div>&nbsp; <span style="color: #9cdcfe;">top</span>: <span style="color: #b5cea8;">50%</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">width</span>: <span style="color: #b5cea8;">80%</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">opacity</span>: <span style="color: #b5cea8;">0</span>;</div>
<div>}</div>
<div><span style="color: #d7ba7d;">.trigger.active</span> <span style="color: #d7ba7d;">span:nth-child</span>(<span style="color: #b5cea8;">3</span>) {</div>
<div>&nbsp; <span style="color: #9cdcfe;">top</span>: <span style="color: #b5cea8;">50%</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">transform</span>: <span style="color: #dcdcaa;">rotate</span>(<span style="color: #b5cea8;">-45deg</span>);</div>
<div>}</div>
<br />
<div><span style="color: #6a9955;">/* Gototop */</span></div>
<div><span style="color: #d7ba7d;">.gototop</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">position</span>: <span style="color: #ce9178;">fixed</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">bottom</span>: <span style="color: #b5cea8;">20px</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">left</span>: <span style="color: #b5cea8;">22px</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">border</span>: <span style="color: #b5cea8;">1px</span> <span style="color: #ce9178;">solid</span> <span style="color: #ce9178;">#fff</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">display</span>: <span style="color: #ce9178;">block</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">width</span>: <span style="color: #b5cea8;">40px</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">height</span>: <span style="color: #b5cea8;">40px</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">border-radius</span>: <span style="color: #b5cea8;">50%</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">text-align</span>: <span style="color: #ce9178;">center</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">line-height</span>: <span style="color: #b5cea8;">40px</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">transform</span>: <span style="color: #dcdcaa;">translateY</span>(<span style="color: #b5cea8;">30px</span>);</div>
<div>&nbsp; <span style="color: #9cdcfe;">opacity</span>: <span style="color: #b5cea8;">0</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">transition</span>: <span style="color: #b5cea8;">0.5s</span>;</div>
<div>}</div>
<div><span style="color: #d7ba7d;">.gototop.active</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">opacity</span>: <span style="color: #b5cea8;">1</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">transform</span>: <span style="color: #dcdcaa;">translateY</span>(<span style="color: #b5cea8;">0</span>);</div>
<div>}</div>
<br />
<div><span style="color: #d7ba7d;">.btn-hiring</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">right</span>: <span style="color: #b5cea8;">10px</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">bottom</span>: <span style="color: #b5cea8;">20px</span>;</div>
<div>}</div>
</div>

모바일 전체 레이아웃 및 네비게이션 퍼블리싱(Mobile ver.)

<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 15.4px; line-height: 20px; white-space: pre;">
<div><span style="color: #6a9955;">/* Google Web Font : Montserrat */</span></div>
<div><span style="color: #c586c0;">@import</span> <span style="color: #dcdcaa;">url</span>(<span style="color: #ce9178;">'https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap'</span>);</div>
<div><span style="color: #c586c0;">@import</span> <span style="color: #dcdcaa;">url</span>(<span style="color: #ce9178;">'https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap'</span>);</div>
<div><span style="color: #c586c0;">@import</span> <span style="color: #dcdcaa;">url</span>(<span style="color: #ce9178;">'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'</span>);</div>
<div><span style="color: #c586c0;">@import</span> <span style="color: #dcdcaa;">url</span>(<span style="color: #ce9178;">'https://fonts.googleapis.com/css2?family=Overpass&display=swap'</span>);</div>
<br />
<div><span style="color: #6a9955;">/* FontAwesome CDN 4.7 */</span></div>
<div><span style="color: #c586c0;">@import</span> <span style="color: #dcdcaa;">url</span>(<span style="color: #ce9178;">'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'</span>);</div>
<br />
<div><span style="color: #6a9955;">/* Reset CSS */</span></div>
<div><span style="color: #569cd6;">*</span> { <span style="color: #9cdcfe;">box-sizing</span>: <span style="color: #ce9178;">border-box</span>; }</div>
<div><span style="color: #d7ba7d;">ul</span> { <span style="color: #9cdcfe;">list-style</span>: <span style="color: #ce9178;">none</span>; }</div>
<div><span style="color: #d7ba7d;">a</span> { <span style="color: #9cdcfe;">text-decoration</span>: <span style="color: #ce9178;">none</span>; }</div>
<br />
<div><span style="color: #6a9955;">/* Default CSS */</span></div>
<div><span style="color: #d7ba7d;">body</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">font-family</span>: <span style="color: #ce9178;">'Montserrat'</span>, <span style="color: #ce9178;">sans-serif</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">color</span>: <span style="color: #ce9178;">#222</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">font-size</span>: <span style="color: #b5cea8;">15px</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">margin</span>: <span style="color: #b5cea8;">0</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">height</span>: <span style="color: #b5cea8;">100vh</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">background-color</span>: <span style="color: #ce9178;">#fff</span>;</div>
<div>}</div>
<br />
<div><span style="color: #6a9955;">/* Entire Layout */</span></div>
<div><span style="color: #d7ba7d;">.cd-section</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">height</span>: <span style="color: #b5cea8;">100vh</span>;</div>
<div>}</div>
<div><span style="color: #d7ba7d;">.cd-section</span> > <span style="color: #d7ba7d;">div</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">height</span>: <span style="color: #b5cea8;">100%</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">position</span>: <span style="color: #ce9178;">relative</span>;</div>
<div>}</div>
<div><span style="color: #d7ba7d;">.contents</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">background-color</span>: <span style="color: #ce9178;">#ddd</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">position</span>: <span style="color: #ce9178;">absolute</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">width</span>: <span style="color: #dcdcaa;">calc</span>(<span style="color: #b5cea8;">100%</span> - <span style="color: #b5cea8;">40px</span>);</div>
<div>&nbsp; <span style="color: #9cdcfe;">height</span>: <span style="color: #dcdcaa;">calc</span>(<span style="color: #b5cea8;">100%</span> - <span style="color: #b5cea8;">80px</span>);</div>
<div>&nbsp; <span style="color: #9cdcfe;">left</span>: <span style="color: #b5cea8;">20px</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">bottom</span>: <span style="color: #b5cea8;">20px</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">overflow</span>: <span style="color: #ce9178;">hidden</span>;</div>
<div>}</div>
<br />
<div><span style="color: #6a9955;">/* Header */</span></div>
<div><span style="color: #d7ba7d;">header</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">position</span>: <span style="color: #ce9178;">fixed</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">top</span>: <span style="color: #b5cea8;">0</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">left</span>: <span style="color: #b5cea8;">0</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">width</span>: <span style="color: #b5cea8;">100%</span>;</div>
<div>}</div>
<div><span style="color: #d7ba7d;">.gnb-inner</span> {</div>
<div>&nbsp; <span style="color: #6a9955;">/* border: 1px solid #000; */</span></div>
<div>&nbsp; <span style="color: #9cdcfe;">width</span>: <span style="color: #dcdcaa;">calc</span>(<span style="color: #b5cea8;">100%</span> - <span style="color: #b5cea8;">40px</span>);</div>
<div>&nbsp; <span style="color: #9cdcfe;">margin</span>: <span style="color: #ce9178;">auto</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">height</span>: <span style="color: #b5cea8;">60px</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">line-height</span>: <span style="color: #b5cea8;">60px</span>;</div>
<div>}</div>
<div><span style="color: #d7ba7d;">.logo</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">float</span>: <span style="color: #ce9178;">left</span>;</div>
<div>}</div>
<div><span style="color: #d7ba7d;">.logo</span> <span style="color: #d7ba7d;">img</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">padding-top</span>: <span style="color: #b5cea8;">17px</span>;</div>
<div>}</div>
<div><span style="color: #d7ba7d;">.gnb</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">float</span>: <span style="color: #ce9178;">right</span>;</div>
<div>}</div>
<div><span style="color: #d7ba7d;">.menu</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">display</span>: <span style="color: #ce9178;">none</span>;</div>
<div>}</div>
<div><span style="color: #d7ba7d;">.menu</span> <span style="color: #d7ba7d;">a</span> {}</div>
<div><span style="color: #d7ba7d;">.slogan</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">font-size</span>: <span style="color: #b5cea8;">16px</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">font-style</span>: <span style="color: #ce9178;">italic</span>;</div>
<div>}</div>
<div><span style="color: #d7ba7d;">.trigger</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">display</span>: <span style="color: #ce9178;">none</span>;</div>
<div>}</div>
<br />
<div><span style="color: #6a9955;">/* Hiring Button */</span></div>
<div><span style="color: #d7ba7d;">.btn-hiring</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">position</span>: <span style="color: #ce9178;">fixed</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">right</span>: <span style="color: #b5cea8;">50px</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">bottom</span>: <span style="color: #b5cea8;">50px</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">color</span>: <span style="color: #ce9178;">#fff</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">background-color</span>: <span style="color: #ce9178;">#000</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">padding</span>: <span style="color: #b5cea8;">10px</span> <span style="color: #b5cea8;">20px</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">border-radius</span>: <span style="color: #b5cea8;">20px</span>;</div>
<div>&nbsp; <span style="color: #9cdcfe;">box-shadow</span>: <span style="color: #b5cea8;">5px</span> <span style="color: #b5cea8;">5px</span> <span style="color: #b5cea8;">20px</span> <span style="color: #dcdcaa;">rgba</span>(<span style="color: #b5cea8;">0</span>, <span style="color: #b5cea8;">0</span>, <span style="color: #b5cea8;">0</span>, <span style="color: #b5cea8;">0.119</span>);</div>
<div>&nbsp; <span style="color: #9cdcfe;">transition</span>: <span style="color: #b5cea8;">0.5s</span>;</div>
<div>}</div>
<div><span style="color: #d7ba7d;">.btn-hiring</span> <span style="color: #d7ba7d;">.fa</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">transform</span>: <span style="color: #dcdcaa;">rotateY</span>(<span style="color: #b5cea8;">180deg</span>);</div>
<div>&nbsp; <span style="color: #9cdcfe;">margin-right</span>: <span style="color: #b5cea8;">5px</span>;</div>
<div>}</div>
<div><span style="color: #d7ba7d;">.btn-hiring:active</span> {</div>
<div>&nbsp; <span style="color: #9cdcfe;">transform</span>: <span style="color: #dcdcaa;">scale</span>(<span style="color: #b5cea8;">0</span>);</div>
<div>}</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>

<p>txt파일에 없어서 방황했는데 여기있네용</p>

Dabeen

Posts