새 CSS 문법으로 웹 디자인 엔지니어링하기

발표자는 최근 몇 년간 CSS에 다양한 새 문법들이 추가되었지만 사람들은 쓰던 기능만 쓴다며 작업자들에게 실제로 도움 될만한 CSS 문법들을 소개하는 내용의 영상입니다. 50분 영상 중에 기억에 남는 내용만 하나 정리해보았습니다.


14:36 Fluid Typography (유동적 타이포그래피)

font-size: clamp(1rem, 0.6522rem + 1.7391vw, 2rem);

레이아웃이 맘에 안 들 때마다 매번 새 중단점(Breakpoints)을 추가하는 대신에 CSS의 clamp 문법을 사용해서 뷰포트 크기에 따라 요소의 크기가 유동적으로 조정되는 시스템을 만드는 방법을 소개합니다. clamp는 글꼴 크기뿐만 아니라 글자 사이의 공백(whitespace) 간격도 조정해 줍니다.


clamp는 (최소값, 기본값, 최대값) 순서대로 입력하며 Chrome 79, Safari 13.1부터 지원되는 문법으로, 96.3%의 브라우저 버전에서 사용 가능하므로 현재 시점에서 호환성이 꽤 높습니다.

개발자와 디자이너의 협업도 Utopia라는 Figma 플러그인을 사용하면 가능합니다. Utopia를 사용하면 유형별로 clamp CSS 변수 코드를 생성해 주고 이를 타이포그래피 별로 지정하면 시스템화 할 수 있습니다. 반응형을 중요시 여기는 서비스라면 도입해 볼 만한 가치가 있을 것 같습니다.


웹사이트 제작은 팀 스포츠고, 디자이너와 개발자가 긴밀히 협력해서 CSS의 잠재력을 최대한 활용해야 한다는 내용도 기억에 남았습니다. 디자이너가 CSS를 배우고, 개발자도 디자인에 참여해야 한다고 하는데 맞는 말인것 같습니다.


https://www.youtube.com/watch?v=su6WA0kUUJE&ab_channel=WebConferencesAmsterdam

- YouTube

www.youtube.com

 - YouTube

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2024년 9월 17일 오전 11:17

 • 

저장 77조회 3,890

댓글 1

함께 읽은 게시물


주니어 개발자들이 읽으면 좋은 테크 아티클 모음📚

F-Lab 에서 주니어 개발자들이(사실 개발자라면 누구나) 보시면 좋을 아티클 모음을 공유해 주었네요! 검색엔진부터 비동기 처리, NoSQL 등 다양한 분야의 아티클들이 공유되어 있으니 관심있으신 분들은 보시면 좋겠습니다. F-Lab 에서 공유해주신 아티클 주제를 나열해보면 다음과 같습니다. 📌 구글이 직접 말하는 검색엔진의 원리 (tali.kr) 📌 검색 엔진은 어떻게 작동하는가 (xo.dev) 📌 네이버의 검색엔진의 특징과 알고리즘 (tistory.com) 📌 [네이버 블로그]네이버 검색의 원리 : 네이버 블... 더 보기

주니어 개발자들이 읽으면 좋은 테크 아티클 모음

F-Lab : 상위 1% 개발자들의 멘토링

주니어 개발자들이 읽으면 좋은 테크 아티클 모음

 • 

저장 148 • 조회 4,081



발이 닿지 않는 바다에서

... 더 보기

발이 닿지 않는 바다에서

hajoeun.com

발이 닿지 않는 바다에서

 • 

저장 2 • 조회 1,430


전략적 입사 지원

... 더 보기

Next.js 프로젝트를 AWS EKS에 배포하며 배운 것들

... 더 보기

쿠버네티스를 활용한 클라우드 네이티브 데브옵스 | 존 어런들 - 교보문고

product.kyobobook.co.kr

쿠버네티스를 활용한 클라우드 네이티브 데브옵스 | 존 어런들 - 교보문고

 • 

저장 24 • 조회 2,152