카카오톡클로닝3 2020.10.19 TIL will-change : 애니메이션에서 어떤 부분이 변화할지 미리 브라우저에게 언질을 주는 것 z-index : 포토샵의 레이어 같은 개념인데, 지난번 포스팅에서 숫자가 낮을 수록 맨 위에 노출 된다고 작성한 부분은 틀렸다. 숫자가 클수록 상위에 노출된다. github 에서 서버 없이 클라이언트 부분을 무료로 퍼블리싱 하는 기능을 제공하는데 굉장하다! @media screen / print 부분을 통제할 수 있다. @media screen and (max-width: 600px) and (orientation: portrait) { #no-mobile { display: none; } } @media print { body { color: black; } #no-mobile { display: none;.. 2020. 10. 20. 2020.10.18 TIL z-index는 포토샵의 layer 라고 생각하면 된다. 만약, 서로의 엘리먼트의 요소가 겹칠 경우, 어떤 엘리먼트를 맨 위로 표현할 것인지를 z-index를 통해 지정해주면 된다. 숫자가 낮을 수록 최 상단에 노출된다. 0이 제일 위로 올라오며, 숫자가 커질수록 밑에 깔려 표현된다. order는 flex된 children 요소들에게서 사용할 수 있다. 순서를 바꿀 수 있다. modifier 를 이용해서 가급적 코드를 재활용하도록 하자. 얇게 알던 CSS를 하나하나씩 따라해보면서 그간에 무식하게 하나씩 적용했던 지루한 CSS에 흥미가 생겼다. CSS는 기존에 코딩 중에서도 가장 재미없고, 반복적이라고 생각했는데 그건 CSS를 제대로 할 줄 몰라서 였다... 내일 정도면 kakao talk css 클로닝이.. 2020. 10. 19. 2020.10.14 TIL 카카오톡 클로닝 CSS 하는 중인데, 그동안 지루하고 재미 없다고 생각했던 CSS도 막상 하나씩 따라해보니 흥미가 생겼다. 그동안 노가다로 하나씩 했던 것들을 단축키를 사용한다거나, 변수명 지정을 통해서 코드의 재활용성을 높일 수 있게 되었다. 다른 사람들이 사용하는 변수명을 그대로 써보면서, 나중에 내가 변수명을 창조해야 할 때 도움이 될 것 같다. 내일 오늘 발생했던 margin-collapse 현상과 BEM 변수 정하는 방법에 대해서 포스팅할 계획이다 2020. 10. 14. 이전 1 다음
