📚 23.11.07
- CSS - 변수, @supports,
- SCSS - 주석, 중첩, 변수, 연산자
- 명시도
CSS
변수
--변수명 : 값;
속성 : var(--변수명);
@supports
기능 쿼리. 지정한 하나이상의 기능을 브라우저가 지원하는지에 따라 스타일을 제공
@supports (disply : grid) {
@supports not (disply : grid) { //지원하지 않는 경우 제공해라!
//여러개 명시 가능
@supports (disply : grid) and (display: flex) {
@supports !((disply : grid) and (display: flex)) {
@supports (disply : grid) or (display: flex) {
// 변수규칙 사용가능한지 확인.
@supports (--color-primary : orange){
.container{
color: var(--color-primary, red);
}
}
// 여기서 결과는 빨강색이다!! (기능)에 명시한 것은 이 '기능'이 사용가능한지일뿐이다.
// 동작과는 관련이없다!! --color-primary라고 변수규칙이 가능한지만 확인
// var함수내의 첫번째 인자는 그냥 빈값인 상태인거다.
// 그래서 디폴트의 red가 적용됨.// 선택자 지원여부를 확인하려면 selector()함수이 용
@supports (selector(.container)){
// 예시 ) :dir이라는 가상선택자는 파이어폭스에만 동작
@supports (selector(:dir(ltr))){
.container:dir(rtl){
color: red;
} //글자 방향이 right to left인 요소의 색을 빨갛게 한다
} @media
미디어 쿼리. 반응형에 사용
@media 타입 and (기능) { 스타일 }
@media screen and (max-width : 700px){
// 넓이가 최대 700px 일때까지 적용
.box{
width: 200px;
}
}- 타입
- all (디폴트) ← 명시없을 때 적용. (기능) {스타일}만 적용. 대부분에 사용
- screen
- tv
- print : 인쇄시 스타일
- 기능
- and 연산자로 여러개 지정 가능
- not 연산자로 부정 가능. 단 타입 명시 필요! 맨앞에서!
- (orientation: portrait) : 세로 > 가로 인 경우 = 일반적인 모바일 화면
- (orientation: landscape) : 가로 > 세로 인 경우 = 모바일 화면 눕혔을 때
@media (max-width : 700px) and (min-width: 400px) {
// 넓이가 최소 400px ~ 최대 700px 일때 적용
@media not all and (max-width : 700px) and (min-width: 400px) {
// 넓이가 최소 400px ~ 최대 700px 일때 적용
여러개의 미디어 쿼리는 ,(쉼표)로 구분
@media
not all and (max-width : 700px) and (min-width: 400px),
tv and (display-mode: fullscreen) {Sass(SCSS)
Sass : Syntactically Awesome Style Sheets [문서]
오래되어 안정적인 Sass에 CSS문법을 더한 SCSS 추천!
SCSS, Sass의 가장 큰 차이는 중괄호 유,무 그리고 세미콜론 유,무 이다
주석
기존 CSS처럼 /* 내용 */ 과 // 도 사용 가능.
단 //를 쓰면 컴파일 시 사라짐.
++ Sass의 경우 들여쓰기 위치까지 맞춰야 여러줄 주석 가능
중첩
괄호 안에서 중첩 가능
선택자, 가상선택자, & 도 중첩에서 가능
- & 활용
상위 선택자 참조
- 변수
$ 기호를 사용하여 변수를 할당할 수 있다. 선언된 스코프안에서 모두 사용 가능
스코프 바깥에서 사용하면 Undefined Variable 오류가 난다. 변수의 값은 상속하되 그 스코프 바깥의 요소라면 ??? @at- 키워드를 사용하자.container { .item { $size : 100px; /* 변수 선언! */ width: $size; height: $size; .box{ width : $size; /* 상속 가능! */ } } }
@at-root . box { - 반복되는 키워드 변수화
flex : { grow: 1; shrink 0; } - 다중 선택자
다중 선택의 중첩이 생기면, 각각에 대해 중첩이 된다
중첩 또한 다중인 경우 각각에 대해 각각 중첩이다.데카르트곱…?
변수
$변수명: 값;
width: $w
사용가능 키워드 !global , !default
데이터 종류
- Numbers
1, 0.8, .8, 20px, 2fr
- Strings :따옴표가 있거나 없는 모든 문자데이터들
bold, absolute, “assets/images/”
- Colors :색상의 이름들
blue, yellowgreen, rgba(255,0,0,.5), #ffffff
- Boolean
true, false
- Null
null (널을 가진 값은 컴파일 되지 않는다)
- Lists : 소괄호 사용해도 됨! 쉼표 구분 없이 나열도 가능. 문자도 가능. 반복,인덱싱 가능
(10px, 20px, 30px), 10px 20px 30px , appple banana cherry
- Maps :소괄호 사용-생략불가능
( a : apple, b : banana)
연산자
산술 연산자 + - * / %
.box {
width : 100px + 200px ; // 300px
height : 200px - 50px ; // 150px
margin : 200px * 2 ; // 500px
opacity : 10%4; // 1
}- 주의 : 단축속성을 사용할 때 각각의 속성을 구분짓기 위해
/를 사용한다.background: 10px 10px / 10px 10px; //position이 10px 10px; size가 10px 10px //font : font-size / line-height / font-family(필수) font : 16px / 32px serif; - 그럼 나누기
/는?- 괄호 묶기 ((추천))
top: (20px / 2 );- 변수로 두기
- 변수로 두기
$value : 20px;
top: $a / 2;- 다른 연산자와 혼합하기
- 다른 연산자와 혼합하기
top : 20px / 2 + 1px ; //11pxcalc()
SCSS에선 단위가 다른 값들을 연산할 수 없다.. 이때 calc()사용! css와 동일
left: calc(100% - 50px) //calc(100% - 50px) 이렇게 결과값이 오진 않고 css에서 작동!비교 연산자 ==, !=, <, >, <=, >=
논리연산자 and, or, not
명시도
명시도란 주어진 CSS 선언에 적용되는 가중치이다.
- “구체적”일수록 우선수위가 높다.
- 우선순위는 { 인라인 > id > 클래스,가상클래스,속성 > 요소 } 로 구성되고 차례로 우선순위를 가진다.
- !important와 인라인이 차례로 가장 높은 우선순위를 가진다. 하지만 !important는 무조건 지향하자!. 자연스러운 종속을 깨뜨리기 때문이다.
| 1순위 | 2순위 | 3순위 | 4순위 | ||
|---|---|---|---|---|---|
| !important | 인라인스타일 | id | 클래스, 가상클래스, 속성 | 요소, 의사 요소 | *(전체), :not |
| 1000점 | 100점 | 10점 | 1점 | 0점 |
{0,0,0,0}에서 1순위부터 차례로 1씩커진다.
.container .item { 이렇게 선택했다면 클래스로 두번 구체화했으니 {0,0,2,0} 이 되고 “20점”이라고 할 수 있다.
이 점수가 높은 순 대로 적용이 된다. 점수가 같은 경우엔 마지막을 선언된 값이 적용된다.
++ 특정스타일 그룹 간 우선순위엔 @layer. 선택자보단 우선의 순위를 가진다. (1.9순위?)
++CSS 특강
@container 쿼리, @layer 우선순위, :has() 등 최신(?)이랄지 정말이지 야무진 css 속성과 함수를 더 배울 수 있었다.
배열을 전체 순회하면서 누적값을 올리고 있는데 reduce()를 배운 기분..
기억해둘 말씀을 적어보자면,
- 최소한 자주 쓰이는 속성들에 대해선 문법, 기본값을 외워두자. 좋은 UI 프레임워크가 있지만 로우레벨도 다룰 수 있도록 연습하자
- 레이아웃 위주 클론코딩을 해보자. 해외사이트도 좋다. 굳이 JS에 부담을 걸지 않고 CSS로도 처리 할 수 있다.
- grid보단 flex 먼저 생각하자. 웬만해선 1차원 배치인 flex로 둘 수 있다!
- 우선순위(명시도)를 제대로 알고있자.
🤔 오늘 회고
맨 처음 프로젝트 개발을 시작했을 때, css레퍼런스를 참고하려고 많이 찾아봤던 적이 있다. 마음에 드는 버튼 스타일을 찾았는데 구현 코드가 scss여서 당황했었다. $, & 등 낯선 기호들이 잔뜩이고 이름도 다르다보니 호환이 안될까 걱정을 하면서도 냅다 css에 붙여넣기 했던 기억이 났다.. 그 때 잔뜩 빨간줄이 떴고 이래저래 고치다 결국 포기했었는데ㅋㅋ.. 이젠 야무지게 써먹을 수 있을 것 같다. 역시 아는게 힘
CSS강의를 들어오면서, 그리고 프로젝트에 썼던 CSS를 생각하면서 궁금한 것들을 찾아보고 물어봤던 것들이 있었는데 오늘 강의와 특강에 등장해서 뭔가 뿌듯했다. 예습인가 혹쉬 ㅎㅎ
Keep
고양이 앨범 과제 팀원 리뷰 반영 완료!
오랜만에 자유 플젝 하려니까 설렌다... 듀근,, 소소한 목표를 욕심부려서 하나 세웠는데 해내보겠서
Problem
그동안의 CSS도 참 별났겠구나.. 라는 생각이 많이 들었다. CSS과제이니만큼 제일 효율적으로 적용해보기로.
과제를 시작했다가 특강 + 특강 내용 복습 하다 보니 얼마 못했다.. 부지런히 하자
Try
CSS 부분은 이론으로 보는 것과 내 코드, 화면에 맞게 적용할 때랑 괴리가 있을 것 같다. 그때마다 정리해둔 걸 찾아보기로! 그리고 보완하기로!
