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

Semantic HTML Tag and Web Accessibility 웹표준이란? 웹표준은 인터넷에서 사용되는 웹사이트를 제작하는 방법에 대한 약속 또는 규약이다. 이 규약은 전세계에서 권위있는 W3C(World Wide Web Consortium)에서 제정되었으며, 웹사이트를 만들 때 일관성 있게 작성할 수 있도록 지침을 제공해준다. 웹표준은 왜 필요할까? 웹표준을 사용하면 웹사이트가 여러 플랫폼에서 일관되게 표시된다. 브라우저마다 ( chrome, IE, firefox, opera 등 ) 자체적으로 해석하는 방식이 다르기 때문에, 웹표준을 사용하지 않으면 같은 웹사이트라도 브라우저마다 다르게 보일 수 있다. (이래서 많은 프론트엔드 개발자들이 웹표준 웹표준 거리는거다) 또한, 웹표준을 사용하면 검색..

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