Media Query 실전편과 이어집니다. 미디어 쿼리 실전편에 이어, 미디어 쿼리와 관련되어 있는 내용에 대한 설명을 작성하였습니다. 목차 1. SCSS를 활용한 Media Query 앞선 두 관련 글에서 CSS를 사용하여 미디어 쿼리를 작성 및 활용하는 방법에 대해 알아보았습니다. 단, CSS에서 미디어 쿼리를 사용하면 작성 코드가 길어질 뿐만 아니라 코드 유지 및 관리가 더보기…
part2. Media Query 실전 적용 Media Query 기초편과 이어집니다. 미디어 쿼리를 사용하면 실행 중인 기기나 조건에 따라 스타일을 다르게 지정할 수 있고,반응형 웹, 다크 모드와 같은 다채롭고 트렌디한 웹 구현이 가능해집니다.이렇게 활용도 높은 미디어 쿼리를 실무에 어떻게 적용할 수 있는지 예시와 함께 설명드리겠습니다. 목차 1. 너비 분기 & 높이 분기 더보기…
part1. Media Query 기초 우리가 지금 읽고 있는 이 글은 모니터 또는 태블릿 등과 같은 미디어 매체를 통해 보여지고 있습니다.이러한 미디어 매체는 크고 작은 기기 사이즈, 터치 입력 지원 또는 흑백 컬러 출력과 같은 여러 유형과 특성을 가지고 있습니다.미디어 쿼리는 이처럼 미디어 매체의 다양한 유형과 특성을 확인하고, 특정 유형과 특성 더보기…
프로젝트를 진행하면서 585 이하의 기기에서는 모바일 소재의 이미지(배경 이미지)가 노출되고, 586 (폴드) 이상의 기기에서는 PC 소재의 이미지가 노출되어야 하는 스펙이 있었습니다.해당 스펙을 적용하기 위해 picture 요소를 사용하였으며 picture 요소에 대해 간략하게 정리해보았습니다. picture 정의 HTML Elements MDN 문서에 따르면 <picture>는 0개 이상의 source 요소와 1개의 img 요소로 이루어져 있으며 서로 다른 디스플레이/기기에서 이미지를 보다 유연하게 노출할 수 더보기…
이 글의 주요 예제 및 도식은 Elad Shechte의 아티클과 Rachel Andrew의 아티클에서 차용하였습니다. 배경 과거에 CSS는 세계인들이 가장 많이 사용하는 언어의 흐름 방식(horizontal-tb, LTR, 텍스트는 왼쪽에서 오른쪽으로 흐르고, 문단은 위에서 아래로 흐르는 방식)에 맞춰서 만들어졌다. 그렇기 때문에 CSS 속성에서 top, left, bottom, right는 항상 위쪽, 왼쪽, 아래쪽, 오른쪽에만 대응이 된다. 하지만, 모든 언어의 흐름이 위와 같지는 더보기…
HTML과 CSS를 사용하여 웹 페이지를 제작할 때 중요하게 생각해야 하는 것은 무엇일까요? 최종적으로는 디자인 가이드나 기획서 등 산출물을 바탕으로 동일한 화면을 출력하는 것일 텐데요 이 과정에서 좀 더 최적화된 웹 페이지를 만들어내는 것 또한 중요한 과제일 것입니다. 1. 소개 웹페이지에서는 종종 불필요한 작업이 일어납니다. 예를 들면 문서의 한 곳에서 수정이 더보기…
본 번역문은 원작자의 동의하에 번역 및 게시되었습니다. 브라우저에서 제공하는 <video> 요소의 재생 버튼, 타임라인은 어떻게 생성되는 걸까요? 얼마 전 번역한 DOM 아티클 작성자가 shadow DOM을 주제로 What is the Shadow DOM? 글을 작성했습니다. 꽤 오래된 개념이지만 이번 기회에 shadow DOM에 대해 자세히 알아보고자 이 글을 번역해보았습니다. 원문에서 다루지 않는 “slot” 개념은 다른 기술 문서를 더보기…
Safari에서만 사용할 수 있던 Scroll snap 모듈이 9월 4일 릴리즈되는 Chrome 69부터 지원합니다. 배경 Scroll snap 모듈을 사용하면 사용자가 터치, 휠 스크롤 조작을 마쳤을 때의 오프셋을 설정할 수 있습니다. 스크롤링은 사용자와 웹 콘텐츠간의 자연스러운 인터랙션이지만 정밀도가 부족하여 콘텐츠의 중간에서 멈추거나 주요 콘텐츠의 일부만 보이기도 합니다. 하지만 미리 설정한 위치로 이동한다면 더보기…
이 글은 https://developers.google.com/web/updates/2018/01/paintapi 문서 번역을 기초로, 필요한 설명을 일부 추가한 글입니다. Chrome 65에 도입된 CSS의 새로운 가능성 “CSS Custom Paint” 혹은 “Houdini’s paint worklet”이라고도 불리는 CSS Paint API가 크롬 65에 추가되었다. 지금까지 background-image나 border-image와 같은 속성은 이미지 파일을 로딩하기 위해서 속성 값으로 url() 혹은 linear-gradient()를 사용해 왔다. 크롬에서 새로 도입된 CSS Paint API를 사용하면 프로그래밍 방식으로 이미지를 더보기…
W3C 기술문서의 표준화 제정 단계는 웹 기술을 표준화 하기 위해서 W3C의 워킹그룹이 따라야 하는 여러 절차와 요구사항이다. 그리고 각 단계들은 공개된 문서가 최종 권고안으로 발전하기까지 어느 상태에 있는지 알려준다. “Working Draft:초안”과 “Working Group Note:노트”는 표준화 단계 중 시작 단계이고, “Recommendation:권고”, “Working Group Note:노트”, “Rescinded Recommendation:철회 권고”는 작업이 종료되었음을 나타낸다. (“Working 더보기…