📚TIL

day31

Transform 3D

• transform-origin : transform이라는 속성을 통해서 변환될 때의 기준점 설정
• transform-duration : 전환효과를 지속하는 시간 설정
• rotateX/ rotateY : x축, y축을 기준으로 회전
• transform-style : preserve-3d - 3차원 효과가 추가되어있는 요소의 자식요소에도 3D효과를 추가하기 위해 사용
• backface-visibility : hidden - 뒷면이 보이는 순간 요소가 사라짐

perspective

• 요소를 원하는 거리에서 볼 수 있도록 설정
• 요소를 더 입체적으로 보일 수 있도록 함
• 숫자가 클수록 요소를 멀리서 봄
• 3차원 변환함수에서만 적용 가능
• 함수로 사용시 변환이 일어나는 요소에 부여하며 속성으로 사용 시 요소의 부모에 사용
• perspective-origin : perspective를 속성으로 사용 시 원근의 기준을 설정

columns

• 다단(multi-columns) : 텍스트를 정리하기 위한 개념
• column-count : 단의 갯수 지정, 기본값 1
• column-width : 유지할 수 있는 단의 너비를 지정하며 너비로 모든 내용을 표현할 수 있으면 자동으로 단의 개수가 조정 됨
• column-rule : 단과 단 사이에 넣는 border 속성(width/style/color)
• column-gap : 단과 단 사이의 거리 지정

filter

• filter 함수 : blur, grayscale, invert, drop-shadow, brightness, contrast, opacity, saturate, sepia, hue-rotate
• backdrop-filter : 자기 자신에 필터효과를 적용하는 것이 아닌 해당 요소 뒷단에 필터처리 적용 - firefox 호환 X

CSS 변수

• var(변수)로 선언
• 변수를 선언할 때 특정한 선택자 내에서 선언해야 함
• 종속된 변수의 값은 후손 요소로 상속됨
• :root : html 태그 선택자와 동일한 가상클레스 선택자
• 전역변수로 지정한 변수를 자신의 유효범위 내로 재할당 할 수 있음
• 변수의 초기값 설정 : var(변수이름, 변수에 할당할 값)
• 만약 초기값 설정시 이미 값이 지정된 변수인 경우에는 값이 재할당되지 않음

CSS-@support

• 특정한 css 기능을 브라우저가 지원하는지에 따라 스타일 선언 방법 제공
• 브라우저에서 cs규칙이 동작하는지 하지 않는지에 따라 적용할 기술을 다르게 설정할 수 있음
• @supports( 기능1 ) and/or ( 기능2 ) and/or ( 기능3 ){}
• selector() : css 선택자의 지원 여부를 판단하는 용도로 사용 - @supports(selector(.container))

CSS-@media

• media 사용 방법 : @media 타입 and ( 기능 ){}
• screen/ print/ tv ...
• all : 모든 미디어 타입을 아울러서 사용하며 기본값이기 때문에 all일 경우 all과 and는 생략 가능
• not : 뒤에 나열한 기능을 부정하는 부정연산자
• 하나의 미디어 규칙에 쉼표를 이용해 여러개의 미디어 타입 지정 가능
• orientation : portrait(가로너비가 더 긴 화면)/ landscape(세로너비가 긴 화면) - display-mode를 fullscreen으로 만들어 줌
• link 테그에 media속성을 통해서 작성해주는 방식으로 사용할 시 파일단위로 미디어 쿼리 관리에 유용함

SCSS/ SASS

• css 전처리 도구로 브라우저에서 직접 동작할 수 없기 때문에 css로 변환 작업을 해야함
• SCSS 문법에서는 기존 CSS를 가져와서 활용하는 것도 가능
• SASS/SCSS차이 : SASS - 중괄호와 사용하지 않으며 들여쓰기를 활용하여 범위를 지정/ SCSS : 중괄호와 세미콜론 사용
• SCSS는 /**/과 //가 모두 사용 가능하며 SASS는 주석 사용시에도 들여쓰기에 주의하기
• 중첩(Nesting) : 자식 요소들을 부모 브라켓 안에 중첩하여 정의 가능

.container{
	display : flex;
    .item{
    	flex-grow : 1;
    }
}

SCSS 변수

• 변수 선언 방법 : $변수명 : 할당할 값;
• 변수가 선언된 블록의 영역을 기본적으로 가지며 전체 영역에 선언할 시 전역변수로 사용 가능
• !flog : 변수의 유효범위 변겅
• !default : 특정한 유효범위 안에서 변수를 지정할 경우 그 변수와 동일한 이름의 변수가 있다면 기본값으로 사용
• 변수는 언제나 재할당이 가능하기 때문에 전역변수를 박스 내에서 재할당하여 사용 가능
• #{변수명} : javascript의 템플릿 리터럴과 비슷한 형태로 문자 보관

🌊하루를 마치며

강의가 많이 밀렸다 ㅠㅠ 과제 제출을 위해서 미루기도 했고 어제는 추석맞이 게임대전을 하느라 조금 풀어졌던 것도 있다ㅎㅎ 재밌었음 돼써.. 그래서 오늘은 화요일부터 밀린 강의를 들었다! 강의 갯수도 많고 필요한 개념들로 꽉꽉 채워진 강의여서 듣는 시간이 굉장히 오래걸렸다. 오늘 처음 SASS/SCSS를 배웠다. 페이지 제작하면서 레퍼런스를 찾을 때 많이 봤었는데 직접적으로 공부한 것은 처음이었다. 어려울 것이라고 생각했는데 javascript와 비슷한 점도 있어서 생각보다 쉽게 받아드릴 수 있었다. 내일 강의에는 함수와 같이 javascript에서 보던 부분들을 본격적으로 배우게 되는데 이 부분을 얼른 배워서 CSS로 작성하기 불편한 코드들도 쉽게 작성해나갈 수 있도록 하고 싶다!
내일은 수요일 과제를 듣고 vue파트는 CSS과제가 끝난 이후에 들을 예정이다ㅎㅎ 호닥 듣고 과제를 시작하는 것이 목표당.