<div id="readability-page-1" class="page"><div><h2 data-ke-size="size26"><span>&nbsp;CSS를 적용하는 3가지 방법&nbsp;</span></h2>
<ul data-ke-list-type="disc">
<li>인라인 스타일(Inline Style)</li>
<li>내부 스타일 시트(Internal Style Sheet)</li>
<li>외부 스타일 시트(External Style Sheet)</li>
</ul>
<p data-ke-size="size16">웹 문서에 CSS를 적용시키기 위해서는 위의 3가지 방법이 있습니다.</p>

<p data-ke-size="size16"><i><span>※ 우선순위 : 인라인 스타일 &gt; 내부 스타일 시트 &gt; 외부 스타일 시트</span></i></p>

<h3 data-ke-size="size23">인라인 스타일(Inline Style)</h3>
<p data-height="300" data-default-tab="html,result" data-slug-hash="xxJVPdq" data-user="wjdxo513" data-ke-size="size16"><span>See the Pen <a href="https://codepen.io/wjdxo513/pen/xxJVPdq"> CSS사용예제1</a> by wjdxo513 (<a href="https://codepen.io/wjdxo513">@wjdxo513</a>) on <a href="https://codepen.io/">CodePen</a>.</span></p>


<p data-ke-size="size16">인라인 스타일 방식은 html태그에 style 속성을 사용하여 직접 스타일을 지정하는 방식으로 특정 영역에 스타일을 단독 적용하고 싶을 때 사용할 수 있는 방법입니다. 하지만 이 방법을 너무 많이 사용하면 HTML과 CSS의 코드가 혼합되어 유지보수에 어려움을 겪고 HTML문서의 크기가 커져 웹 로딩속도를 느리게 한다는 단점이 있습니다.</p>

<h3 data-ke-size="size23">내부 스타일 시트(Internal Style Sheet)</h3>
<p data-height="300" data-default-tab="html,result" data-slug-hash="rNreYYL" data-user="wjdxo513" data-ke-size="size16"><span>See the Pen <a href="https://codepen.io/wjdxo513/pen/rNreYYL"> CSS사용예제2</a> by wjdxo513 (<a href="https://codepen.io/wjdxo513">@wjdxo513</a>) on <a href="https://codepen.io/">CodePen</a>.</span></p>


<p data-ke-size="size16">내부 스타일 시트 방식은 html문서의 &lt;head&gt; 태그에 &lt;style&gt; 태그를 삽입하는 방식으로 이 &lt;head&gt;가 적용되는 문서의 태그들에 스타일을 한 번에 삽입할 수 있습니다. 하지만 이 또한 HTML과 CSS를 완전히 분리하지 못하기에 유지보수 측면에서 한계점이 있습니다.</p>

<h3 data-ke-size="size23">외부 스타일 시트(External Style Sheet)</h3>
<p data-height="300" data-default-tab="html,result" data-slug-hash="bGjpYaJ" data-user="wjdxo513" data-ke-size="size16"><span>See the Pen <a href="https://codepen.io/wjdxo513/pen/bGjpYaJ"> CSS사용예제3</a> by wjdxo513 (<a href="https://codepen.io/wjdxo513">@wjdxo513</a>) on <a href="https://codepen.io/">CodePen</a>.</span></p>


<p data-ke-size="size16">CSS 확장자를 가지는 스타일 시트 파일을 만들고 이 파일을 HTML에 삽입하여 사용하는 방식입니다. 이렇게 CSS를 사용한다면 웹 문서 전체의 스타일을 일관성 있게 유지할 수 있고 유지보수 또한 CSS문서에 정의된 부분만 바꿔주면 모든 웹 문서에 일괄 적용되어 유지보수 측면에서 강점이 있습니다. 전문적인 웹 페이지를 만들고 싶다면 이 외부 스타일 시트를 활용하셔야 합니다.</p>

<pre><code>&lt;link rel="stylesheet" type="text/css" href="CSS파일명.css"&gt;</code></pre>
<p data-ke-size="size16">외부 스타일 시트를 사용하려면 html에서 link 태그를 활용하여 사용할 CSS 파일을 연결시켜주면 됩니다.&nbsp;</p>

<h2 data-ke-size="size26"><span>&nbsp;CSS 문법&nbsp;</span></h2>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="535" data-origin-height="205"><span data-url="https://blog.kakaocdn.net/dn/2ORfW/btrU0uZllXR/tK1g4fZ6BKBfiXdWFwkAF1/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/2ORfW/btrU0uZllXR/tK1g4fZ6BKBfiXdWFwkAF1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="535" data-origin-height="205"></span></figure>


<p data-ke-size="size16">CSS의 문법은 선택자(selector)와 선언부(declaration)로 구분됩니다.&nbsp;</p>

<h3 data-ke-size="size23">선택자(Selector)</h3>
<p data-ke-size="size16">선택자는 CSS를 적용하고자 하는 HTML태그, 클래스, ID값으로 지정할 수 있습니다. 클래스와 ID는 대소문자를 구분되며 반드시 문자로 시작해야 하고 영어, 숫자와 언더바(_)를 포함할 수 있습니다. 클래스는 어떠한 요소의 어떠한 수의 인스턴스에도 적용할 수 있으며, ID는 하나의 요소에만 적용할 수 있습니다. 선택자가 ID일 경우에는 앞에 #이 붙고, 클래스 일 경우에는 앞에 .가 붙습니다.</p>

<h3 data-ke-size="size23">선언부(Declaration)</h3>
<p data-ke-size="size16">선언부는 중괄호 { }로 이루어진 부분을 말하며 선언 블록이라고도 합니다. 선언부는 목록으로 이루어지며 하나 이상의 선언들을 세미콜론(;)으로 구분하여 나뉩니다. 각 선언은 CSS 속성명(property)과 속성값(value)을 가지며, 그 둘은 콜론(:)으로 연결됩니다..</p>

<h3 data-ke-size="size23">CSS 우선순위 스킴 (높은 순 -&gt; 낮은 순)</h3>
<figure data-ke-mobilestyle="widthOrigin" data-filename="blob" data-origin-width="1137" data-origin-height="379"><span data-url="https://blog.kakaocdn.net/dn/cbj4xl/btrUTXV3fHT/QxaNqVm9kKq7Gq2SlYScP1/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/cbj4xl/btrUTXV3fHT/QxaNqVm9kKq7Gq2SlYScP1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="blob" data-origin-width="1137" data-origin-height="379"></span></figure>


</div></div>

코딩팩토리

CSS를 적용하는 3가지 방법 
인라인 스타일(Inline Style)
내부 스타일 시트(Internal Style Sheet)
외부 스타일 시트(External Style Sheet)
웹 문서에 CSS를 적용시키기 위해서는 위의 3가지 방법이 있습니다.
 
※ 우선순위 : 인라인 스타일 > 내부 스타일 시트 > 외부 스타일 시트
 
인라인 스타일(Inline Style)
See the Pen  CSS사용예제1 by wjdxo513 (@wjdxo513) on CodePen.
 
인라인 스타일 방식은 html태그에 style 속성을 사용하여 직접 스타일을 지정하는 방식으로 특정 영역에 스타일을 단독 적용하고 싶을 때 사용할 수 있는 방법입니다. 하지만 이 방법을 너무 많이 사용하면 HTML과 CSS의 코드가 혼합되어 유지보수에 어려움을 겪고 HTML문서의 크기가 커져 웹 로딩속도를 느리게 한다는 단점이 있습니다.
 
내부 스타일 시트(Internal Style Sheet)
See the Pen  CSS사용예제2 by wjdxo513 (@wjdxo513) on CodePen.
 
내부 스타일 시트 방식은 html문서의 <head> 태그에 <style> 태그를 삽입하는 방식으로 이 <head>가 적용되는 문서의 태그들에 스타일을 한 번에 삽입할 수 있습니다. 하지만 이 또한 HTML과 CSS를 완전히 분리하지 못하기에 유지보수 측면에서 한계점이 있습니다.
 
외부 스타일 시트(External Style Sheet)
See the Pen  CSS사용예제3 by wjdxo513 (@wjdxo513) on CodePen.
 
CSS 확장자를 가지는 스타일 시트 파일을 만들고 이 파일을 HTML에 삽입하여 사용하는 방식입니다. 이렇게 CSS를 사용한다면 웹 문서 전체의 스타일을 일관성 있게 유지할 수 있고 유지보수 또한 CSS문서에 정의된 부분만 바꿔주면 모든 웹 문서에 일괄 적용되어 유지보수 측면에서 강점이 있습니다. 전문적인 웹 페이지를 만들고 싶다면 이 외부 스타일 시트를 활용하셔야 합니다.
 
<link rel="stylesheet" type="text/css" href="CSS파일명.css">
외부 스타일 시트를 사용하려면 html에서 link 태그를 활용하여 사용할 CSS 파일을 연결시켜주면 됩니다. 
 
 CSS 문법 
 
CSS의 문법은 선택자(selector)와 선언부(declaration)로 구분됩니다. 
 
선택자(Selector)
선택자는 CSS를 적용하고자 하는 HTML태그, 클래스, ID값으로 지정할 수 있습니다. 클래스와 ID는 대소문자를 구분되며 반드시 문자로 시작해야 하고 영어, 숫자와 언더바(_)를 포함할 수 있습니다. 클래스는 어떠한 요소의 어떠한 수의 인스턴스에도 적용할 수 있으며, ID는 하나의 요소에만 적용할 수 있습니다. 선택자가 ID일 경우에는 앞에 #이 붙고, 클래스 일 경우에는 앞에 .가 붙습니다.
 
선언부(Declaration)
선언부는 중괄호 { }로 이루어진 부분을 말하며 선언 블록이라고도 합니다. 선언부는 목록으로 이루어지며 하나 이상의 선언들을 세미콜론(;)으로 구분하여 나뉩니다. 각 선언은 CSS 속성명(property)과 속성값(value)을 가지며, 그 둘은 콜론(:)으로 연결됩니다..
 
CSS 우선순위 스킴 (높은 순 -> 낮은 순)

[CSS] CSS 사용법 & 예제 총정리 (적용방법, 우선순위, 문법)

댓글