CSS로 브라우저 성능을 최적화 시킬 수 있는 방법에 적어볼건데, animation 최적화 와 미디어쿼리 최적화에 대해서 알아보려한다. 먼저 animation 최적화에 대해서 알아보자. animation 최적화는 왜 해야하는 걸까? 애니메이션은 브라우저에서 많은 리소스를 사용하므로 최적화가 필요하다. 특히, 복잡한 애니메이션이나 많은 엘리먼트를 애니메이션으로 처리하면 브라우저 성능에 부정적인 영향을 미칠 수 있다. 따라서, 애니메이션을 최적화하여 브라우저의 성능을 향상시키는 것이 좋다. 그러면 animation 최적화 하는 방법은? 애니메이션을 최적화하는 방법에는 여러 가지가 있다. 첫째로, animation 사용 시에 CSS로 최적화하는 방법이 있다. 먼저 GPU 를 활용해볼건데, GPU(Graphic..

position : absolute 와 position : relative 의 차이점을 이해하는 데 적지 않은 시간을 보낸 적이 있었다. 누군가에게는 도움이 되기를 바라며 그림으로 차이점을 설명해보겠다. 먼저 position 속성을 지정하지 않을 때, position의 기본 동작을 알아야 한다. position: static position을 따로 선언해두지 않으면 기본값으로 적용된다. 기본적으로 흐름의 현재 위치를 기준으로 요소를 배치한다. top, right, bottom, left, z-index는 적용되지 않는다. position: relative 레이아웃을 변경하지 않고 현재 자신의 위치를 기준으로 요소를 배치한다. position: absolute 가장 가까운 위치에 있는 부모 요소 위치를 기..

1. float 속성에 대해서 깊게 알아보자 float 프로퍼티는 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다. flexbox 레이아웃를 사용한다면 더욱 간단하게 정렬을 구현할 수도 있지만 flexbox 레이아웃을 지원하지 않는 IE를 고려해야 한다면 float 프로퍼티를 사용해야 한다. float는 말 그대로 ‘뜨다’ 라는 말임. 애초에 이미지에 텍스트를 둘러싸게 만들려는 목표로 나온 속성이 float 속성임. ‘떠 있는 요소’ 라고 생각하면 편함. * float 속성은 전체 넓이가 지정되어 있지 않으면 계속 옆으로 붙고 더이상 자리가 없으면 아래로 자리잡게 됨. 여기서 떠 있다(float)는 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이..

1순위: !important ( 속성값 바로 뒤에 넣음 / 최상위 명령어임 / 근데 가급적이면 안쓰는게 좋은 듯.) - HTML => 서울 - CSS => .CCC{ color : blue !important; } 2순위: inline 스타일 속성 (태그에 style 먹여서 inline 으로 작성) - HTML => 서울 3순위: 아이디 - HTML => 서울 - CSS => #BB {color : blue} 4순위: 클래스 - HTML => 서울 - CSS => .AAA {color : blue} 5순위: tag 선택자 (tag를 그대로 선택자로 사용하는것. ) - 예를 들어서, span { color : blue } 이런식으로 CSS 파일에 tag 선택자를 선언해놓는 것. 6순위: 전체 선택자 (모든..