목차
- CSS 정의 방법 3가지
- CSS 적용 우선 순위 ★
- CSS 명시도 - CSS 우선순위 판별 (= CSS 적용순서 체크)
- CSS 인라인스타일 (Inline Styles)
- CSS 내부스타일 (Internal Style Sheet)
- CSS 외부스타일 (External Style Sheet)
- CSS !important - 속성값 강제 우선 적용
- 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>
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 !important; text-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. 스타일 시작 부분에 넣어주면 됨.