짧은코딩

line-height line-height: 2.5; 글의 줄 간격을 조절할 수 있다. letter-spacing letter-spacing: 2px; 글자 사이의 간격을 조절할 수 있다. 한 개의 클래스 제외하고 다 선택하는 법 body > *:not(.footer) { padding: 0px 140px; } 이렇게하면 footer이란 클래스를 가진 박스 말고 다 선택된다.

SCSS SCSS는 기본적으로 CSS preprocessor이다. Sass나 Scss는 같은 방식으로 사용한다. 사람들이 sass나 scss를 말할 땐 둘 다 거의 같다. scss는 css를 programming language처럼 만든다. -gulpfile.bable.js gulpfile.bable.js이 파일 안에서 const routes = { css: { watch: "src/scss/*", src: "src/scss/styles.scss", dest: "dest/css", }, }; src를 보면 styles.scss를 계속 관찰하고 있다. 그리고 이 파일에서 일어나는 일는 css로 컴파일된다. 그러면 styles.scss에서 수정하면 styles.css가 바뀐다. variables.scss 이..

grid 문제 사이트 https://cssgridgarden.com/#ko Grid Garden A game for learning CSS grid layout cssgridgarden.com 이 사이트에서 게임을 풀면서 grid 공부를 할 수 있다. 못 푼 문제들 -24단계 grid-template-columns: 50px repeat(3, 1fr) 50px; -26단계 grid-template-rows: repeat(4, 12.5px); 물이 아래 있으니까 상단을 4칸으로 만들면 아래 당근들이 채워진다. -28단계 grid-template: auto 50px / 1fr 4fr; auto 50px는 생각했지만 1fr 4fr은 생각하지 못했다.

GRID의 기본 사용법 .father { display: grid; } flex처럼 display에 설정하면 된다. .father { display: grid; grid-template-columns: 20px 55px 89px 100px; } 이렇게 자식들이 순서대로 px의 크기 만큼 변했다. .father { display: grid; grid-template-columns: 250px 250px 250px; gap: 10px; /*column-gap: 10px;*/ /*row-gap: 10px;*/ } gap를 활용해서 간격을 줄 수 있다. 주석문 처럼 따로따로 줄 수도 있다. .father { display: grid; grid-template-columns: 250px 250px 250px; g..

align-self align-self는 align-items와 비슷한 일을 한다. .child:nth-child(2) { align-self: center; } align-self는 하나의 자식에만 속성을 줄 수 있다. 따라서 이렇게 하기 위해서는 width나 height의 크기가 충분히 커야 각 자식별로 다른 속성을 줄 수 있다. Order order는 자식의 순서를 바꿔줄 수 있다. 만약 1 2 3이렇게 있고 .child:nth-child(2) { order: 1, } 이런 속성을 주면 1 3 2가 된다. 그 이유는 order의 기본값은 0이다. 근데 2인 요소의 order을 1로 바꾸니까 2가 돼서 가장 뒤로 밀린다. flex-wrap flex-wrap는 자식들의 간격을 줄 수 있다. -rever..