전체 글
-
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에 기고한 “모드 쿼리”에 관한 글을 읽..
-
[서적] 프론트엔드 개발자를 위한 자바스크립트 프로그래밍DEV/Javascript 2017. 1. 22. 20:46
자바스크립트 프로그래밍 니콜라스 C. 자카스 저/한선용 역자바스크립트 웹 개발에 필요한 모든 것자바스크립트의 가능성을 최대한 이끌어 내려면, 언어 본연의 특성과 역사, 한계를 알아야만 한다. 자바스크립트 구루이자 노련한 저자인 니콜라스 자카스는 이 책에서, 자바스크립트의 기초부터 DOM, Ajax, HTML5까지를 설명한다. 상황에 따라 자바스크립트를 어떤 식으로 확장할 수 있는지, 역동적인 사용자 인터페이스는 어떻게 만들 수 있는지를 풍부한 예제를 곁들여 알려준다. 이 책을 통해 자바스크립트의 깊은 영역까지 확실히 이해할 수 있을 것이다....yes24 상품 링크: http://www.yes24.com/24/goods/8858182?scode=032&OzSrank=15재작년에 학부 수업때 웹 프로그래밍..
-
[자바를 다루는 기술, 길벗] 클래스와 객체, 인스턴스 개념 구별하기DEV/Back-end 2016. 2. 3. 09:53
클래스와 객체, 인스턴스 개념 구별하기 객체 지향 프로그래밍 = 프로그램을 설계하는 방법에 대한 이론 정해진 문법이 아니다. 한 개 이상의 클래스들이 서로 유기적으로 동작. 자바에서 클래스는 프로그래밍의 기본 단위이다. 객체: 데이터 혹은 기능을 갖고 있어, 그 목적을 수행하는 것이다. 클래스 vs 객체: JVM 힙 메모리 영역에 생성되었는지 여부 클래스가 JVM의 메모리를 할당받아서 생성되었을 때, 비로소 클래스에서 객체로 호칭이 변화된다. 클래스는 객체를 만들기 위한 일종의 기능 명세서이며 객체는 그 결과물이다. 클래스로부터 새로운 객체를 만드는 과정 = 인스턴스화 개발자가 만들고자 하는 객체의 기능과 속성을 논리적으로 뽑아내어 클래스로 설계하는 과정 = 추상화 클래스 간의 관계를 유기적으로 설정하기..
-
[Spring] 메이븐 스프링 강제 업데이트DEV/Back-end 2016. 2. 2. 22:00
간단한 예제를 따라하던 도중에 POM.xml 내용 변경 후 업데이트를 하다가 실수로 중단을 시켜버렸다.Maven > Update Project해도 안되길래 또 다시 스택오버플로우로!역시나 해결 방법은 간단했다. 옵션 -U를 같이 써주는 것. 의존성 업데이트를 강제로 하는 키워드다. mvn clean install -U 혹은 해보지는 않았지만, 아래의 답변에 의하면 이클립스에서 바로 시도 해 볼 수 있는 방법은 아래와 같다.답변에도 달려있듯이 커맨드 라인 옵션 -U를 이클립스에서 메뉴 클릭에 의해 실행한 셈이다. Project_Name->Maven->Update Project Configuration->Force Update of Snapshots/Releases 스택오버플로우 링크: Force maven..