• Q&A
  • 수강신청
  • 회원가입
  • 로그인

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

CSS 적용 방법엔 HTML 문서와의 독립성 정도에 따라 3가지 방법 존재.

스타일 정의 방법 3가지
 
1. 
인라인스타일 (Inline Styles)
HTML 태그 명령어 라인 내부에 스타일 정의.
 
2. 
내부스타일 (Internal Style Sheet)
HTML 문서 내부 상단에 <style> 태그를 이용해 별도로 스타일 정의 ★
 
3. 
외부스타일 (External Style Sheet)
HTML 문서와 별도로 확장자가 css인 파일 (예: style.css) 생성 후,
HTML 문서에 상단에 <link> 태그로 불러와 스타일을 적용하는 법. 




★ 스타일 적용 우선 순위 

 

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

 


 

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

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

※ 
한 문서에만 사용하거나 스타일 소스가 적다면 내부 스타일로,
여러 문서에 사용하거나 스타일 소스가 많다면 외부 스타일로 사용 권장.
 
※ 
!important는 (인라인, 내부, 외부) 순서를 무시하고, 
!important 붙은 속성을 가장 우선 적용 됨 (예) 선택자 {color:red !imortant; }



 
CSS 명시도  - CSS 적용우선순위 판별 (= CSS 적용순서 체크)

 

https://homzzang.com/b/css-278

 

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

 

[예제]

 

<div style="color:red;  font-size:20px;">홈짱닷컴 Homzzang.com</div> 

<div style="color : red; font-size : 20px;">홈짱닷컴 Homzzang.com</div>

<div style="color: red; font-size: 20px;">홈짱닷컴 Homzzang.com</div>

<div style="color:red; font-size:20px;">홈짱닷컴 Homzzang.com</div>

<div style="color:red;font-size:20px;">홈짱닷컴 Homzzang.com</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="<?php echo G5_CSS_URL?>/style.css">
<div class="text">예제</div>

  

PS.
style.css 파일 내용

@charset "utf-8";
.text {color:red; size:10px; border:1px;}

 


 

[설명]

 

스타일시트를 별도의 파일로 만들 땐, 
 
 1.
확장자를 css로 하여야 하며 파일명은 자유. 
단, 경로는 제대로 적어줘야 함.
 
2.
별도로 만든 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 !importanttext-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 ;} 코드를 스타일 시작 부분에 넣은 후, 다시 정의할 것. 




자동로그인
Since 2012