no image
[웹 최적화] 미디어쿼리 최소화 하기
... 들어가며 현대에서 웹 서핑을 할 때 사용하는 도구는 모두 제 각각이다. 누구는 휴대폰, 누구는 태블릿, 누구는 노트북을 사용한다. 문제는 기기마다 띄워야 하는 웹 페이지의 해상도, 즉 ViewPort가 모두 다른데 웹페이지 하나를 띄우기 위해서 Html1, Html2, Html3 다수의 파일을 만들자니 너무 비효율적이었고 이 때문에 나온 것이 바로 "반응형 웹페이지"이다. 반응형 웹 반응형 웹이란 뷰포트의 크기에 따라 서로 다른 레이아웃으로 보여지는 것을 의미한다. 핸드폰, 태블릿, 노트북 등 다양한 기기의 화면 크기에 따라 웹 사이트가 자동으로 조정되어 해당 기기에서 최적화된 레이아웃을 보여주는 것이다. 이 반응형 웹을 만들 때 자주 사용하는 기법이 바로 미디어 쿼리이다. 🤔 미디어 쿼리 그게 ..
2023.09.02
Web
no image
web font vs local font
웹 폰트란? 방문자의 로컬 컴퓨터에 폰트 설치 여부와 상관 없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트이다. 예를 들어, 나눔고딕 폰트를 사용하고 싶은데 PC에 설치가 안 되었다면 기본 폰트인 돋움 글꼴이 노출되고, 나눔고딕 폰트가 설치된 pc에서는 나눔고딕 폰트가 노출된다. 그러나, 웹 폰트를 사용할 경우 방문자의 pc에 나눔고딕 폰트가 있든 없든 나눔고딕 폰트가 노출된다. 로컬 폰트는 또 뭔데? 로컬폰트 폰트를 불러올 때 @font-fac CSS코드를 사용해서 코드를 정의하는 기법을 이야기한다. 아래 코드를 보면 @font-face { font-family: ; src: [,]*; [font-weight: ]; // font 굵기 값 [font-style..
2023.09.02
Web
no image
크로스 브라우징(cross browsing)이란?
한국소프트웨어진흥원에서는 크로스 브라우징에 대해서 아래와 같이 정의하고 있다. Cross Browsing 이란 적어도 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우지지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법을 말하는 것이다. 한 개발자가 "a"라는 이미지를 띄우고 싶어 코드를 작성했는데 A브라우저에서는 "a" 이미지로 보이고 B브라우저에서 "b" 이미지로 보여진다면 사용자들은 얼마나 당황스러울까? 이런 이슈를 방지하기 위해 어떤 브라우저를 사용해도 같은 기능이 구현될 수 있도록, 즉 같은 경험성을 제공받을 수 있도록 개발자가 지켜야 하는 웹 표준이 바로 크로스 브라우징이다. 웹표준이란? 웹 표준이란 W3C에서..
2023.09.02
Web