• 회원가입
  • 로그인

[입문] CSS - 적용 방법 3가지 ★★★ - (인라인 스타일 / 내부 스타일 / 외부 스타일) 적용 순서 + 속성 강제 적용 !important

CSS를 적용하는 방법엔 HTML 문서와의 독립성 정도에 따라 3가지가 있습니다.
 




스타일 정의 방법 3가지

1. 인라인 스타일 (Inline Styles)
  - HTML 태그 명령어 라인 내부에 사용

2. 내부 스타일 (Internal Style Sheet)
 - HTML 문서 내부에 별도로 CSS 스타일 정의 후, HTML 소스 내부에 불러와 적용 ★

3. 외부 스타일 (External Style Sheet)
   - HTML 문서 외부에 별도의 CSS 스타일 파일 만든 후, HTML 문서에 불러와 적용 


 




★ 스타일 적용 우선 순위

적용 순서는 인라인 스타일이 가장 먼저, 브라우저 기본값이 가장 마지막으로 적용됨. 


속성값 !important  > 인라인 스타일  >  내부 스타일  >  외부 스타일 > 브라우저 기본값




※ 단, 동일한 head에 내부 스타일보다 외부 스타일을 나중에 정의할 경우,
   나중에 정의한 외부스타일이 먼저 적용됨.

※ 현재는 스타일을 HTML과 분리하는 추세가 표준이라,
   인라인 방식보다는 내부나 외부 스타일로 하는 게 좋습니다.

※ 한 문서에만 사용하거나 스타일 소스가 적다면 내부 스타일로,
   여러 문서에 사용하거나 스타일 소스가 많다면 외부 스타일로 사용 권장.

※ !important는 (인라인, 내부, 외부) 순서를 무시하고,
   !important 붙은 속성을 가장 우선 적용 됨 (예) color:red !imortant; 







1. 인라인 스타일 (Inline Styles)

 
<div style="color:red;  font-size:10px;">예제</div>
 
<div style="color : red; font-size : 20px;">예제</div>
<div style="color: red; font-size: 20px;">예제</div>
<div style="color:red; font-size:20px;">예제</div>
<div style="color:red;font-size:20px;">예제</div>




1.  HTML 태그 안에 style="속성1:속성값1; 속성2:속성값2" 형태로 사용

2.  style 명령어 다음에 등호 부호 붙인 후, 
    큰 따옴표나 작은 따옴표를 처음과 끝에 꼭 붙여야 함. 

3.  값을 정의할 땐 (콜론)을 사용.
    다른 스타일 정의를 추가할 땐 ; (세미콜론)을 사용.

4.  스타일을 정의할 때
    
콜론, 세미콜론을 딱 붙여도 되고, 한칸 띄고 정의해도 상관 없습니다.    
    (위 예제 결과 모두 동일)



 



2. 내부 스타일 (Internal Style Sheet)

<style>
#text {color:red; size:10px;}
</style>
 
<div id="text">예제</div>
 

 
 <style>
.text {color:red; size:10px;}
</style>
 
<div class="text">예제</div>



<style> 
#text .text {color:red; size:10px;} 
</style>
 
<section id="text">
<div class="text">예제</div>
</section>




1. <style> </style> 형식으로 HTML 태그 상단에 (#이나 .) 이용해 스타일 정의 후,
   id나 class선택자로 html 문서에 불러옵니다.
 
2.  # 기호 :  id로 정의된 선택자를 정의할 때 사용.  
    .  기호 :  Class로 정의된 선택자를 정의할 때 사용.
 
3.  세번째 예처럼, #. (즉, id와 Class) 두 선택자를 함께 사용해 정의할 수도 있습니다.
 
4.  class가 비슷한 스타일을 사용하는 그룹이라면,
    id는 여러 class를 묶어놓은 그룹이라고 볼 수 있습니다.



  
 

 
3. 외부 스타일 (External Style Sheet)


<link rel="stylesheet"  type="text/css" href="<?=$g4[path?>/style.css">

<div class="text">예제</div>



style.css 파일 내용


@charset "utf-8";

.text {color:red; size:10px; border:1px;}




스타일시트를 별도의 파일로 만들 땐,
확장자를 css로 하여야 하며 파일명은 자유입니다.
단, 경로는 제대로 적어줘야 합니다.
별도로 만든 css 스타일 파일을 불러올 땐, 위 파란색처럼 불러옵니다.
 
 
[참고]
타 웹사이트에서 소스보기를 해서 복사해 태그연습장에 적용시 화면 레이어가 일그러져 보이는 경우가 있는데,
이런 경우는 별도의 CSS 스타일 파일을 만든 후 HTML문서에 불러오는 외부 스타일을 이용해 만든 경우입니다.
따라서, CSS 스타일 파일까지 함께 다운 받아와 적용하면 원본 사이트 화면과 동일하게 구현 가능합니다. ^!~







4. !important - 속성값 강제 우선 적용


선택자 { 속성: 속성값 !important; }





1. !important 선언된 속성값을 가장 우선적으로 강제 적용시킴.   
   !important는 (인라인, 내부, 외부, 브라우저) 스타일 적용 순서 무시.

2. 같은 요소엔 반드시 !important 선언을 딱 한번만 할 것 !!
   두 번 이상 선언하면 선언 효과 사라지고 원래 순서로 적용.

3. !important는 개별 속성 단위로 적용  ※ 전체 스타일 단위 적용 X 

4. !important는 스타일의 자연스럼 흐름을 방해하므로 되도록 사용 금지
   되도록이면 자연스런 css 적용 순서 규칙 준수하는 형태로 코딩할 것.

5. IE6 이전 버전에서 인식 안 될 수도 있음.




<style type="text/css">
div {font-size: 30px !important; color: magenta !important; text-align:left;}
</style>


<div style="font-size: 12px; color: blue; text-align:right;">
   홈짱닷컴 (Homzzang.com) - HTML CSS JAVASCRIPT 기초 강의
</div>


1. (인라인 스타일,  나중 선언) 우선 적용 원칙에 의해 붉은색 코드가 적용돼야 하나.
   속성에 !important 선언할 경우 해당 속성값이 강제로 우선 적용되게 됨.

2. 그 결과, 파란색 소스가 적용 됨.

3. 브라우저가 스타일을 자연스럽게 읽어들이도록
   되도록이면 아래처럼 !important 선언을 사용하지 말고, 적용되는 부분을 직접 수정.




<div style="font-size: 30px; color: magenta; text-align:right;">
   홈짱닷컴 (Homzzang.com) - HTML CSS JAVASCRIPT 기초 강의
</div>


[참고] 지구별 님




5. 브라우저 기본값

1. 각 브라우저마다 HTML 요소의 기본 속성 및 속성값이 다름 (특히, margin, padding)

2. 크로스브라우징 (= 브라우저 상관없이 동일 화면 구현) 위해선 속성값 초기화가 필요.

3. 선택자 {margin:0 ; padding:0 ;} 코드를 스타일 시작 부분에 넣은 후, 다시 정의할 것. 






분류 제목
입문 CSS - 정의와 장점 + CSS 기본 문법
입문 CSS - 발전사 (CSS1 → .01 → CSS3)
입문 CSS - 적용 방법 3가지 ★★★ - (인라인 스타일 / 내부 스타일 / 외부 스타일) 적용 순서 + 속성 강제 적용 !important
선택자 CSS - 선택자 (Selector) 종류
선택자 CSS - 아이디(id) 클래스(class) 선택자 ★
선택자 CSS - 전체 선택자 (*)
선택자 CSS - 요소 선택자 (요소)
선택자 CSS - 병렬 선택자 (요소,요소) - 요소 여러 개 나열 ★
선택자 CSS - 자손 선택자 (요소 요소) ★
선택자 CSS - 자식 선택자 (요소>요소) : (IE7) ★ (해당 요소에만 스타일 줄 때 사용)
선택자 CSS - 인접 선택자 (요소+요소) : (IE7) ★
선택자 CSS - 속성 선택자 (요소[속성]) : (IE7)
선택자 CSS - 속성 값 선택자 (요소[속성=속성값 단어]) : (IE7)
선택자 CSS - 속성 값 선택자 (요소[속성~=속성값 단어]) : (IE7)
선택자 CSS - 속성 값 선택자 (요소[속성|=속성값 단어]) : (IE7)
목록
모바일 버전으로 보기