[intro] CSS - @import 구문 - 지정 외부스타일시트파일을 현재 스타일시트에 삽입/가져오기 (= @import구문 = 임포트구문)

1. @import 예제 - 현재 스타일시트에 hz.css 가져오기
2. @import 정의
3. @import 구문
4. @import 예제 - 미디어가 print인 경우에만 CSS 가져오기
5. @import 예제 - 미디어가 screen이고 뷰포트가 최대 768px 경우에만 CSS 가져오기
6. @import 예제 - PHP basename(__FILE__) 사용해 가져오기

@import 예제 - 현재 스타일시트에 hz.css 가져오기

 

방법1 - 문자열 사용해 가져오기

@import "homzzang.css";

방법2 - url() 사용해 가져오기

@import url("homzzang.css"); 

 

@import 정의

 

지정 외부스타일시트파일을 현재 스타일시트에 삽입(=가져오기).

 

---

 

1.

• @charset 문자셋 설정 바로 밑에 위치해야 함.
• 미디어쿼리도 지원하므로 미디어에 종속되도록 허용 가능.

 

2.

거의 모든 브라우저 지원.

 

3. MDN @import 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/@import

 

@import 구문

 

@import url("style.css")|"style.css' list-of-mediaqueries;

 

---

[속성값]

 

url("style.css") | "style.css'

가져오기 할 style.css 파일의 주소 지정. (절대주소/상대주소 둘 다 가능)

• PHP basename(__FILE__) 사용 시, 동일 파일명의 스타일시트를 쉽게 삽입 가능. (예) a.php 파일에 a.php.css 파일 가져오기

 

list-of-mediaqueries

가져오기할 CSS 적용 조건을 지정하는 미디어쿼리.

• 미디어쿼리는 콤마(,)로 구분해 나열 가능.

 

@import 예제 - 미디어가 print인 경우에만 CSS 가져오기

 

@import "print.css" print;

 

@import 예제 - 미디어가 screen이고 뷰포트가 최대 768px 경우에만 CSS 가져오기

 

@import "mobiletablet.css" screen and (max-width:750px );

 

@import 예제 - PHP basename(__FILE__) 사용해 가져오기

(예) /hz 폴더에 아래 4개의 파일 존재 가정 시. a.php 파일 상단에 a.css 파일을 , b.php 파일 상단에 b.css 파일을 추가 경우.

• /hz/a.css
• /hz/a.php
• /hz/b.css
• /hz/b.php

 

<style>@import "./<?php basename(__FILE__,".php");?>.css";</style>

또는,

<style>@import url("./<?php basename(__FILE__.".php");?>.css");</style>