• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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 문서 내부 상단 <head> 태그 안의 <style> 태그 안에 별도로 스타일 정의 ★
  • 캐싱 X
 
3. 외부스타일 (External Style Sheet) 
  • HTML 문서와 별도로 확장자가 css인 파일 (예: style.css) 생성 후, HTML 문서에 상단의 <head> 태그 안에 <link> 태그로 불러와 스타일 적용. 
  • 캐싱 O



PS. 주의
  • 내부스타일과 외부스타일은 <head>태그 안에 넣는 게 웹표준임.
  • 하지만, 대부분 브라우저는 호환성 위해 <body>에 넣는 거 허용.
 

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 외부스타일 추가 함수
 
 

 

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>


결과보기

PS. 더 자세히 보기

 

CSS 브라우저 기본값 초기화

 

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

 


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

 

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

 

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


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

분류 제목
button CSS - Button - 버튼스타일 (버튼크기, 버튼색깔, 버튼비활성화, 버튼그룹, 이미지위버튼)
position CSS - overflow 속성 ★★ - 범위이탈요소처리 (= 범위넘는요소처리 = 스크롤바 생성 = over…
font CSS - font-family 속성 ★ - 글자종류 (= font-family속성 = 폰트패밀리속성 = 글…
position CSS - position 속성 ★★★ - 위치기준대상지정 (= 위치속성 = 포지션속성 = 위치조정 = po…
selector CSS - :focus 선택자 - 포커스 된 요소 선택 (= :focus선택자 = 포커스선택자) (IE8…
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
font CSS - font-style 속성 - 글자기울기 (= 이텔릭체 여부 = 이탤릭 글씨체 = 글자 기울려쓰기 … 1
font CSS - font-size 속성 ★ - 글자크기 (= 글씨체크기= 글씨크기 = 서체크기= 글씨크기 = …
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - :first-child 가상선택자 - 그부모요소의 첫번째자식요소 (= 퍼스트차일드선택자, IE7)
selector CSS - :not(selector) 선택자 - (특정요소/특정선택자) 아닌 모든요소선택 (= not선택자 …
table CSS - border-collapse 속성★ - 테두리겹침설정 (= 테두리중첩설정 = 테두리이중방지 = b…
position CSS - float 속성 ★★★ - 요소나란히 (= 요소한줄로 = 요소가로로 = 요소옆으로 = float속…
text CSS - color 속성 ★ - 글자색깔 (=글자색상=글자색깔=글자컬러 = 텍스트색깔 = 컬러속성 = co…
1/25
목록
찾아주셔서 감사합니다. Since 2012