사람과 사람 사이의 접점을 설계하는 프론트 엔드 엔지니어.

Facebook Twitter 

Posts

    CSS flexible 레이아웃: flex item의 정렬과 간격

    flex item의 팽창과 수축, flex item의 방향과 순서에 이어 오늘은 ‘flex item의 정렬과 간격‘에 관하여 설명합니다. 먼저 진행 축(main axis)과 교차 축(cross axis)을 이해할 필요가 있습니다. ‘진행 축’이란 flex item이 배치되는 축(x/y)을 의미합니다. ‘교차 축’이란 flex item이 배치되는 방향과 90도 교차하는 축을 의미합니다. 진행 축과 교차 축은 상대적인 개념이라서 flex-direction의 값(row, column)에 따라 교차 축이 바뀌기 […]

    CSS flexible 레이아웃: flex item의 방향과 순서

    이전에 “CSS flexible 레이아웃: flex item의 수축과 팽창” 이라는 포스트를 작성했는데요. 오늘은 flex item의 방향과 순서를 설명합니다.  오늘 설명할 속성은 flex item의 방향을 제어하는 flex-direction, 줄 바꿈을 제어하는 flex-wrap, 그리고 방향과 줄 바꿈을 단축 속성으로 제어하는 flex-flow, 배치 순서를 제어하는 order 라는 속성입니다. 예제를 보면서 이해하기에 충분하므로 자세한 설명은 생략합니다. flex item의 ‘방향’을 제어하는 ‘flex-direction’. […]

    CSS flexible 레이아웃: flex item의 수축과 팽창

    오늘은 흔히 flex 또는 flexible 박스 모델이라고 부르는 CSS Flexsible box layout module level 1(Candidate Recommendation) 명세를 설명해 보려고 합니다. 아직 표준 후보 단계이지만 현존하는 최신 브라우저에 flexible box layout module은 이미 구현되어 있습니다. 기존에 우리가 사용하던 레이아웃 기법은 display, float, position 으로써 컬럼 레이아웃을 표현하는데 한계가 있고 구현 방법이 복잡한 문제가 있었는데요. flexible(신축성 있는, […]

    레티나 디스플레이를 위한 클라이언트 측 이미지 처리 기법

    SK planet Syrup Store 개발그룹에서 웹 프론트엔드 개발을 담당하고 있는 정찬명입니다. 기존에 포스팅 한 ‘반응형 웹 기술 이해‘의 2탄으로 이번에는 레티나 디스플레이를 위한 클라이언트 측 이미지 처리 기법에 대해 사내에서 강의한 내용을 공유해 드립니다. 제가 설명하는 클라이언트 측 이미지 처리기법과 연계하여 서버 쪽에서의 처리되는 기술에 대해 작성된 ‘다양한 화면 밀도의 모바일 환경에서 효율적인 이미지 사용하기’ 에 대해서도 […]

    반응형 웹 기술 이해

    SK planet Syrup Store 개발그룹에서 웹 프론트엔드 개발을 담당하고 있는 정찬명입니다. 오늘은 반응형 웹 기술의 기본적인 원리와 실제 구현 시 빈번하게 마주치는 문제에 대한 해결 방법을 설명하려고 합니다. 포함한 사례들은 정답이 있는 문제가 아니기 때문에 여러 대안 가운데 하나의 사례 정도로 이해해 주세요. Part.1 가변폭 설정하기 Part.2 최솟값/최댓값 설정하기 Part.3 컬럼 나누기 Part.4 하이브리드 레이아웃 […]