Kendrick's Blog

홈페이지 디자인을 위한 줄 바꿈 위치 제안 ­ facial covering are required라는 문장을 한정된 공간에 넣는다면 어떻게 보일까요? 클라이언트에게 작업을 수주받았다고 생각해 봅시다. 작업 요청사항을 보니 Hi There라는 타이틀과 마스크 필수라는 문장이 쓰여 있는 문구가 필요하다고 합니다. 대충 CSS를 넣고 만들어보니 아래와 같이 보입니다. 물론 width를 늘리면 되지 않냐고 할 수 있지만 클라이언트가 고집부려서 Hi there와 같은 width를 가지고 싶다고 가정합니다 :) ­ Hi There facial cover­ing are requir­ed 당연하게도 covering과 required라는 글자가 밖으로 삐져나오게 됩니다. 작업을 시작하자마자 생각지도 못한 Rabbit h..

paywall을 위한 CSS Gradient Paywall이란 Paywall이란 유저가 찾는 약간의 컨텐츠만 제공하고, 전체 컨텐츠를 보고 싶을 때는 돈을 내서 구독하게 하는 방법입니다. 지난 수년동안 많은 서비스가 페이월을 사용 중입니다.. 예를 들어 뉴스 사이트들이나 Medium 그리고 Wired도 사용하고 있습니다. (지금은 안쓰는 곳도 많지만요) 이 포스트에서는 paywall에서 사용되는 팝업이나 백엔드 처리가 아닌, 단순히 linear-gradient CSS style을 통해 아래로 갈수록 사라지는 효과를 어떻게 작성하는지 설명합니다. Gradient로 흐려지는 효과 적용하기 단순히 CSS의 linear-gradient를 통해 사라지는 효과를 어떻게 구현하는지에 대해서 알아보겠습니다. CodeP..

이 글은 Ohans Emmanuel의 CSS Naming Conventions that Will Save You Hours of Debugging 을 번역한 내용입니다.Ohans Emmanuel(원작자)의 허락을 받은 후 작성되었으며, 이 글의 모든 저작권은 Ohans Emmanuel에게 있습니다. 이해의 편의상 의역이 들어가 있습니다.잘못된 번역은 댓글로 남겨주시면 감사하겠습니다!디버깅 시간을 절약할 수 있는 CSS 네이밍저는 많은 개발자들이 CSS가 싫다고 하는 것을 들었습니다. 하지만 제 경험에 의하면, 이런 불만이 생기는 이유는 그들이 CSS를 배우는 데 시간을 들이지 않기 때문입니다.CSS는 가장 아름다운 언어는 아니지만 20년 이상의 웹 스타일링을 성공적으로 수행해 왔습니다.하지만 더 많은 C..

이 글은 Jake Trent의 Event handler naming in react를 번역한 내용입니다.Jake(원작자)의 허락을 받은 후 작성되었으며, 이 글의 모든 저작권은 Jake에게 있습니다. 이해의 편의상 의역이 들어가 있습니다.들어가기 전React를 이용하여 작업 시, handler와 event 명명 규칙이 명확하지 않아서 코드가 쓸데없이 보기 힘들어지는 경우가 있습니다. 이에 대해 명확히 설명하는 공식 가이드가 마땅히 보이지 않아, 여러 글을 찾아봤고 Jake Trent의 포스트를 본 후 많은 도움이 되었습니다. 그렇기에 이 가이드를 준수하라는 내용이 아니며, 이러한 규칙에 대해서 생각하고 참고하시면 좋을 것 같습니다.React의 이벤트 핸들러 네이밍 (Event handler naming ..

배열에서 가장 큰 정사각형 찾기프로그래머스에서 제공하는 문제 중 하나입니다.배열 내부를 탐색하여 가장 큰 정사각형을 찾는 알고리즘입니다.배열은 아래와 그림과 같이 제공되며 1이 정사각형일 때, 배열 내부의 가장 큰 정사각형의 값을 return 합니다. 위와같은 배열이 있으며, 가장 큰 정사각형은 아래와 같습니다.가장 큰 정사각형이 9칸을 차지하고 있으므로 답은 9입니다. 구현하는 방법이야 여러가지가 있겠지만 10000*10000의 배열이면 성능에 문제가 생기게 됩니다. 그래서 성능을 고려하여 DP(Dynamic Programming)를 사용하여 구현할 수 있습니다. 자바스크립트로 구현한 방법은 아래와 같습니다.function solution(board) { var answer = 0; var length..

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천해 드립니다.fr?fr이란 유연한 크기를 갖는 단위입니다. 그리드 컨테이너 내의 공간 비율을 분수(fraction)로 나타냅니다.사용자가 계산해야 할 부분을 fr을 통해서 쉽고 유연하게 사용할 수 있습니다..grid { display: grid; grid-template-columns: auto 100px 1fr 2fr;}1번 열은 auto를 사용한다. 해당 Element 내부 콘텐츠에 맞게 사이즈가 조정된다.2번 열은 100px을 할당한다. 100픽셀 크기만큼의 폭을 차지한다.3번 열은 1fr 크기를 할당한다. 1fr이란 남은 자유 공간의 1/3(총fr)만큼의 크기를 할당한다.4번 열은 2fr 크기를 할당한다. 2fr이란 남은 ..

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천해 드립니다.Grid name을 이용한 Grid 나누기보기이번 예제에서는 grid css 중 grid-template-columns와 grid-template-rows를 사용합니다.여기에 Grid Name을 할당하여 레이아웃을 나눠보도록 하겠습니다.html element 설정아래와 같은 class를 가진 element를 생성해 줍시다. Menu Content Sidebar Footer Grid Name 설정.container { display: grid; height: 100vh; grid-template-columns: [left-navbar-start] 20% [left-navbar-end content-start] 60% [..

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천드립니다. fr 단위를 이용하여 grid 나누기이번 코드에서 중요 포인트는 fr단위입니다.보기아래 css를 보시죠.container { display: grid; height: 100vh; grid-template-columns: 1fr 4fr 1fr; grid-gap: 10px 100px; margin: 10px;} .grid-item { background-color: rgb(74, 173, 228);}grid-template-columns를 보시면 1fr + 4fr + 1fr => 총 6개의 fragment로 나눕니다.데모를 보시면 바로 이해가 가실겁니다.하지만 특이한 점이 있는데 grid-gap이 위에서 나눈 fragmen..

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천드립니다. grid-column, grid-row를 이용하여 grid 나누기grid-column과 grid-row를 이용하여 레이아웃을 나누는 법을 알아보겠습니다.우선 기본적인 grid css를 적용해 줍시다.보기.container { display: grid; grid-gap: 20px; height: 100vh; grid-template-columns: 100px 200px auto auto;} .grid-item { background-color: rgb(74, 173, 228);}여기까지는 이전 예제와 별 차이가 없어 보이는군요 우선 현재 grid 설정을 봅시다grid-template-columns: 100px 200px ..

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천드립니다. grid-area를 이용한 Grid Layout첫번째 파트입니다.간단하게 그리드를 구현해보겠습니다.아래와 같은 Grid Layout으로 시작해봅시다.보기index.htmlDOCTYPE html> Document Header Nav Section Aside-right Footer 간단한 구조로 되어있습니다.div.container 안에는 header, nav, section, aside, footer 다섯 가지 레이아웃을 위한 시맨틱요소가 있습니다.head에는 두 가지 css 파일을 가져오고 있는데 에릭 마이어의 css 초기화를 위한 reset.css 파일 그리고 grid 관련 스타일 시트를 불러오고 있습니다.reset...

시작하며CSS Grid 관련 내용은 아래 Github에서도 보실 수 있습니다.Github 바로가기CSS Grid?우리는 지금까지 일반적으로 그리드를 구현할 때 라이브러리를 사용하곤 했습니다. ex) Bootstrap, fancyGrid 등 하지만 CSS에 공식 GRID 지원 기능이 있습니다.다만 문제라면 Firefox 52, Chrome 57이상 버전의 브라우저를 사용하거나 크롬의 flag 기능을 이용해야 합니다.이렇게 보니 계륵이네요.그러니 실제 Grid 기능은 위에 언급한 라이브러리를 사용하시고, CSS에서도 Grid를 지원하긴 하는구만~ 하시면 더 좋을 듯 합니다.목차추후 정리 예정입니다.마치며이번 주제의 포스트들은 Egghead의 강의를 기반으로 하고 있으며, 강의 내용에서 참고하여 설명이 부족한..

React처럼 생각하기이번 공식문서의 파트 제목은 Thinking in React입니다. 아마도 Thinking in C++, Thinking in Java 등 유명한 시리즈가 있는데 이에 대한 오마쥬가 아닌가 싶습니다.React에서의 앱(혹은 컴포넌트 구조) 설계에 대한, 어렵지 않지만 매우 중요한 내용을 설명하고 있습니다.그래서 제목이 Thinking in React?모의 기능을 만들기음악 리스트를 JSON 형식으로 받아서 이를 테이블로 볼 수 있고 필터 할 수 있는 기능의 테이블을 만들어 봅시다.1. UI를 Component 계층 구조로 만들기 위한 준비지금부터 만들 필터 테이블은 아래와 같은 화면으로 구성됩니다.이 화면에 사용될 JSON 데이터는 아래와 같습니다.var MUSIC_DATAS = [..