반응형 웹 관련 패턴과 리소스를 정리하는 http://bradfrost.github.io/this-is-responsive/ 로 유명한 Brad Frost가
한달전 쯤 Atomic Design 이라는 새로운 개념을 제안하고 나왔습니다.
관련 포스트: http://bradfrostweb.com/blog/post/atomic-web-design/
관련 발표자료: http://www.slideshare.net/bradfrostweb/atomic-design
정리하면, 웹사이트는 원자-분자-조직?-템플릿-페이지 순으로 순차적으로 구성된 원소들의 시스템이라.. 이런 뜻인것 같은데요..
예를 들어, 원자는 버튼, text 입력, 등이고, 분자는 이들을 모은 검색창, 조직은 검색창, 메뉴들이 포함된 헤더, 템플릿과 페이지는 잘 아시는 개념이고요..

발표자료 마지막쯤에는, 원자-분자-조직 간의 조립을 어떻게 하는지, 워드프레스 스타일로 구현한 코드를 보여주기도 합니다.
사실 더 관심이 가는 부분은, 이러한 개념을 바탕으로 만들어놓은 패턴랩 ( http://patternlab.bradfrostweb.com/ ) 입니다.
어떻게 보면 (부트스트랩과 같은) 스타일 가이드/프레임워크의 일종으로 볼 수 있는데,
기존의 프레임워크 들과는 달리, 큰 덩어리 하나로 주어지는 것이 아니라, 각 단계별로 분리된 독립체들의 집합으로 보는 것이죠.
근래에 들어와서 이런 스타일의 작은 프레임워크들이 자주 등장하는 것 같아서, 최신 동향 차원으로 올립니다. ^^
예: Tiny Bootstraps ( http://daverupert.com/2013/04/responsive-deliverables/ )
한달전 쯤 Atomic Design 이라는 새로운 개념을 제안하고 나왔습니다.
관련 포스트: http://bradfrostweb.com/blog/post/atomic-web-design/
관련 발표자료: http://www.slideshare.net/bradfrostweb/atomic-design
정리하면, 웹사이트는 원자-분자-조직?-템플릿-페이지 순으로 순차적으로 구성된 원소들의 시스템이라.. 이런 뜻인것 같은데요..
예를 들어, 원자는 버튼, text 입력, 등이고, 분자는 이들을 모은 검색창, 조직은 검색창, 메뉴들이 포함된 헤더, 템플릿과 페이지는 잘 아시는 개념이고요..

발표자료 마지막쯤에는, 원자-분자-조직 간의 조립을 어떻게 하는지, 워드프레스 스타일로 구현한 코드를 보여주기도 합니다.
사실 더 관심이 가는 부분은, 이러한 개념을 바탕으로 만들어놓은 패턴랩 ( http://patternlab.bradfrostweb.com/ ) 입니다.
어떻게 보면 (부트스트랩과 같은) 스타일 가이드/프레임워크의 일종으로 볼 수 있는데,
기존의 프레임워크 들과는 달리, 큰 덩어리 하나로 주어지는 것이 아니라, 각 단계별로 분리된 독립체들의 집합으로 보는 것이죠.
근래에 들어와서 이런 스타일의 작은 프레임워크들이 자주 등장하는 것 같아서, 최신 동향 차원으로 올립니다. ^^
예: Tiny Bootstraps ( http://daverupert.com/2013/04/responsive-deliverables/ )
댓글 7개
조금 다른 얘기일 수 있는데, 요새 element query 라는 것이 제안되고 있습니다.
(링크 영문 주의 ^^;)
http://coding.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/
http://filamentgroup.com/lab/element_query_workarounds/
특히 두번쨰 글의 그림들을 보시면 좀더 이해가 되는데요,
만일 달력 컴포넌트를 만드는 경우, 월별보기와 목록보기 두가지 형태로 표현할 수 있는데,
이것이 전체 화면 크기로 제어 (미디어 쿼리) 되는 것이 아니라,
그 컴포넌트를 포함하는 부모 div의 가로폭 또는 그 자신의 크기에 따라 제어 (엘리먼트 쿼리) 되어야 한다는 것것입니다.
예로,
[http://filamentgroup.com/images/elemq_template-1.png]
위의 경우는 달력이 본문에 들어있고,
[http://filamentgroup.com/images/elemq_template-2-ideal.png]
이것은 달력이 사이드바에 들어있는 것인데,
이 둘을
.calendar (min-width: 500px) {
/* 월별보기를 위한 css */
}
.calendar (max-width: 499px) {
/* 목록 보기를 위한 css */
}
식으로 특정 요소에 직접 조건을 주는 형태로 만들자는 것입니다.
이런 접근 방법은, 달력 컴포넌트 (마크업, 서버코드, css) 를 어디에다가 넣어도 알아서 컨텍스트에 맞게 적절하게 표현해주자는 것이죠.
물론 가까운 미래에 표준으로 채택되지는 않을것 같고, 비슷한 기능을 위한 js 들이 나오거나 (첫번째 링크) 나올것 같기는 합니다.
어쨋든, 최근에 얘기되는 재사용을 위한 마이크로 패턴과 비슷한 것 같아서 남깁니다.
(링크 영문 주의 ^^;)
http://coding.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/
http://filamentgroup.com/lab/element_query_workarounds/
특히 두번쨰 글의 그림들을 보시면 좀더 이해가 되는데요,
만일 달력 컴포넌트를 만드는 경우, 월별보기와 목록보기 두가지 형태로 표현할 수 있는데,
이것이 전체 화면 크기로 제어 (미디어 쿼리) 되는 것이 아니라,
그 컴포넌트를 포함하는 부모 div의 가로폭 또는 그 자신의 크기에 따라 제어 (엘리먼트 쿼리) 되어야 한다는 것것입니다.
예로,
[http://filamentgroup.com/images/elemq_template-1.png]
위의 경우는 달력이 본문에 들어있고,
[http://filamentgroup.com/images/elemq_template-2-ideal.png]
이것은 달력이 사이드바에 들어있는 것인데,
이 둘을
.calendar (min-width: 500px) {
/* 월별보기를 위한 css */
}
.calendar (max-width: 499px) {
/* 목록 보기를 위한 css */
}
식으로 특정 요소에 직접 조건을 주는 형태로 만들자는 것입니다.
이런 접근 방법은, 달력 컴포넌트 (마크업, 서버코드, css) 를 어디에다가 넣어도 알아서 컨텍스트에 맞게 적절하게 표현해주자는 것이죠.
물론 가까운 미래에 표준으로 채택되지는 않을것 같고, 비슷한 기능을 위한 js 들이 나오거나 (첫번째 링크) 나올것 같기는 합니다.
어쨋든, 최근에 얘기되는 재사용을 위한 마이크로 패턴과 비슷한 것 같아서 남깁니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 8265 | |
| 20403 | |
| 20402 | |
| 20401 | |
| 20400 |
웹서버
서버 동시접속자 설정 변경하기
|
| 8259 | |
| 20399 | |
| 20398 | |
| 8255 | |
| 8249 | |
| 8246 | |
| 8242 | |
| 20396 | |
| 8240 | |
| 20395 | |
| 20394 |
MySQL
테이블 복사 쿼리
|
| 31033 | |
| 28385 | |
| 20393 |
PHP
현재 접속중인 사용자 나타내기
|
| 28380 | |
| 20392 |
MySQL
mysql select 후 update 하기
|
| 28377 | |
| 20391 | |
| 20390 |
PHP
한글문자열 자르는 법 입니다.
|
| 20389 | |
| 20388 | |
| 20387 |
PHP
이메일주소 검사하기 입니다.
|
| 20386 | |
| 20385 | |
| 20384 |
node.js
Node js 게시판 프로젝트 소개합니다.
|
| 20383 |
PHP
pc 모바일 체크
1
|
| 20382 |
PHP
계정 사용량(용량) 확인
|
| 8238 | |
| 20380 | |
| 20379 |
MySQL
소수점 반올림 버림
|
| 28376 | |
| 28372 | |
| 20378 | |
| 20377 |
PHP
에러 로그파일 생성하기
|
| 8235 | |
| 20375 | |
| 20374 | |
| 20373 |
PHP
후이즈검색 하기 입니다.
|
| 20372 |
PHP
그래프 그리기 입니다.
|
| 20371 |
JavaScript
자바스크립트로 구현한 number_format() 입니다.
|
| 20370 |
JavaScript
금액 관련 숫자를 한글로 변환하기 입니다.
|
| 28370 | |
| 20369 |
PHP
PHP 날짜 계산 관련 함수
|
| 28366 | |
| 20368 |
jQuery
jQuery 1.x와 2.x 버전 동시에 사용하기
|
| 20367 | |
| 20366 | |
| 20365 |
JavaScript
사업자 등록번호 검사하기 입니다.
|
| 20364 | |
| 20363 |
JavaScript
항상 같은곳에 광고창 만들기 입니다.
|
| 20362 |
JavaScript
부메뉴 나오게 하기 입니다.
|
| 20361 |
JavaScript
특정문자 제거하기 입니다.
|
| 20360 |
JavaScript
휴대폰번호 검사 하기 입니다.
|
| 20359 |
JavaScript
이미지 좌우로 이동 갤러리 입니다.
|
| 8231 | |
| 20358 | |
| 20357 |
JavaScript
쉬운 replaceAll 입니다.
|
| 20356 | |
| 20355 | |
| 20354 | |
| 20353 | |
| 20352 |
JavaScript
콤보스타일 메뉴 입니다.
|
| 20351 |
JavaScript
쿠키를 이용한 레이어 공지창 입니다.
|
| 20350 |
JavaScript
효과있는 텍스트 틱커 입니다.
|
| 20349 | |
| 20348 |
PHP
HTTP 인증 하기 입니다.
|
| 20347 |
JavaScript
외부 문서 불러오기 입니다.
|
| 20346 |
JavaScript
지정한 날짜까지 New 이미지를 띄워주기 입니다.
|
| 20345 | |
| 20344 |
JavaScript
메일 주소 검사하기 체크박스 입니다.
|
| 20343 |
JavaScript
무단링크 금지하기 입니다.
|
| 20342 | |
| 20341 |
MySQL
DB백업 및 복원
|
| 20340 |
JavaScript
페이지가 다른 사이트의 프레임에 갇히는 것을 막기 입니다.
|
| 20339 | |
| 20338 | |
| 20337 |
jQuery
input text 대문자만 받는 Jquery
|
| 20336 | |
| 20335 |
JavaScript
이미지 업로드와 미리보기 입니다.
|
| 20334 |
JavaScript
배경음악 랜덤 재생 하기 입니다.
|
| 20333 |
JavaScript
css 지원 여부 확인해서 다른 페이지로 이동하기 입니다.
|
| 20332 |
JavaScript
하부메뉴가 보였다가 숨겨졌다 하는 토글버튼 입니다.
|
| 20331 |
JavaScript
개별 페이지에 인덱스로 거쳐 들어오게 하기 입니다.
|
| 20330 |
JavaScript
랜덤으로 이미지 출력 되기 입니다.
|
| 20329 |
JavaScript
사용자 해상도 알아내기 입니다.
|
| 20328 |
JavaScript
붙여넣기 금지하기 입니다.
|
| 20327 |
MySQL
대소문자 데이터 조회하기
|
| 20326 |
JavaScript
퇴장시 팝업창 한번한 띄우기 입니다.
|
| 20325 | |
| 20324 | |
| 20323 |
JavaScript
시도, 구군, 동 주소 select
|
| 20322 |
MySQL
커리로 DB 테이블 명세서 출력하기
|
| 20321 |
JavaScript
브라우저 해상도 구분없는 절대 x,y 좌표 값 구하기 입니다
|
| 20320 |
PHP
rss 읽어오기 입니다.
|
| 20319 |
JavaScript
자바스크립트로 Ajax 효과내기 입니다.
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기