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

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

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

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

매번 VSC에서 html 파일에서 느낌표(!)를 누르고 tab키를 누르면 html 기본 코드가 자동완성 됐다. 항상 당연하게 쓰다가 '근데 이걸 왜 저렇게 써야하고, 왜 필요한걸까?' 라는 궁금증이 생겨 찾아보게 됐다. 이번 글에서는 맨 상단에 위치한 DOCTYPE의 의미는 무엇이며, 왜 써야하는지를 알아보자. HTML 문서의 첫 줄인 HTML(Hypertext Markup Language) 선언이며, 사용 중인 HTML 버전과 웹 페이지 표시 방법을 웹 브라우저에 알려주는 것이다. 웹 브라우저가 HTML 문서를 받으면 DOCTYPE 선언을 확인하여 사용 중인 HTML 버전을 확인한다. HTML 버전마다 규칙과 구문이 다르므로, 버전마다 적용되는 태그와 적용되지 않는 태그가 있다. 따라서, 웹 페이지가 ..