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

preload 란 무엇이며, 언제 쓰는 속성이고, 왜 써야하는건가? preload는 브라우저가 페이지 로딩 전에 리소스를 미리 다운로드할 수 있도록 해주는 HTML 속성이다. 이를 사용하여 브라우저가 페이지 로딩 전에 폰트, 이미지, 스타일시트, 스크립트 등 다양한 리소스들을 미리 다운로드 해서 페이지 로딩 속도를 개선 할 수 있다. 이번 글에서는 폰트를 preload 하는 방법에 대해서 끄적여볼거다. 폰트에는 로컬 폰트와 웹 폰트가 있다. 로컬 폰트는 이미 로컬에 설치돼있기 때문에, preload 속성이 필요없지만, 웹 폰트의 경우, 원격으로 가져오며, 아무래도 폰트 파일이 크기가 크다보니 폰트 파일을 다운로드하는 동안 페이지 로딩이 지연되는 경우가 생긴다. 이를 해결하기 위해, preload 속성을 ..

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

** 이 글에서는 렌더링 엔진이 작동하는 방식과 사용자 화면에 웹 페이지를 표시하는 방법을 알아볼거다. * 먼저 설명하는 데에 쓰일 용어들의 의미를 알아보도록 하자. 파싱 (parsing) 이란? 컴퓨터 프로그래밍에서 말 그대로 "구문 분석" 을 의미한다. 즉, 컴퓨터가 이해할 수 있는 형태로 입력된 문서나 데이터를 분석하여 그 의미를 이해하고 처리하기 위한 작업이다. 웹 프로그래밍에서는 HTML, XML 등의 문서를 파싱하여 웹 페이지를 구성하거나 데이터를 추출하는 데에 사용된다. DOM (Document Object Model) 이란? HTML, XML 등의 문서를 파싱하여 웹 페이지를 구성하거나 데이터를 추출하는 데에 사용되는 API이다. DOM은 문서를 트리 구조로 변환하여 각 요소를 노드로 표현..

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순위: 전체 선택자 (모든..