• Q&A
  • 회원가입
  • 로그인

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

목차

  1. CSS 정의 방법 3가지
  2. CSS 적용 우선 순위 ★
  3. CSS 명시도 - CSS 우선순위 판별 (= CSS 적용순서 체크)
  4. CSS 인라인스타일 (Inline Styles)
  5. CSS 내부스타일 (Internal Style Sheet)
  6. CSS 외부스타일 (External Style Sheet)
  7. CSS !important - 속성값 강제 우선 적용
  8. CSS 브라우저 기본값 초기화

 

CSS 정의 방법 3가지

 

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

 


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


 

CSS 적용 우선 순위 ★

 

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

 


 

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

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

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


 

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

 

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

 

 

CSS 인라인스타일 (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>

 

결과보기


PS. 설명

 

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

2.  
style 명령어 다음에 등호 부호 붙인 후, 
큰 따옴표나 작은 따옴표를 처음과 끝에 꼭 붙여야 함. 
 
3.  
속성값 정의할 땐 -  : (콜론) 사용. 
다른 스타일 추가 -  ; (세미콜론) 사용.
 
4.  
스타일 정의할 때, 콜론 세미콜론 딱 붙여도 되고, 한칸 띄고 정의해도 상관 없음.    
(위 예제 결과 모두 동일)

 

 

CSS 내부스타일 (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>

결과보기

PS. 설명

 

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

 

 

CSS 외부스타일 (External Style Sheet)

방법1 : <head> 태그 안에 <link> 태그로 불러오기

 

<head>

    <link rel="stylesheet"  type="text/css" href="<?php echo G5_CSS_URL?>/style.css">
</head>

<body>

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

</body>

  

PS. style.css 파일 내용
@charset "utf-8";
.text {color:red; size:10px; border:1px;}

 


PS. 설명

 

1. 

<link> 태그 이용해 외부 css 파일 불러옴.
rel 속성 : 현재 문서와의 관계.
type 속성 : CSS 문서 타입. HTML5 경우 생략 가능.
href 속성 : CSS 파일 주소. (파일명은 자유. 단 주소는 제대로 적어야 함.)
 
2.
style.css 파일 최상단에 언어셋 정의 필수.
정의 안 할 경우 일부 브라우저에서 비작동.
@charset "utf-8";

 

 


방법2 : <style> 태그 안에 @import url(파일주소); 형식으로 불러오기

 
<style type="text/css">
@import url(style.css);
</style>

  


방법3 : 그누보드5・배추빌더5 외부스타일 추가 함수
 
G5 : add_stylesheet() 함수
mw5 : mw_css() 함수
 
 

CSS !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>

PS. 위 예제 설명

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

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

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

 


 

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


결과보기

 

CSS 브라우저 기본값 초기화

 

각 브라우저마다 HTML 요소의 기본 속성 및 속성값이 다른데, 크로스브라우징 (= 브라우저 동일 화면 구현) 위해선 속성값 초기화 필요.

 


[예제] - margin, padding 초기화.

 

선택자 {margin:0 ; padding:0 ;}

 

PS. 스타일 시작 부분에 넣어주면 됨.

 
방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012