DEV
-
웹 아키텍처 101DEV/Back-end 2018. 10. 24. 22:28
웹 개발자 일을 시작할 때 미리 알고 있었다면 좋았을 기본적인 웹 아키텍처 개념들- 원문: https://engineering.videoblocks.com/web-architecture-101-a3224e126947 위 도표에 저희 Storyblocks 서비스에서 사용중인 아키텍처가 상당히 잘 표현되어 있습니다. 숙련된 웹 개발자가 아닌 이상 도표가 복잡하다고 느낄 수 있습니다. 아키텍처를 이루고 있는 컴포넌트를 하나하나 자세히 들여다 보기 전에, 아래의 내용을 먼저 읽어본다면 접근하기가 좀 더 쉬워질 것입니다.한 사용자가 구글에 "숲에 내리쬐는 강렬하고도 아름다운 햇살과 안개"를 검색합니다. 맨 처음 나온 검색 결과는 우리의 선구적인 스톡 사진 및 벡터 그래픽 사이트인, Storyblocks 사이트에서..
-
스타일-컴포넌트 5분 간단 소개DEV/Javascript 2017. 2. 4. 21:51
원문 바로가기: A 5-minute Intro to Styled Components By Sacha Greif, Jan 23 2017 스타일-컴포넌트 5분 간단 소개 CSS는 이상합니다. 기본적인 내용은 15분이면 다 배울 수 있지만, 효율적인 작성법을 익히려면 시간이 많이 걸립니다.그 원인 중 하나는 언어 자체에 있습니다. CSS가 제공하는 기능은 꽤 제한적입니다. 변수도 없고, 루프문과 함수 사용이 불가능합니다. 그러면서 또 상당히 관대한 면도 있어서 개발자가 요소를 쓰던, 클래스나 ID를 쓰던, 아니면 그 어떤 선택자를 쓰던 다 받아줍니다. 스타일시트 아비규환 아마 이미 경험 해보셨을 테지만, CSS를 사용하면 종종 혼란으로 향하는 급행열차에 탄 것과 같은 기분을 느낄 수 있습니다. SASS나 LE..
-
상황에 따라 다르게 적용하는 CSS 방법론DEV/CSS 2017. 2. 2. 00:39
상황에 따라 다르게 적용하는 CSS 방법론 원문: When to use which CSS methodology by simurai 해가 지날수록 점점 더 많은 CSS 방법론이 등장하고 있습니다. 그러나 불행하게도 언제나 먹히는 CSS 방법론은 존재하지 않기 때문에, 이 글에서는 프로젝트의 성격에 따라 어떤 CSS 방법론이 적합한지에 대해 살펴보겠습니다. 좋아요, 이제 그럼 CSS 방법론으로 가득 찬 캄캄한 동굴 속으로 들어가 봅시다. 저는 그냥 단일 페이지 사이트나 간단한 사이트를 만들고 싶어요. 콘텐츠는 대부분 텍스트로 이루어져 있고, 폼 요소가 한두개 정도 들어가 있어요. 같이 개발할 사람은 없고, 그냥 저 혼자 (그리고 제 고양이랑) 만듭니다. 👉 요소에 클래스를 부여하여 이를 선택자로 사용하는 대..
-
CSS로 자식 요소 갯수 알아내기DEV/CSS 2017. 2. 2. 00:37
CSS로 형제 요소 갯수 알아내기 소개 문서 원본 바로가기 (게시일: 2014년 6월 10일)CSS로 형제 요소 갯수를 알아내는 방법은 2009년 André Luís가 포스팅을 통해 처음 제안하였고, 2년 후에 Lea Verou가 보완하였습니다. 알아 둘 만한 가치가 있다고 생각합니다. 본 기법은 다양하게 응용될 수 있는데, 원본 문서에서는 li 요소 갯수에 따라 블록 안의 배경색을 다르게 매기는 것을 예시로 들었습니다. (flexbox를 사용할 수 없는 환경이라고 가정합니다.)다음 코드에서는 float:left를 사용하여 li 요소들을 띄운 상태입니다. li { float: left; } /* li가 하나일 때 */ li:first-child:nth-last-child(1) { width: 100%; ..
-
캐스케이딩 정리DEV/CSS 2017. 2. 2. 00:35
캐스케이드 정리 (출처: CSS 완벽 가이드, Eric Meyer, 2007, 위키북스) 상속이란, 일부 속성값들이 어떤 요소에서 그 자손 요소로 넘겨지는 방식을 의미한다. 사용자 에이전트가 요소에 어떤 값을 적용해야 할지 결정할 때에는 상속뿐 아니라 선언 자체의 기원(origin)과 구체성(specificity)도 고려해야 하며, 이런 고려 과정(process)를 캐스케이드(cascade)라고 부른다. 구체성 어떤 규칙이 우선인지 어떻게 알 수 있을까? 선택자 각각의 구체성을 보면 알 수 있다. 만약 요소에 상반되는 두 가지 이상의 속성 선언이 있다면, 구체성이 높은 선언이 우선한다. 구체성 값은 0,0,0,0처럼 4개의 값으로 표현되는데, 다음과 같은 규칙으로 계산된다. 선택자에 있는 모든 id 속성..
-
Spacer GIFDEV/HTML 2017. 2. 2. 00:32
Spacer GIF 작성일: 2016.8.30 Tue Spacer GIF 알아보기 해당 마크업 작업 당시에는 Spacer GIF라는 명칭을 몰랐는데, 나중에 위키피디아에서 웹 디자인 항목을 읽다가 그것을 일컫는 명칭을 발견했다. ...To create complex designs, many web designers had to use complicated table structures or even use blank spacer .GIF images to stop empty table cells from collapsing.... 테이블 코딩 시절, HTML 요소 레이아웃(특히 테이블 요소) 유지를 마땅히 CSS로 해결할 수가 없었으므로 위해 사용했다고 한다. CSS가 널리 사용되기 시작한 후로는 대부분..
-
W3C 스펙 문서 읽는 법DEV/HTML 2017. 2. 2. 00:28
W3C 스펙 문서 읽는 법 원문: How to Read W3C Specs, J.David Eisenberg, 2001년 9월 28일W3C에서 하는 일은 모든 웹 기술에 대한 스펙 제정입니다. 웹 디자이너로 일을 한 경험이 있다면 W3C 사이트를 방문한 적이 있을 것입니다. 아마 XHTML 사용법에 대한 궁금증이 생겨서 방문했을 수도 있고, XSL 포매팅 객체 혹은 SVG에 대한 궁금증을 해결하기 위해서 였을수도 있죠.아무튼 뭔가에 대해 알아보기 위해 관련 스펙 문서를 읽다 보면, 십중팔구 엄청난 혼란에 빠지면서 포기하게 될 것입니다. "이건... 도대체 누구 읽으라고 만들어 놓은 걸까?" 이런 생각과 함께 말이죠. 그런데 말입니다, 스펙 문서에 대한 아주 중요한 사실 하나만 알고 있다면 읽을 수 있습니다..
-
프론트엔드 개발자를 위한 가이드 문서 모음 (NO. 10)DEV/유용한 사이트 2017. 1. 31. 15:15
프론트엔드 개발자를 위한 가이드 문서 모음 (No. 10) 원문: 20+ Docs and Guides for Front-end Developers (No.10) by Louis Lazaris또 다시 배움의 시기가 찾아 왔네요! 전편과 마찬가지로, 이번 글에서도 프론트엔드의 다양한 분야에서 개발 속도를 높이는 데 도움이 될 법한 가이드, 문서, 웹사이트 등의 학습 자료들을 모아보았습니다.그러니 친히 저희가 준비한 문서 및 가이드 시리즈 그 열번째 글을 즐겨 주시고, 혹시나 빠트린 것이 있다면 댓글을 통해 알려주시는 것도 잊지 마세요. 1. CSS 모드 쿼리 및 범위 선택자(Mod Queries and Range Selectors) 패트릭이 최근 A List Apart에 기고한 “모드 쿼리”에 관한 글을 읽..