키티의 코딩공부

SCSS - 재활용 @mixin : 재활용 할 코드를 정의하고 필요에 따라서 언제든지 활용 가능 => @mixin 믹스인이름 { 재활용할 스타일 } @include : mixin에 담긴 속성들을 사용할 때 씀 - 매개변수를 만들어 범용화해서 스타일을 재활용 / ($size: 기본값)을 지정해주어야 다른 값을 주었을 때 적용 가능 - if 조건문 삼항연산자 처럼 사용할 수도 있다. - 클래스 선택자, 가상요소선택자 - 중첩 => @mixin에 다른 @mixin을 @include를 사용해 가지고 올 수 있다. - 전개연산자(...)를 사용하여 가변인수 - 전개연산자(...)를 사용하여 리스트 형식 + 보간을 사용해서 확장할 수도 있다. - 키워드 인수 - 특정 스타일 블럭을 추가하여 @content를 통해 ..

CSS - 변수 --변수명: 값; 속성: var(--변수명); 변수를 선언할 때 특정한 선택자 내부에서 변수를 선언한다. 변수들은 선택자의 요소에 종속이 되고 요소의 후손으로 상속이 된다. root 라는 가상클래스선택자는 html 태그 선택자와 동일하고 html태그 내부의 모든 요소에서는 선언된 변수들을 모두 사용할 수 있다. 변수가 선언된 요소에 유효범위를 가진다. container안의 item에만 갈색이 적용된 것을 볼 수 있다. 변수의 재할당 변수의 초깃값 설정 => var(--color-success, orange); --color-success에 지정된 값이 없으면 두번째 인수에 들어있는 값을 사용하겠다는 의미 CSS - @supports 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 ..

Grid Items 1 9개의 cell을 가지는 grid container , grid는 행축, 열축을 기준으로 line을 가진다. 개발자 도구를 통해 grid를 클릭하면 line의 번호를 알 수 있다. grid-row(column)-start(end) : 각 행, 열 의 라인 번호중에 몇 번째 라인에서 시작할 것인지(끝낼 것인지)를 명시 grid-row-start : 2; grid-row-end: 4; grid-column-start : 2; grid-column-end : -1; (음수도 가능) => 아이템의 위치를 어디서 시작해서 어디서 끝낼것인지 정할 수 있다. grid-row(column)-start(end): span 2; 시작 라인을 기준으로 n개의 라인을 확장해서 아이템을 늘리겠다는 의미,..

Float - 수평 정렬 float을 사용하면 container가 정상적으로 작동하지 않는데 옵션(4)을 새로 하나 만들어서 float 해제(clear)를 해야한다. => 비효율적!!! 컨테이너 속성에 overflow 추가 => 넘침을 제어해주는 속성, float과 아무런 관계를 가지지 않는다. 가상요소선택자 after => html에 가상요소를 만들어서 css속성을 추가할 수 있다. clearfix요소의 가상요소 after는 내부의 가장 뒷쪽에 가상의 요소(형제)를 만들게된다. => 컨텐트는 없고, 블록요소로 만들어져서 오른쪽,왼쪽 모두 해제가 가능한 both를 추가함. => clearfix가 부여된 컨테이너에는 float을 사용하는 요소(item)만 들어있어야 한다. @ .container>.item..