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

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

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