CSS8 [CSS] px | em | rem 차이를 알아보자 px | em | rem 차이를 알아보자 px은 고정된 절대값의 단위며, em과 rem환경에 따라 변하는 단위입니다. 고정된 px과 달리, 환경에 따라 변하는 em과 rem의 장점은 무엇이며, 어떤 경우에 각각의 단위를 쓰는 것이 좋은지 알아봅시다. em vs. rem 차이 : 변환되는 기준이 다름 em과 rem은 가변단위로서 브라우저 환경에서 px로 변환됩니다. em은 같은 엘리먼트에서 지정된 font-size를 기준으로 px로 바뀌어 화면에 표시됩니다. 같은 엘리먼트에 설정된 폰트 크기 값이 없을 경우, 상위 요소의 폰트 사이즈가 기준이 됩니다. div { font-size: 10px; } div { font-size : 1em; /*1em 대략 10px*/ } rem은 최상위 엘리먼트에서 지정된 f.. 2021. 6. 28. 2020.10.21 TIL 노마드코더 코코아톡 클로닝 후기 노마드코더 코코아톡 (카카오톡) HTML CSS 클로닝이 끝났다. CSS는 프론트엔드에서 사용자의 사용감과 인상에 밀접한 영향을 주지만, 개인적으로는 개념을 잘 알지못해 지루하고 어려운 부분으로 생각했었다. 그런데 CSS를 한 번 해보니, 백엔드와 다른게 적용되는게 눈으로 확확 보여서 재밌다. 해당 수업에 대해 배운 내용을 좀 더 정리하자면, 그간에 내멋대로 지었던 변수명에 대해서 일정 규칙과 아이디어를 얻었다. 그동안 나를 애먹였던 block 과 inline CSS 레이아웃에 대한 기본 사용법을 익혔다. CSS도 코드 재활용성을 충분히 높일 수 있다. 코드스테이츠에서 제대로 잘 배워서 github에 리드미까지 작성하는 것도 잊지 않았다. 끝! 2020. 10. 22. 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. 2020.10.12 TIL CSS 루트에 변수 지정하여 여러번 활용하기 :root { --main-color : #0000000 } p { background-color : var(--main-color) } var(--변수명) 이런 식으로 루트에 메인 컬러를 변수로 지정하고 사용할 수 있다. transition transition 은 state (:active, :hover ...)에 따라 property가 달라질 때 사용한다. transition 은 state가 아니라 root 가 되는 element 에 있어야 한다. a { background-color : tomato; color : wheat; transition : all 5s ease-in-out //배경과 글자 모두 변화 } a:hover { background-co.. 2020. 10. 12. 이전 1 2 다음
