CSS17 CSS와 JS 애니메이션 성능향상 팁 웹 애플리케이션의 성능과 관련된 포스팅을 지속하다가 이번에는 CSS와 JS의 성능 향상은 어떻게 해야 할지, 특히나 렌더링에서 많은 연산을 요구하는 애니메이션에 관해 최적화 방법이 궁금해 조사를 해보았다. 아래는 관련해 좋은 글이 있어 번역해 옮겨본다. Tips for Improving CSS and JS Animation Performance 화려한 애니메이션은 웹사이트를 다른 경쟁사보다 눈에띄게 하는 효과가 있지만, 역으로 최적화되지 않은 애니메이션은 성능 문제로 결과적으로 유저를 이탈시키는 결과를 일으키기도 한다. 만약에 애니메이션이 초당 60 프레인 이하로 렌더링 된다면 방문자는 이를 알아차릴 것이고 사용자는 안좋은 경험을 하게 된다. 이 가이드는 어떻게 CSS와 자바스크립트 애니메이션을 스무스하.. 2022. 4. 25. [CSS] Position absolute 정리 오늘은 CSS의 Position 설정에 대해 알아보자. Position에는 아래와 같은 설정들이 있다. position: static; position: relative; position: absolute; position: fixed; position: sticky; Position: static static 설정은 위 사진과 같이 위처럼 박스가 배치된다. 기본 설정으로 따로 position 설정을 하지 않으면 기본적으로 static 값이 적용된다. 위에서 아래대로 흐름대로 배치가 되며 top, right, bottom, left, 그리고 z-index 등과 같은 설정값이 전혀 효과가 없는 게 특징! Position: relative relative 설정은 static + top, right, bott.. 2022. 1. 7. CSS Flexbox 말로만 듣던 Flex 오늘 한 번 해보도록 하자. 물론 방구석 css flex... Flex는 flexible의 약자로 유연하게 박스가 움직이며 레이아웃을 구성하는 방법이다. 딱딱하게 굳어있는 내 웹페이지에 유동성을 불어넣어 줄 아주 유용한 스타일이라 할 수 있다. 적용방법 1. 부모박스와 자식박스를 준비한다. 2. 부모박스에 "display: flex"를 적용한다. 3. 부모박스에 flex가 적용되면, 아래 자식 박스들은 그 영향을 받게 되고 왼쪽 정렬로 착 정렬된다. (약간 inline-block 같은 느낌이랄까...) 4. 마지막으로 부모 혹은 자식박스에 하위속성들을 적용해서 예쁘게 꾸민다. 하위속성 flex: 하위속성으로 자식박스의 grow, shirnk, basis 값을 설정할 수 있다. 부모박.. 2021. 10. 19. CSS 셀렉터 오답노트 오늘은 CSS 연습문제를 풀면 틀렸던 부분과 몰랐던 개념들을 정리해 본다. 오답리스트 #lable.center {...} id가 label이면서 동시에 class가 center인 엘리먼트를 선택합니다. .show#only {...} class가 show이면서 동시에 id가 only인 엘리먼트를 선택합니다. section h2 {...} swection의 후손 엘리먼트 중 h2 엘리먼트를 선택합니다. article + p {...} +는 article과 인접한 형제 엘리먼트 p를 선택합니다. section ~ p {...} ~는 section과 인접한 형제 엘리먼트 p를 모두 선택합니다. div:nth-last-child(2) {...} div의 자식 엘리먼트 중에서, 마지막에서 두 번째 엘리먼트가 div.. 2021. 10. 19. CSS 박스모델 HTML/CSS 태그들은 각자의 영역을 가지게 되고 각자의 영역들이 박스(공간)을 가지게 된다. 박스는 항상 직사각형이고, 너비와 높이를 가지게 되는데 CSS를 통해 그 크기를 설정할 수 있다. 그중 필수적으로 이해해야할 개념이 하나 있는데, 바로 block / inline / inline-block 개념이다. 줄바꿈이 되는 박스 : block 대표적 태그: 줄바꿈이 되는 박스란 태그를 사용했을 때 다음 태그가 저절로 줄바꿈이 되는 태그를 뜻한다. 즉 태그를 사용하면 줄 전체 공간을 차지하며 이외의 태그가 배치되지 못한다. 옆으로 붙는 박스 : inline 대표적 태그: 옆으로 붙는 박스란 콘텐츠의 내용만큼 공간을 차지하기 때문에 줄 전체 공간을 차지 하지 않는다. 남는 공간에는 다른 태그들이 공간을 차.. 2021. 10. 10. 이전 1 2 다음
