짧은코딩

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..

html의 빈 박스에 막대나 원 만들기 -막대 width: 15px; height: 60px; background-color: white; -원 background-color: white; width: 15px; height: 15px; border-radius: 50%; 막대나 원 둘 다 반드시 width와 height를 줘야한다. 그리고 원은 border-radius에 50%을 주거나 width와 height의 절반 크기의 px를 줘야한다. keyframe -원형으로 돌리는 법 @keyframes turn { 100% { transform: rotate(180deg); } } rotate를 주면 된다. -각 아이템에 순서대로 애니메이션을 주는 법 1. 우선 keyframse를 만든다. 2. 각 아이템..

-html -css body { margin: 0; } .big-box { background-color: #ff6446; height: 100vh; display: flex; justify-content: center; align-items: center; } .middle-box { border: 3px solid black; padding: 10px; width: 300px; height: 300px; background-color: #f5deb3; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; } .small-box, .long-box { background-color: #00808..

branch -설명 branch는 코드들의 멀티버스라고 볼 수 있다. git은 어떤 commit이라도 받을 수 있게 해준다. 그림에서 동그라미는 commit이다. 어떤 commit라도 거기에서 Master branch와 다른 프로젝트를 시작할 수 있다. 대부분의 사람들은 어느 정도 검증된 코드를 commit한다. branch1, branch2는 각각 다른 commit을 갖는데, 다른 기능을 추가하거나 실험하고 싶을 때 이렇게 나눌 수 있다. 그리고 나중에 갈라진 branch를 master branch에 합칠 수 있다. -적용법 예시 깃허브 데스크탑에서 experimental이라는 새로운 branch를 만들어준다. 새로 만든 experimental branch의 history에 가도 master와 같은 기..

처음에 배경이 나왔다가 사라지게 하기 @keyframes hideSplashScreen { from { opacity: 1; } to { opacity: 0; visibility: hidden; } } #splash-screen { background-color: var(--yellow); position: absolute; height: 100vh; width: 100vw; top: 0; display: flex; justify-content: center; align-items: center; font-size: 132px; z-index: 3; animation: hideSplashScreen 1s ease-in-out forwards; } @keyframes를 이용한다. 그리고 animation에..

z-index z-index는 div가 있는 위치가 맨 앞에서부터 몇 번째인지 나타 낸다. 즉, layer의 순서가 몇 번째인지를 나타낸다. display 작업을 하거나 postition이 고정되어 있으면 layer를 갖는다. z-index의 기본값은 0이며 더 큰 숫자를 가진 부분이 위에 겹쳐서 보이게 된다. #chat-screen .status-bar { z-index: 2; } #chat-screen .alt-header { top: 10px; z-index: 1; } 이러면 status-bar가 더 위에 있다. 그리고 고정된 상단바에서 사용할 때는 상단바에 배경색을 따로 또 줘야했다. 그래야 지나간 요소들이 덮어져서 확실히 안보인다. => z-index는 absolute postion이나 fixe..