CSS 심화 (2)
Grid function (container 에 사용)
repeat(반복되는 갯수, 단위)
repeat(2, 100px 200px)... (100px|200px) cell 을 두번 반복 (100 | 200 | 100 | 200)minmax(최소 너비, 최대 너비)... window 크기가 커지거나 줄어들 때 반응fit-content(최대 너비)... 너비를 설정하지 않는다면, 칸의 너비는 내부 content 를 따라감 (내부 content 로 너비를 최대한 맞추되, 최대너비 이상으로 더 커지지 않음)
단위
fr... 공간 너비(사용 가능한 너비) 비율 (빈 공간을 너비 비율에 맞게 차지하도록 함)min-content... 내부의 가장 긴 content(단어 등) / 최소한의 content 너비에 맞게 사이즈를 조정함
ex) content 의 가장 긴 영어 단어(띄어쓰기 여부) 길이에 맞춰 너비를 조정함 (한글은 한글자가 단어취급)max-content... 각각의 content의 최대 너비를 활용해서 칸을 만듦
ex) text content 를 한줄로 길게 출력word-break... 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로우 할 때 줄바꿈 여부를 지정
noraml(default) ... 기본 규칙 (한글은 한글자로 최적화가 되어있지 않음)
keep-all ... 줄을 바꿀 때 단어를 끊지 않음 (한중일 텍스트에 최적화된 방법 / 다른 언어에서의 normal 과 동일)auto-fit... repeat 함수와 같이 사용할 수 있으며, 자동으로 열 / 행 의 갯수를 최적화하여 결정 (지정할 수 있는 최대 너비를 우선으로 결정)
auto-fill... 지정할 수 있는 최소 너비를 우선으로 결정
auto-fit 과 auto-fill 은 하나의 열 / 행 으로 정렬되어 있을 때 차이점이 나타나게 됨
Transform 3D
transform:
rotate(deg)... deg 만큼 회전
perspective(단위)... 요소의 원근감을 제어 (단위: 원근 거리) / 3차원 변환 함수에서만 효과가 나타남 (기본 변환함수 rotate 는 2차원 rotateX, rotateY 등을 통해 사용 가능하다.)transform-origin: x축 값 y축 값... 회전하는 기준 축 지정
columns
columns: column 속성을 지정할 수 있는 단축속성 (columns: width count;)
column-count: 단의 갯수를 지정
cloumn-width: 단의 높이 (자동으로 최적의 높이를 먼저 지정함)column-rule: 단과 단 사이의 border 속성으로 볼 수 있음 / 단축속성 (column-rule: 4px solid red;... 색상의 기본값으로는 글자의 색상을 상속받음)column-gap: 단과 단 사이의 거리를 지정 (gap으로 동일하게 사용 가능)
filter
- filter 함수 / 각 함수들을 띄어쓰기로 구분해서 동시에 적용할 수 있음
blur(px 단위)... 요소의 내용을 블러(흐림) 처리
grayscale(% 단위)... 무채색의 정도 / default: 100% (완전 무채색)
invert(% 단위)... 색상을 반전시키는 정도 / default: 100% (완전한 반전효과)
drop-shadow(x축거리 px, y축거리 px, 그림자의 blur 정도 %, 색상)... 그림자를 생성 / 그림자의 색상의 기본값은 글자 색상을 상속받음
brightness(number)... 이미지의 명도를 지정 / default: 1 (값이 커질수록 더 밝아짐)
conterast(% 단위)... 색상의 대비를 조정 / default: 100% (값이 커질수록 대비가 더 커짐)
opacity(% 단위)... 투명함의 여부를 조정 / default: 100% (값이 작아질수록 투명해짐)
saturate(% 단위)... 채도를 결정 / default: 100% (값이 작아질수록 무채색에 가까워짐)
sepia(% 단위)... sepia (바랜 정도) 를 조정 / default: 100% (값이 작아질수록 원래 이미지에 가까워짐)
hue-rotate(deg 단위)... 원형의 색상도에 해당하는 색조로 조정 backdrop-filter... 자기 자신에 필터를 적용하는게 아닌, 요소의 배경에 보여지는 영역에 필터를 적용함 / 기본적으로 filter 에서 사용되는 함수를 모두 사용 가능
아직은 호환성이 좋지 않음
CSS의 변수
- 변수 선언:
--변수명와 같이 앞에 하이픈(-) 을 두 번 붙여줌
선언된 요소의 하위 요소로 변수가 상속된다. 즉, 유효범위를 가진다.
var(변수명, 초기값)의 형식으로 선언함과 동시에 바로 사용할 수 있다.
// :root ... 전역 등록 개념의 최상위 요소를 선택하는 가상 클래스 선택자
:root {
--color-primary: royalblue;
--color-danger: red;
--color-success: yellowgreen;
}
// 변수의 사용
// 아래의 예시는 실행되지 않음 ...
background-color: --color-primary;
// var() 라는 함수 필요
background-color: var(--color-primary);- 변수의 재할당: 재할당 시킨 변수는 다른 요소(유효 범위 밖)에 영향을 주지 않음
@surpports
- @supports: 특정한 css 기능을 브라우저의 지원 여부에 따라 다른 스타일을 선언할 수 있는 방법 및 규칙
@supports (display: grid) { style ... }: 브라우저가display: grid를 지원하는 경우의 스타일 지정
@supports not (display: grid) { style ... }: 브라우저가display: grid를 지원하지 않는 경우의 스타일 지정 @supports (기능) and (기능) and ...와 같이 여러 기능들을 명시할 수 있음.
and: 모든 기능들을 지원해야 적용
or: 기능 중에서 어느 하나만 지원한다면 적용@supports (selector(태그 / 클래스))... 선택자가 특정 브라우저에서 동작하는지를 확인
@media
- 반응형 레이아웃을 만들 때 주로 사용되는 미디어쿼리
@media 타입 and (기능) { style ... }- 타입의 기본값: all ... 모든 미디어 타입을 의미 (기본값이므로 생략 가능
@media (기능) { style ... })
그러나, not 이라는 연산자를 사용한다면 생략하지 않고 반드시 명시해주어야 함!
@media screen and (max-width: 780px) and (min-width: 480px) {
// style ...
}
// screen 의 width 가 780px 이하이고, 480px 이상일 때의 스타일 지정- 파일 단위로 미디어를 사용하려면 html의 link 태그에서 media 속성을 추가함
<link ... href="main-md.css" media="all and (max-width: 700px)">
SCSS
SCSS 개요
- Sass(SCSS) ... CSS Prepocessor (전처리 도구)
- 전처리 도구는 직접 동작을 할 수 없기에 작업의 효율성을 위해 전처리 도구를 활용하되, 동작할 수 있는 CSS 로 변환작업을 해주어야 함(Node.js 환경 필요)
- SCSS: 중괄호와 세미콜론으로 영역을 구분짓는 문법. 사용을 적극적으로 권장
Sass: 중괄호와 세미콜론을 생략하는 문법 ... 들여쓰기 개념이 중요해짐
- 설정 ... dart-sass v1.32 / SCSS
SCSS 주석 / 중첩
주석
- 기존 CSS 의 주석 (
/* */) 에서 추가로//주석을 사용할 수 있음 /* */: CSS 로 변환 시, 주석처리 유지하여 컴파일됨 ... Sass 에서는 들여쓰기 주의해서 사용해야함//: CSS 로 변환 시, 컴파일 결과로 출력되지 않고 없어짐
중첩
- 조상요소를 통해 자손요소들의 스타일을 한번에 묶어 관리할 수 있음
// SCSS
.container {
// ...
.item {
// ...
> span {
// ...
}
}
}
// 기존 CSS
.container {
// ...
}
.container .item {
// ...
}
.container .item > span {
// ...
}
&... 상위 선택자 참조
// SCSS
.fs {
&-sm { ... }
&-md { ... }
&-lg { ... }
}
// CSS
.fs-sm { ... }
.fs-md { ... }
.fs-lg { ... }- 변수:
$변수명 = 값;으로 사용 가능 ... 유효한 범위를 가지고 있으므로 사용에 유의 @at-root 선택자 { style ... }: 범위를 벗어나게 함 - 루트경로로 이동 (범위 외부에서 변수를 사용하고 싶을 때 사용될 수 있음)- 반복되는 키워드 또한 범위를 통해 묶을 수 있음 (ex. flex-grow, flex-shrink, flex-basis 의 경우 flex로 묶고 내부에서 grow: ... , shrink: ... 와 같이 관리할 수 있음)
- 다중 선택자 개념 존재
변수
$변수: 값... 숫자, url 문자열, 색상 등 다양한 값 지정 가능 / 값의 재활용
유효 범위를 가짐 ... 전역 변수 혹은 중괄호 범위 안에서만의 유효 범위$변수: 값 !global;... !global 키워드를 통해 지역변수를 전역변수화 시킬 수 있음- 다른 영역에서 재할당을 통한 사용이 가능함 ... 의도치 않게 다른 영역에 영향을 줄 수 있으니 사용에 주의
$변수: 값 !default... 지역변수에 값을 넣어 사용하고 싶은데 동일한 이름의 변수가 존재하며 값이 들어 있다면, 현재 선언한 값은 사용하지 않고 이미 존재했던 변수의 값을 사용함.
부트스트랩을 사용할 때, 이미 개발자가 작업해놓은 전역변수들을 부트스트랩이 덮어쓰지 않게 하기위해 사용된 개념
보간
#{$변수}... 자바스크립트의 보간(${변수}) 와 비슷하게 사용됨
선택자에도 보간을 사용할 수 있음
데이터의 종류
Number: 숫자 데이터
1, .2, 20px(단위가 있는 모든 숫자 데이터), 2fr, ...String: 문자 데이터
bold, "./images/", ...Color: 색상 데이터
blue, rgba(255,0,0,.5), #fff, ...Boolean: true / false (조건문 존재)Null: 특정 속성의 값으로 사용되면 CSS 로 컴파일되지 않음!List: 배열 데이터 ... 반복 / 특정 값 인덱싱 처리에 사용됨 (숫자, 문자 데이터 등 ...)
$list: (10px, 20px, 30px);
$list: 10px, 20px, 30px;
$list: 10px 20px 30px;Map: { key: value } 데이터
$map: { a: apple, b: banana, c: cherry }
연산자의 종류
산술 연산자
+, -, *, /, %
/... 단축속성에서 값의 범위를 구분해주는 역할로 사용
나누기 연산자의 의미로 사용하기 위해서는
1) 소괄호로 묶어주거나(권장) 2)변수를 사용, 3) 다른 연산자와 같이 사용해야 함
ex)top: (20px / 2); OR top: $a / 2; OR top: 20px / 2 + 10px;calc(산술): 서로 다른 단위를 연산하기 위해 사용함 (기본적으로 다른 단위끼리 연산을 할 수 없음 ex. 100% - 50px)
비교 연산자
==, !=, <, >, <=, >=
- if / else 문의 사용
@if ($a >= 100px) {
width: $a;
} @else {
width: 80px;
}논리 연산자
and, or, not
- if / else 문의 조건에 사용
회고
기본 CSS 의 심화 내용과 SCSS 에 대한 공부를 하였다.
SCSS 도 이전에 가볍게 배우긴 했지만, 사용하지 않은지 조금 되어서 잊고 있었던 부분들이 꽤 있었던 것 같다.
그래도 한번 배워둔 개념이라 상당 부분이 다시 기억나게 되어 다행인 것 같다.
아직까지는 다행히 큰 어려운 부분은 없지만, 잘 사용할 수 있게끔 연습하는 시간을 가져야겠다.
프론트엔드