O612의 데브런닷 스튜디오

CSS로 background-image를 사용하거나 img 태그로 이미지를 넣었을 때 이미지가 뭉개지거나 흐릿하게 렌더링되는 현상이 발생할 때가 있습니다. (레티나 디스플레이에서는 발생하지 않습니다) 이 경우 웹킷 벤더를 붙여서 뚜렷하게 처리하는 방법을 쓸 수 있죠. 시작하기 전 안내 사항 이미지는 대개 블럭 형태로 사용합니다. 그래서 display: block을 추가했습니다. 코드 몇 줄이면 끝! image-rendering, transform, backface-visibility를 사용하면 border-radius가 동작하지 않습니다. border-radius 사용할 것을 대비하여 overflow: hidden…

이번 포스팅에서는 브라우저 가로폭에 따라서 자식 요소의 박스 비율 유지해서 개발하는 기법에 대해 설명합니다. 이 기법은 대개 유튜브 영상을 반응형으로 넣는다거나, 썸네일 비율을 일정하게 맞춰서 반응형 처리하게 한다던가 할 때 주로 씁니다. 비율은 1920 by 1080 기준으로 설명합니다. (16/9 비율) relative + padding-top 56.25%는 새로 / 가로 100을 한 값입니다. 즉 위 경우에는 1080 / 1920 100 입니다. aspect-ratio 16 / 9, 1920 / 1080 둘 다 됩니다. 주의사항 relative + padding-top 방식에서 반드시 감싸는 영역의 height는 0을 지정해 줘야 합니다. aspect-ratio 방식은 부모가 flexbox…

Prologue Image Assets과 Inherit(상속)을 중점적으로 두 가지 방식을 비교합니다. 이 글에서는 CSS 보다는 필자가 좋아하는 Sass 기준으로 설명합니다. Image Assets emotion styled로는 import로 image를 불러와서 쓸 수 있습니다. image는 2가지 방식으로 불러와서 쓸 수 있는데 /src/assets/index.js 파일을 만들어 관리합니다. 코드에 있는 icons, backgrounds는 디렉토리입니다. Next.js 기반이라면 용량이 작은 이미지라면 컴파일시 자동으로 base64 코드로 직접 스타일 파일에 들어갑니다. 이름은 camelCase로 작성합니다. 불러올 때는 위와 같이 images를 import…

Prologue 지난 편에서 CSS의 단점이 Class 이름이 중복되게 네이밍을 지을 위험성이 있고 JavaScript와 연동이 어렵다고 언급을 했습니다. CSS Module은 개발자가 부여한 class 이름 뒤에 숫자나 알파벳이 자동으로 부여하여 class 이름이 중복되는 것을 방지합니다. CSS CSS. Sass. 이 코드에서는 클래스 선택자 없이 h1 태그 단독 스타일을 넣었습니다. 이렇게 작성하면 모든 h1에 대해 font-weight: 700이 적용됩니다. 전역(Global)적으로 적용하고 싶다면 이렇게 쓰는 게 맞습니다. 앞에 .container 같은 클래스 선택자를 사용해도 이론상으로는 전역적으로 작동합니다. CSS. Sass. 어떤 페이지, 어떤 컴포넌트던지 .container 안에 h…

Prologue 마크업(Mark-up; HTML)을 Styling하는 가장 고전적이고 흔히 사용하는 방법이 CSS 입니다. CSS는 3가지 방법으로 작성할 수 있습니다. style 태그를 사용하는 방법, 태그(Element) 안에 style 속성(Property)을 사용하는 방법, 마지막으로 .css 확장자를 사용하는 파일을 사용해 작성하는 방법. CSS의 단점은 Class 이름이 중복되게 네이밍을 지을 위험성이 있고 JavaScript와 연동이 어렵다는 점입니다. CSS-in-JS는 JavaScript 언어로 CSS를 코딩하는 것을 말합니다. “CSS-in-JS”는 외부의 파일에 CSS를 정의하는 대신에 JavaScript와 결합하는 패턴을 의미합니다. ( 출처: reactjs.org ) CSS Pre…