CSS에는 다양한 속성이 있지만, 사용할 때는 은근히 까다로운 속성도 있습니다. 아래 몇 가지 쉬운면서도 어려운 CSS 속성을 예제를 통해 알아보겠습니다. clip-path clip-path는 요소의 시각적 영역을 제어하는 CSS 속성입니다. 이 속…

웹 디자인 및 개발에서 크로스 브라우저 호환성은 항상 큰 주제입니다. CSS의 규칙은 이 문제를 해결하는 데 큰 도움을 줍니다. 이 규칙을 사용하면 특정 CSS 기능이 브라우저에 의해 지원되는지 여부를 확인하고 조건부로 스타일을 적용할 수 있습니다…

디자인 패턴의 프론트엔드 적용 사례 디자인 패턴은 반복적으로 나타나는 프로그래밍 문제를 해결하기 위한 입니다. 이번 글에서는 대표적인 디자인 패턴을 프론트엔드에 어떻게 적용할 수 있는지, 간단한 예제 코드와 함께 살펴봅니다. 모듈 패턴 (Module…

프론트엔드에서 애니메이션을 구현하는 방법은 다양합니다. CSS 속성만으로도 구현이 가능하죠. 하지만 단순한 애니메이션이면 몰라도 조금만 난의도가 올라도 CSS 코드는 매우 복잡해집니다. 아래 몇 가지 예를 들어 프론트엔드에서 애니메이션 구현하는 방…

CSS의 z-index 속성은 웹 페이지에서 요소 간의 순서를 조절할 때 중요한 역할을 합니다. 그러나 z-index의 동작 방식을 제대로 이해하지 못하면 혼란스러운 상황에 빠집니다. 도대체 어디가 문제인지 알 수 없게 되어버리죠. 오늘은 CSS를 …

지금껏, 이 블로그는 로 CSS를 작성하고 있었다. 대표적인 CSS-in-JS 방식이다. 블로그는 스타일 코드가 많지 않기 때문에 CSS-in-JS로 만들어도 충분하다. 하지만, 조금이라도 빠르게 만들어보기 위해 CSS Modules 방식으로 변경해…

지난번 포스팅(CSS-in-JS에서 CSS-in-CSS로 바꿔야 하는 이유)에는 CSS-in-JS에서 CSS-in-CSS 방식으로 변경해야 하는 이유에 대해 설명했다. 요약해보면, 다음과 같다. 성능에 초점을 맞춘다면 , 개발 생산성에 초점을 맞춘…

는 쉽지 않다. 처음 배울 때는 ‘이 정도쯤이야?’라는 생각이 들 정도로 쉬워 보인다. 실제로 러닝커브가 그리 높지는 않다. 그래서 과거에는 주로 신입이나 경력이 짧은 사람에게 맡기는 경우가 많았다. 당시에는 프론트엔드 영역이 명확히 나뉘어 있지 않…

는 검색 결과 순위를 높이는 작업을 의미한다. 사용자가 구글에서 검색어를 입력하면, 검색엔진은 인덱싱해둔 수많은 웹 페이지 중 가장 적합한 순서대로 결과를 노출한다. 결과를 노출하는 순위를 결정하는 알고리즘은 공개되어 있지 않다. 하지만, 다양한 채…

글을 작성하면 자동으로 생성되는 목차(TOC)를 만들어 보자. 간략한 스펙은 아래와 같다. 글을 하단으로 스크롤 하면 Header의 위치에 맞게 하이라이트 됨 항목을 클릭하면 해당 Header의 위치로 이동 Header 단계(# ~ ####)에 따른…

disqus는 왜 이렇게 무거울까? 에서 내 블로그가 그리 빠르지 않다는 것을 발견했다. 를 사용하는 정적 페이지 사이트임에도 불구하고 빠른 페이지가 하나도 없다. 뭔가 이상하다. 혹시 몰라 PageSpeed Insight를 이용하여 퍼포먼스를 …

프론트엔드 개발에서 Block Formatting Context(이하 BFC)라는 용어는 그리 자주 사용하지 않는다. 아예 들어본 적 없는 사람도 많을 것 같다. 그러나, BFC는 용어에 비해 어렵지 않다(용어가 많아 조금 헷갈리긴 하다). 누구나 …

은 웹에서 를 담당한다. 웹페이지의 뼈대를 만들고 레이아웃을 구성한다. 웹사이트마다 구성은 다르지만, 대체로 헤더(Header), 내비게이션(nav), 콘텐츠(main), 그리고 푸터(footer)의 조합으로 만들어진다. 각 영역은 기능에 따라 구분…

의 영역이 점점 커지고 있다. 과거의 프론트엔드는 HTML과 CSS와 약간의 Javascript(이하 JS)를 다루는 영역이었다. 흔히 웹 퍼블리셔의 역할인 UI개발이 주된 업무였다. 하지만, 웹의 기능이 복잡해지고 동적 요구사항이 늘어나면서 과거 …

스크롤하면 숫자 1부터 9까지 모양이 점진적으로 변하도록 만들어보았다. 각 숫자의 형태를 만들기 위해 웹에서 사용가능한 벡터 이미지인 SVG를 이용해 구현했다. SVG가 뭐지? 라는 분들이 있다면 W3Scools의 SVG Tutorial을 읽어보자.…

이전에 만들었던 roulette는 실제 프로젝트에서 사용하기에는 다소 무리가 있다. 애초에 테스트 용도로 만들었기 때문이다. 실제 프로젝트에서 사용 가능하도록 몇가지를 수정하려고 한다. 항목은 다음과 같다. deprecated된 clip 속성을 제거…

이 글은 Introducing Sass Module)를 참고하여 정리하였다. 최근, SCSS(사스, Sass)에 모듈 시스템(Module System)을 지원하기 위한 새로운 feature들이 몇가지 승인(accepted)되었다. 그 중에 at-ru…

애플의 웹 사이트는 멋지다. 사이트에 특별한 기능이 있는건 아니다. 대부분 제품 소개 페이지다. 제품 소개페이지를 얼마나 잘 만들었길래, 뭐가 멋지다는걸까? 의문이 들 법하다. 그런데, 하나하나 살펴보면, 정말 세심하게 공들인 느낌이다. 단순한 웹 …

요즘 프론트엔드 개발자들은 (Visual Studio Code)를 가장 많이 사용한다. 그렇다보니 버그 수정이나 기능추가가 상당히 빠르다. 또한 Typescript와의 호환성도 훌륭하다. 아마도 MS에서 둘다 만들었기 때문이라 생각한다. 그리고 VS…

if kakao가 매우 성황리에(?) 마무리되었다. 공식적인 if kakao 행사가 두번째임에도 불구하고 꽤 완성도 있었다 생각한다. 특히 의 리액트: 그것마저 결정해주마와 의 프론트엔드 기술로 동료들 삶의 질 높여주기 세션이 아주 흥미로웠다. 첫번…

페이이지를 만들었다. 404페이지가 뭔지 모르는 분은 없겠지만, 간단히 말하면 페이지를 찾지 못했을때 나타하는 에러 페이지다. 정상적이 상황에서 보이는 페이지가 아니기 때문에 대부분 서비스를 만들때 중요하게 생각하지 않는다. 하지만, 유명한 웹 서비…

그 동안 로 작업하면서 배운것들에 대해 알아보자. flexbox의 기초 flexbox의 기초를 다룬 좋은 글이 많기 때문에 여기서 다시 다룰 필요는 없을것 같다. 만약 flexbox에 대해 잘모르거나 잘 생각나지 않는분들이라면 아래 링크를 한번씩 …

웹 서비스를 이용하다보면 간혹 룰렛 형태의 뽑기 게임을 볼 때가 있다. 주로 적립금(캐시)이나 상품을 주기위한 목적으로 만든다. 그런데 이런 룰렛 게임을 하나의 원형 이미지만으로 만드는 경우가 많다. 일회성으로 사용할때면 아무 문제 없지만, 당첨되는…

공지사항이나 FAQ 페이지에는 가 많이 사용된다. 이라고도 하는데, 기본적인 리스트에서 각 항목을 터치(클릭)하면 세부 내용이 확장되는 형태의 UI다. 비교적 간단한 UI기 때문에 css와 javscript를 적절히 조합하면 누구나 손쉽게(feat.…

회사 동료의 리액트(react) 책이 출간되었다. 제목은 (Yes24, 교보문고, 알라딘) 부제는 다. 최신 자바스크립트의 기본부터 리액트, 최신(?) 리액트 문법인 hooks, 리덕스(redux), 바벨(babel), 웹팩(webpack), SSR…