목차
CSS 정의 방법 3가지 CSS 적용 우선 순위 ★ CSS 명시도 - CSS 우선순위 판별 (= CSS 적용순서 체크) CSS 인라인스타일 (Inline Styles) CSS 내부스타일 (Internal Style Sheet) CSS 외부스타일 (External Style Sheet) CSS 외부스타일 PHP 파일 사용 (예) style.php 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 붙은 속성을 가장 우선 적용 됨. (속성값과 딱 붙여도 됨.)!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 태그 상단에 (#이나 .) 이용해 스타일 정의 후,
2.
#
.
3.
세번째 예처럼, # .
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);
방법3 : 그누보드5・배추빌더5 외부스타일 추가 함수
CSS 외부스타일 PHP 파일 사용 (예) style.php
style.php 파일 맨상단에 아래 코드 추가 후 CSS 정의. (※ 파일명은 자유임.)
<?php header ("Content-type:text/css; charset:UTF-8"); ?>
[예제] - 그누보드5 common.php 인클루드 된 경우 가정 시, div 요소 너비를 모바일모드 여부로 다르게 설정하기.
<?php header("Content-type:text/css; charset:UTF-8"); ?>
div { width:<?php echo $is_mobile ? "100%" : "900px"; ?>; }
https://sir.kr/g5_tip/23063
PS. 절대경로/상대경로 공부하기
CSS !important - 속성값 강제 우선 적용
[구문]
선택자 { 속성: 속성값 !important ; }
[정의]
1.
!important 선언된 속성값을 가장 우선적으로 강제 적용 시킴.
!important는 (인라인, 내부, 외부, 브라우저) 스타일 적용 순서 무시.
2.
같은 요소엔 반드시 !important 선언을 딱 한번만 할 것 !!
두 번 이상 선언하면 선언 효과 사라지고 원래 순서로 적용.
3.
!important는 개별 속성 단위
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. 스타일 시작 부분에 넣어주면 됨.
최신댓글