Sass (Synthetically Awesome StyleSheetes)

Sass는 CSS전처리기로 변수, 상소그 혼합, 중첩 등의 다양한 기능을 제공합니다.

CSS 전처리기(preprocessor) : 자신만의 특별한 문법을 통해 CSS를 생성하는 프로그램

 

SCSS 

SCSS는 Sass 3 버전부터 새롭게 등장하였다.

Sass의 모든 기능을 지원하는 Superset으로, CSS와 거의 비슷한 문법으로 Sass의 기능을 사용할 수 있어 편리합니다.

 

Sass와 SCSS의 차이점

  • Sass: 중괄호가 아닌 들여쓰기를 사용한다.
  • SCSS: CSS처럼 {} 와 ; 을 사용한다.

 

1. SCSS의 자료형

Sass, SCSS는 다음 아래와 같은 자료형들을 지원하며, 속성값으로 사용할 수 있다.

자료형 설명
Numbers 숫자 타입
Strings 문자열 타입
Nulls null 값을 넣을 수 있다.
null 값을 속성값으로 사용하면 해당 코드를 컴파일하지 않는다.
Boolean 논리형 타입
Color 색상 표기를 위한 타입
이름표기, 16진수, rgb(rgba)방식을 사용한다.
Lists 값의 목록들을 나타낼 수 있는 타입
Maps 키: 값 쌍의 값의 집합 타입
$boolean: true;
$string: hello;
$color: red;
$number: 720;
$list: red, orange, yellow, green, blue;
$map: (
	l: light,
	d: dark,
);

 

 

2.  Nesting (중첩)

Nesting을 통해 상위 선택자의 반복을 줄일 수 있다.

복잡한 구조를 더 편리하게 개선할 수 있다.

 

/* SCSS */
.outer-container {
	width: 200px;
	height: 200px
    
    .inner-container {
    	width: 100px;
        height: 100px;
    }
}


/* Compile to CSS */
.outer-container {
	width: 200px;
	height: 200px;
}

.outer-container .inner-container {
	width: 100px;
	height: 100px;
}

 

3. & (상위 선택자 참조)

중첩 내부에서 & 키워드는 상위(부모)선택자치환된다.

/* SCSS */
.container {
	width: 100px;
    
    &.box {
    	width: 50px;
        color: blue;
    }
}

/* Compile to CSS */
.container {
	width: 100px;
}

.container .box {
	width: 50px;
	color: blue;
}

 

4. Variables (변수)

반복적으로 사용되는 값을 변수로 지정할 수 있다.

변수 선언 방법은 변수이름 앞에 $ 를 붙이면 된다.

/* SCSS */
$primary: #010101;
$profile-images: "/assetes/images/";
$icon-width: 24px;
$icon-height: 24px;

.icon {
	width: $icon-width;
	height: $icon-height;
    background: $primary;
}


/* Compile to CSS */
.icon {
	width: 24px;
	height: 24px;
    background: #010101;
}

 

5. #{}

#{}는 리터럴처럼 변수 값을 넣을 수 있게 해준다.

/* SCSS */
$profile: "profile.png";
@import url("/assets/images/#{$profile}");

/* Compile to CSS */
@import url("/assets/images/profile.png");

 

6. 연산자

레이아웃을 디테일하게 디자인할 때 유용하게 사용할 수 있다.

+ 더하기  
- 빼기  
* 곱하기 하나 이상의 값이 반드시 숫자
/ 나누기 오룬쪽 값이 반드시 숫자
% 나머지  

 

 

7. Mixin

Mixin은 재사용할 CSS 스타일을 정의할 수 있는 기능이다.

@mixin을 통해 스타일을 선언한다. 

@include를 통해 사용한다.

 

/* @mixin 선언 */

@mixin large {
	font: {
    	size: 2rem;
        weight: bold;
    }
    color: red;
}

/* @include 사용 */
h1 {
	@include large
}

 

8. 함수

함수를 정의하여 사용할 수 있다.

Mixin과의 차이점은 반환 값이 다르다는 것이다.

Mixin은 지정한 스타일을 반환하고, 함수는 계산된 특정 값을 반환한다.

 

@function column($number: 1, $columns: 12) {
	@return $max-width * ($number / $columns);
}

.box-container {
	width: $max-width;
    
    .box1 {
    	width: columns(); // 1
    }

    .box2 {
        width: columns(8);
    }
}

 

 

9. 조건문

if(조건문, 참, 거짓);

조건문이 참인 경우 참값을, 거짓인 경우 거짓 값을 할당

$width: 500px;

div {
	width: if($width > 300px, $width, null);
}

 

 

10. @if, @else, @else if

조건에 따른 분기 처리 가능

$color: yellow;

div {
    @if $color == red {
    	color: #adadad;
    } @else if $color == orange {
    	color: #bdbdbd;
    } @else {
    	color: #ababab;
    }
}

 

11. 반복문 - @for

스타일을 반복적으로 출력

through와 to에 따라서 종료 조건이 달라진다.

  • from a throudh b : a부터 b까지 반복(b 포함)
  • from a to b : a 부터 b 직전까지 반복
@for $i from 1 through 3 {
	.through:nth-child(#{$i}) {
    	width: 20px * $i;
    }
}

 

 

12. 반복문 - @each

List또는 Map 데이터를 반복할 때 사용하는 반복문

/* List */
@each $animal in puma, sea-slug, egret, salamander {
	.#{$animal}-icon {
    	background-image: url('/assets/images/#{$animal}.png');
    }
}

/* Map */
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
	#{$header} {
    	font-size: $size;
    }
}

 

13. 내장함수

SCSS에서는 다양한 내장함수를 지원한다.

 

Sass: Built-In Modules

Compatibility: Dart Sass since 1.23.0 LibSass ✗ Ruby Sass ✗ Only Dart Sass currently supports loading built-in modules with @use. Users of other implementations must call functions using their global names instead. Sass provides many built-in modules

sass-lang.com

 

728x90

'WEB > CSS' 카테고리의 다른 글

[ Web : CSS ] positon  (0) 2022.07.27
[ Web : CSS ] flexbox  (0) 2021.11.29
[ Web - CSS media queries ] 반응형 웹  (0) 2021.11.17
[ Web - SCSS ] & Ampersand  (0) 2021.11.16

position

positon property는 요소의 위치를 결정하는 속성이다. top, bottom, left, right 속성들을 함께 사용하여 요소의 위치를 지정할 수 있다.

position property의 값으로는 아래 다섯개의 값을 가질 수 있다.

 

1. static

2. relative

3. absolute

4. fixed

5. sticky

 

position 속성의 각 값들에 대해 살펴볼 것이다.

 

1. static

static은 position 속성의 기본 값으로 position 속성값을 지정하지 않았을 때와 같다. 일반적으로 요소 배치 순서에 따라 배치되며 bottom, left, top, right, z-index속성들에 대해 아무런 영향을 받지 않는다. 

따라서 static은 왼쪽에서 오른쪽, 위에서 아래로 배치되며, 부모 요소 내의 자식 요소로 존재할 경우 부모 요소의 위치를 기준으로 배치된다.

 

2. relative

relative는 요소를 문서의 흐름에 따라 배치를 한다. static과 다르게 자기 자신을 기준으로 top, right, left, bottom의 값에 따라 오프셋을 적용한다. 오프셋은 다른 요소에는 영향을 주지 않는다. 그렇기 때문에 페이지 레이아웃에서 요소가 차지하는 공간은 static일때와 동일하다. static과 relative의 차이는 좌표 프로퍼티(right, top, bottom, left)의 동작 여부 뿐이다.

 

3. absolute

relative와 static과 다르게 요소가 일반적인 문서의 흐름에 따라 위치하지 않는다. 부모 요소 또는 가장 가까이 있는 조상 요소 (static 제외) 를 기준으로 좌표 프로퍼티 ( top, bottom, right, left )만큼 이동한다. 즉, position이 relative, absolute, fixed 로 선언되어 있는 가장 가까운 부모 또는 조상 요소를 기준으로 요소의 위치가 결정된다.

만약 부모 또는 조상 요소가 static인 경우 body tag를 기준으로 위치하게 된다. 

다른 요소가 먼저 위치를 점유하고 있더라도 뒤로 밀리지않고 위에 덮어씌운다. ( 이런 특성을 부유 또는 부유 객체라고 한다. )

 

4. fixed 

부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표 프로퍼티( top, bottom, right, left )을 사용하여 위치를 이동시킨다. 

스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.

아래 사진의 빨간네모에 위치한 버튼 처럼 항상 고정된 자리에 위치하는 것들은 fixed를 사용하면 된다.

예시

5. sticky

요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤되는 조사오가 표 관련 요소를 포함한 컨테이닝 블록을 기준으로 top, right, left, bottom의 값에 따라 오프셋을 적용한다. 오프셋은 다른 요소에는 영향을 주지 않는다.

➡️ 많이 사용해본 적이 없어서 잘 이해가 가지 않는다. 다음에 더 자세히 알아봐야 겠다.

 

728x90

'WEB > CSS' 카테고리의 다른 글

[SCSS] SCSS 문법 정리  (0) 2024.06.27
[ Web : CSS ] flexbox  (0) 2021.11.29
[ Web - CSS media queries ] 반응형 웹  (0) 2021.11.17
[ Web - SCSS ] & Ampersand  (0) 2021.11.16

flexbox

flexbox는 viewport( 웹페이지가 사용자에게 보여지는 영역 )나 요소의 크기가 불명확 또는 동적으로 변하는 경우 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다.

아래는 flexbox 사용 예시이다.  

.flex-container{
	display : flex;
}

.flex-items{
	<!-- flex item에 대한 css 속성 설정 -->
    width : 50px;
    height : 50px;
}

display : flex 속성이 적용된 요소는 flex -container가 되고, flex-container의 자식 요소들은 flex-item이 된다. 

flex item은 메인축에 따라 결정되는데 메인축의 방향은 flex-direction 속성으로 결정되며 기본값은 row이다.

 

flex-container 속성

1. flex-direction ( main axis )

- row ( 기본값 ) : 왼쪽 -> 오른쪽

.flex_container{
    display : flex;
    flex-direction : row;
    width : 100%;
    height : 50px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

flex-direction : row

- column : 위 -> 아래

.flex_container{
    display : flex;
    flex-direction : column;
    width : 100%;
    height : 50px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

flex-direction : column

- row-reverse : 오른쪽 -> 왼쪽

.flex_container{
    display : flex;
    flex-direction : row-reverse;
    width : 100%;
    height : 50px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

flex-direction : row-reverse

- column-reverse : 아래 -> 위

.flex_container{
    display : flex;
    flex-direction : column-reverse;
    width : 100%;
    height : 50px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

결과에서 flex-item 2는 반정도만 보이고, flex-item3가 안보이는 이유는 flex-container의 height이 50px로, flex-item 3개의 크기보다 작기 때문에 더이상 보이지 않는다. height의 값을 더 크게 해주면 flex-item3까지 모두 보이는 것을 확인할 수 있다. 

flex-direction : column-reverse

2. flex-wrap

위에서 본 flex-direction 예제에서는 flex-wrap값을 따로 지정해주지않아 기본값인 nowrap으로 설정되어서 flex-item이 flex-container의 크기를 벗어나 한줄에 배치가 되어 있는 것을 확인할 수 있다. 

 

- nowrap ( 기본값 ) : flex-item이 부모요소인 flex-container를 벗어나더라도 한 줄에 배치

- wrap : flex-item이 부모요소인 flex-container를 벗어나면 여러 행에 걸쳐서 배치된다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    width : 100px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

flex-wrap : wrap;

- wrap-reverse : 여러행에 걸쳐 요소가 나열되는 순서가 시작점과 끝점이 반대로 되어 배치된다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap-reverse;
    width : 100px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

flex-wrap : wrap-reverse;

3. justify-content

justify-content는 메인축 방향으로 item들의 정렬을 결정하는 속성이다.  

- flex-start ( 기본값 ) : item들을 시작점으로 정렬 ( flex-direction 기준으로 ) 

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    width : 200px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

justify-content : flex-start;

- flex-end : flex-item들을 끝점으로 정렬

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-end;
    width : 200px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

justify-content : flex-end;

- center : item 들을 가운데로 정렬

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : center;
    width : 200px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

justify-content : center;

- space-between : item들의 사이에 균일한 간격을 만들어준다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : space-between;
    width : 200px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

justify-content : space-between

- space-around : item들의 둘레에 균일한 간격을 만들어줌

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : space-around;
    width : 200px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

justify-content : space-around;

- space-evenly : itme들 사이와 양 끝에 균일한 간격을 만들어 준다. 

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : space-evenly;
    width : 200px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

justify-content : space-evenly;

4. align-items

align-itmes 속성은 cross-axis 항목의 정렬을 제어한다. cross-axis는 flex-direction 속성 값과 반대이다. 

- normal ( stretch ) ( 기본값 ) : 아이템들이 수직축 방향으로 끝까지 늘어난다. 

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-items : stretch;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

align-items : stretch;

- center : item들을 가운데로 정렬

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-items : center;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

align-items :center;

- flex-start : item들을 시작점으로 정렬한다. flex-direction이 row일 경우 위, column일 경우 왼쪽

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-items : flex-start;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

align-items : flex-start;

- flex-end : item들을 끝점으로 정렬한다. flex-direction이 row일 경우 아래, column일 경우 오른쪽

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-items : flex-end;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

align-items : flex-end;

5. align-content

flex-wrap 속성이 wrap으로 설정된 상태에서, item들의 행이 2 이상일 경우 수직축 방향 정렬을 결정하는 속성이다.

- stretch ( 기본값 ) 

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : stretch;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

align-content : stretch;

- flex-start 

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : flex-start;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

align-content : flex-start;

- flex-end 

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : flex-end;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

align-content : flex-end;

- center 

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : center;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

align-content : center;

- space-between 

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : space-between;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

align-content : space-between;

- space-around 

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : space-around;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

align-content : space-around;

- space-evenly 

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : space-evenly;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

align-content : space-evenly;

 

flex-item 속성

1. flex-basis

flex-basiss 속성은 flex-item의 기본 크기를 설정하는 속성이다.flex-direction이 row일 경우에는 너비의 기본 크기를 지정하고, flex-direction속성이 column일 경우에는 높이의 기본 크기를 지정한다.

기본 크기를 지정해주는것이기 때문에 원래 flex-item의 크기가 flex-basis로 지정한 값보다 작다면 flex-basis에 맞춰서 크기가 늘어나지만 flex-item의 크기 값이 flex-basis로 설정한 값보다 크다면 원래 item의 크기로 유지된다. 

만약 모든item들의 크기를 하나로 고정하고 싶을 경우에는 그냥 width를 사용하여 속성을 설정해주면 된다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : space-evenly;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
    flex-basis : 100px;
}

flex-basis : 100px;

 

2. flex-grow

flex-grow 속성은 flex-basis 속성으로 정해놓은 크기 값보다 커질 수 있는지를 결정하는 속성으로 flex-grow의 기본값은 0이다. flex-grow속성이 적용되어 있지 않거나 값이 0 인 경우에는 flex-container의 너비가 flex-item들의 너비의 합보다 크더라도 여백을 매워주지 않는다. 아래 예시 그림을 참고하면 더 쉽게 이해된다. 

flex-grow 설정 x

만약 flex-grow값을 1로 설정한 경우 아래 그림과 같이 위 그림에서는 남았던 container의 여백을 item들의 너비를 넓혀서 채우게 된다. 모든 item들에게 flex-grow : 1 속성을 줬기 때문에 모두 같은 크기로 여백을 채우게 된다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : space-evenly;
    width : 1000px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    flex-grow : 1;
    padding : 5px;
    border: 1px solid black;
    flex-basis : 100px;
}

flex-grow : 1;

 

flex-item5 에만 flex-grow 속성을 주게 되면 아래와 같은 결과가 나오게된다. 다른 flex-item 1,2,3,4의 크기는 flex-basis로 설정한 100px; 이 되고, flex-item5 의 경우 flex-grow 값을 1로 주었기 때문에 container의 여백을 혼자서 모두 채우게 너비가 커지게 된다. container 의 너비는 1000px, flex-item 1,2,3,4 는 각각 flex-basis가 100px 임으로 총 400px이기 때문에 flex-item5의 너비는 600px이 되게 된다. 

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : space-evenly;
    width : 1000px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
    flex-basis : 100px;
}

.flex_item5{
    color : red;
    flex-grow : 1;
    padding : 5px;
    border: 1px solid black;
    flex-basis : 100px;
}

flex-item5 =&gt; flex-grow : 1;

3. flex-shrink 

flex-shrink는 flex-grow와 반대로 flex-basis 속성으로 정해진 값보다 작아질 수 있는지를 결정하는 속성이다. flex-shrink 속성의 기본값은 flex-grow 속성과 다르게 기본값은 1 로, flex-basis보다 작아질 수 있다. 

아래 예시를 보면 flex-item5에만 flex-shrink 속성 값을 0으로 주어 다른 flex-item1,2,3,4 와 달리 너비가 유연하게 줄어들지 않고 width : 100px 값그대로 고정되어 있는 것을 확인할 수 있다. 그와 반대로 flex-item 1,2,3,4의 경우 container 너비가 60px로, flex-basis 값보다 20px 작아져 그에 맞춰 너비가 줄어든 것을 확인할 수 있다. 

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    width : 60px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
    flex-basis : 80px;
    flex-shrink : 1;
}

.flex_item5{
    color : red;
    width : 100px;
    flex-shrink : 0;
    padding : 5px;
    border: 1px solid black;
}

flex-shrink

출처 :

https://studiomeal.com/archives/197

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Flexbox

https://d2.naver.com/helloworld/8540176

 

flex - CSS: Cascading Style Sheets | MDN

flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다.

developer.mozilla.org

 

728x90

'WEB > CSS' 카테고리의 다른 글

[SCSS] SCSS 문법 정리  (0) 2024.06.27
[ Web : CSS ] positon  (0) 2022.07.27
[ Web - CSS media queries ] 반응형 웹  (0) 2021.11.17
[ Web - SCSS ] & Ampersand  (0) 2021.11.16

CSS media queries

media queries 는 단말기의 유형과 어떡 특성이나 수치 ( 화면 해상도, view port, 너비 등 ) 에 따라 웹 사이트나 앱의 스타일을 수정할 때 사용.

media queries는 CSS3에 포함되어 있으며, media type ( screen, tv, print ... ) 와 하나 이상의 expression으로 구성된다

 

ex) 

아래 예시의 경우 width (너비) 가 500px 이하 일 때의 배경색상을 white로 적용한다는 의미이다. 

@media ( max-width : 500px ) {
	background : white;
}

 

 

 

 

출처 :https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries

 

728x90

'WEB > CSS' 카테고리의 다른 글

[SCSS] SCSS 문법 정리  (0) 2024.06.27
[ Web : CSS ] positon  (0) 2022.07.27
[ Web : CSS ] flexbox  (0) 2021.11.29
[ Web - SCSS ] & Ampersand  (0) 2021.11.16

+ Recent posts