728x90
1. @import 규칙
1.1. 개요
- 핵심
css 파일 내부에 css 파일을 추가가능하도록 해준다.
- 사용 경우
- css file의 규모가 커질시 코드를 쉽게 알아보기 위해 파일을 분리할 경우 사용
- css file을 제공하는 외부 css를 받아올 때 사용
외부 font 받아오는 경우
- 사용 방법
- @import url();
- 외부에서 호스팅되는 CSS 파일을 가져오는 방식
- @import "";
- 현재 파일과 같은 경로에 있는 CSS 파일을 가져오는 방식
- @import url();
1.2. 예시
- css file의 규모가 커질시 코드를 쉽게 알아보기 위해 파일을 분리할 경우
/* 현재 code block은 style.css 내부*/
/* default value */
@import "reset.css";
@import "variable.css";
/* API */
@import url("https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Foundation&family=Edu+SA+Beginner&display=swap");
/* components */
@import "components/status-bar.css";
@import "components/nav-bar.css";
@import "components/screen-header.css";
@import "components/alt-screen-header.css";
@import "components/user-component.css";
@import "components/badge.css";
@import "components/icon-raw.css";
@import "components/no-mobile.css";
- css file을 제공하는 외부 css를 받아올 때 사용 - font
- google font로 부터 받아온 css font file
- 너무 많이 받아와도 성능이 느려지니깐 필요한 것만 받아오기
@import url("https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Foundation&family=Edu+SA+Beginner&display=swap");
<!--만약 @import 사용 안할 시
html file에 tag 형식으로 넣어야 한다.-->
<link href="https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Foundation&family=Edu+SA+Beginner&display=swap"
rel="stylesheet"
type="text/css">
2. @font-face 규칙
- @import에서 font를 받아오는 경우와 달리
웹 폰트 업체에서 지원하지 않는 폰트를 자체적으로 제공하는 경우 사용하는 규칙 - 그냥 내가 직접 만든 폰트 제공할 때 사용하는 규칙
- 있는 폰트 사용할 때 써도 상관은 없지만, font file을 리소스에 넣어야함
@font-face {
font-family: '내가 정한 Font 이름';
src: url('내가 만든 font file 저장해놓은 경로 - client 컴퓨터에 없는 경우 해당 경로의 font를 내려받음');
src: local('client computer 내부에 있는 font 선택하는 함수')
}
*{
font-family: '내가 정한 Font 이름';
}
3. @media 규칙
- html 문서가 적절한 형태를 갖추게 만들어주는 규칙
- 요즘 반응형 웹에서 아주 핫하게 사용 중
3.1. media property 직접 사용하기
- 해당 media 의 상황에 맞는 css가 적용이 된다.
<link rel="stylesheet" href="style.css" media="screen" />
<link rel="stylesheet" href="style1.css" media="print" />
3.2. @media(미디어 쿼리)를 이용해서 위와 같은 css 적용하기
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<link rel="stylesheet" href="style1.css" />
</head>
<body>
<p>alsdkjflasfjablas;aosdifmas;o 1234567890</p>
</body>
</html>
@media screen {
html {
height: 100%;
background: black;
}
body {
color: white;
font-family: Arial, Helvetica, sans-serif;
}
}
@media print {
p {
text-align: center;
color: red;
font-family: sans-serif;
}
}
- 참고
- @import와 media queary 병행 사용 가능
- @import url(css 경로) screen;
- @import url(css 경로) print;
- @import와 media queary 병행 사용 가능
4. 반응형 웹
4.1. media query property
| property | description |
| width | 화면 너비 |
| height | 화면 높이 |
| device-width | 장치 너비 |
| device-height | 장치 높이 |
| orientation | 장치 방향 |
| device-aspect-ratio | 화면의 비율 |
| color | 장치의 색상 비트 |
| color-index | 장치의 표현가능 최대 색상 개수 |
| monochrome | 흑백 장치의 픽셀당 비트 수 |
| resolution | 장치의 해상도 |
- orientation 제외한 모든 propertysms min , max 접두사 사용 가능
- 사용법
- 기본
@media screen{} - 속성 사용
and를 이용해서 속성 사용
and로 계속 연결 가능
@media screen and '4.1. 속성'{} - 접두사 붙인 속성 사용
아래 code 예시
- 기본
/* 화면 너비 0px~ 767px */
@media screen and (max-width: 767px) {
}
/* 화면 너비 768px ~ 959px */
@media screen and (min-width: 768px) and (max-width: 959px) {
}
/* 화면 너비 960px ~ 무한 */
@media screen and (min-width: 960px) {
}
- 특징
- 768px : 아이패드 수직 상태 너비
- 960px : 일반 웹 페이지 너비
- 어지간하면 위의 px로 디바이스별 @media screen 해결 가능
4.2. orientation
- 방향 전환 property
- portrait: 세로모드
- landscape: 가로모드
/* 세로모드 */
@media screen and (orientation: portrait) {
html {
background: red;
color: white;
font-size: bold;
}
}
/* 가로모드 */
@media screen and (orientation: landscape) {
html {
background: green;
color: white;
font-size: bold;
}
}
4.4. 정리
- @media-query는 반응형 웹사이트에 유용하게 사용된다.
- vscode로 실습시, 자동완성 및 어떤 종류의 propertye들일 존재하는지 알려주지 않기 때문에 위의 예제를 기본으로 원리만 파악한 후 필요시 찾아서 사용하는 것이 효율적일 듯하다.