Flex와 Grid의 차이 플렉스와 그리드는 레이아웃을 잡을 때 많이 사용된다. flex는 1차원으로 행, 열 영역 중 하나의 방향으로 레이아웃을 나눌 수 있고, Grid는 2차원으로 행, 열 영역을 동시에 나눌 수 있다. flex에 적합한 레이아웃은 아래의 이미지와 같다. 아래처럼 콘텐츠를 한 방향으로 정렬할 때 flex는 빛을 발한다. 반면 그리드는 아래처럼 좀 더 복잡한 레이아웃을 잡을 때 편리하다. grid는 flex와 달리 열과 행을 함께 나눠야할 상황에 사용하면 좋다. flex와 grid 중 어느 하나만을 고집해서 레이아웃을 잡기 보다는 각 상황에 알맞게 flex와 grid를 사용하는 것이 중요하다.
미디어쿼리는 반응형 웹 페이지에서 가장 큰 역할을 한다 하지만 너무 많이 사용하면 웹 페이지의 성능이 저하될 수 있기 때문에 미디어 쿼리를 최소화하는 방법을 정리하고자 한다. 1. 불필요한 미디어 쿼리 삭제 사용되지 않는 미디어 쿼리는 삭제하는 것이 좋다. ex) 모바일 장치에서는 적용되지 않는 데스크톱용 미디어 쿼리를 삭제 2. flex, grid 사용 플렉스와 그리드를 사용하면 뷰포트의 너비에 따라 자동으로 레이아웃을 조정할 수 있어서 미디어 쿼리를 줄일 수 있다. See the Pen flex by 이아름 (@aahreum) on CodePen. 3. CSS 가변단위 사용 CSS 가변단위인 rem, em, vw, vh를 사용해서 미디어 쿼리를 최소화할 수 있다. h1 { font-size: 1.5e..
CSS 애니메이션 최적화 애니메이션 최적화는 왜 필요할까? 애니메이션을 구현하다보면 jank현상(스크롤 떨림, 지연, 끊김 등)이 나타난다. 이를 해결하기 위해 애니메이션 최적화가 필요하다. 애니메이션 최적화는 웹 사이트의 성능을 향상시킬 수 있고, 시스템을 절약하여 좋은 사용자 경험을 제공할 수 있다. 웹 브라우저의 랜더링 순서 웹 브라우저의 랜더링은 위와 같은 순서로 진행된다. 이 중에서 자세히 알아야 둬야 하는 부분은 Layout, Paint, Composite이다. 1. Layout 브라우저는 각 요소의 크기와 위치를 계산함 - width, height, margin, padding, position, display, float 등 2. Paint 브라우저가 요소의 스타일 정보를 이용하여 픽셀을 ..
폰트 preload 웹 폰트는 일반적으로 다른 리소스와 함께 다운로드 되는 경우가 많아서 성능 문제가 발생할 수 있음 이를 해결하기 위해 preload를 사용 preload를 사용하면 웹폰트를 브라우저가 미리 다운로드하기 때문에 페이지 로딩 속도가 빨라짐 (as 속성은 리소스 유형, type은 mime유형, crossorigin은 다른 도메인에서 폰트를 가져올 때 사용) preload는 페이지 성능을 개선할 수 있는 방법이지만, 폰트를 미리 다운로드 할 수 있는 만큼 많은 양의 폰트를 사용한다면 페이지 로딩 시간을 되려 증가시킬 수 있음 그리고 현재 페이지에서 사용하지 않는 폰트여도 폰트를 다운로드 할 수 있음 로컬폰트 로딩 CSS에서 폰트를 선언하게 되면 폰트를 무조건 다운로드 하게 됨 (불필요한 리소..
1. Aria-label aira-label은 웹 페이지에서 스크린 리더 사용자에게 정보를 전달하는 데 사용되는 HTML 속성 요소가 시각적으로는 명확한 정보를 제공하지만 스크린 리더 사용자들이 이해하기 힘들기 때문에 aira-label을 사용해서 요소의 기능이나 목적을 설명할 수 있음 검색 span이나 div 태그에서 aria-label을 사용할 땐 role 속성을 함께 써주는 것이 좋음 2. sr-only 스크린리더에서는 읽을 수 있지만 화면에는 보이지 않게 하는 방법 (aria-label과 비슷한 역할을 함) 아래의 코드를 사용함 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hid..
크로스 브라우징이란? 크로스브라우징이란 서로 다른 웹 브라우저(크롬, 사파리, 파이어폭스, 엣지 등등)에서 사용자에게 웹페이지가 동일하게 보여지는 것 혹은 작동하는 것을 의미 웹 페이지의 호환성을 해결하기 위한 것 그렇다면 크로스브라우징이 필요한 원인은 무엇일까? 브라우저 마다 랜더링 엔진이 다르기 때문 브라우저별 렌더링 엔진 (참고) 웹 브라우저의 랜더링 엔진은 HTML, CSS 및 JavaScript 문서를 받아들여서 웹 페이지를 렌더링하는 소프트웨어 (Chrome의 Blink, Firefox의 Gecko, Safari의 WebKit, Microsoft Edge의 EdgeHTML 등) 크로스 브라우징 작업 1. 웹 서비스에서 가장 높은 점유율을 가진 브라우저를 알아보기 - 구글애널리틱스나 브라우저 점..
