새롭게 선보이는 매체인《EPISODE》의 모토는 새로움입니다. 터치 인터페이스라는 새로운 환경에 맞게 컨텐츠, UX, 컨텐츠와
독자와의 관계를 완전히 새롭게 재정의하고자 합니다. 한국을 넘어 아시아 시장에서 아이패드 컨텐츠의 선도적 역할을 해
나가는《EPISODE》가 되겠습니다.
이번호에서는 일본의 대재앙에 대해 살펴보고자 합니다. 데이터와 인포그래픽 그리고 아이패드에서만 가능한 UX를 통해 일본의 대재앙이 일본만의 문제가 아닌 전세계의 문제이며 바로 우리의 문제임을 알아보고자 했습니다.
트위터에서 최고의 미디어 파워를 자랑하는 독설닷컴 고재열 시사인 기자와의 인터뷰 기사도 있습니다. 트위터와 인터넷에서 많은 논쟁을 통해 다듬어진 고재열 기자의 생각과 입장을 들어보시기 바랍니다.
특히 이번호는 디자인이 확 바뀌었습니다. 터치 인터페이스라는 새로운 매체에서 발행되지만 책 혹은 잡지의 기본을 다시 생각하며 디자인에 많은 신경을 썼습니다.
《EPISODE》는 앞으로도 꾸준하게 UX 분야에서의 실험을 진행할 예정입니다. 독자의 움직임에 반응하는 디자인, 사용자와 커뮤니케이션하는 컨텐츠, 그리고 밀도 있고 창조적인 새로운 형식의 미디어를 경험해보시기 바랍니다.
브라우저별 CSS 속성 브라우저마다 적용되는 스타일이 다르므로 브라우저별로 지원하는 스타일을 맞게 설정해주어야 한다. 스타일의 속성 앞에 브라우저 구분 이름을 입력해주면 해당 브라우저 속성만이 실행한다.
접두사
설명
-webkit-
웹킷 방식 브라우저(사파리,크롬)
-moz-
게코 방식 브라우저(모질라, 파이어폭스)
-o-
오페라 브라우저
-ms-
마이크로소프트 인터넷익스플로러
구조적 선택 기능 가상 클래스에 not을 입력하면 선택한 태그 이외의 태그들을 선택할 수 있고 nth-child(n)를 입력하여 여러 개의 항목 중 특정 항목에만 스타일을 지정할 수 있다. n에 even을 입력하면 짝수 번째, odd를 입력하면 홀수 번째 항목에 스타일을 적용할 수 있다.
*:not(태그)
태그를 제외한 모든 내용을 선택
nth-child(n)
항목 중 n번째 항목을 선택
nth-last-child(n)
항목 중 끝에서부터 항목을 선택
nth-of-type(n)
유형이 같은 항목을 선택
nth-last-of-type(n)
항목 중 끝에서부터 유형이 같은 항목을 선택
ex) <style> /* * 링크가 설정된 요소를 제외한 모든 태그에 스타일이 적용된다. */ *:not(a){ font-weight:bold; color:red; } /* * 리스트 중 홀수 번째 목록은 글자색이 빨간색으로 표시되고 * 두 번째 목록은 파란색으로 표시된다. */ li:nth-child(odd){ color:red; } li:nth-child(2){ color:blue; } </style>
배경에 그라데이션 만들기 배경에 선형 또는 원형의 그라데이션을 설정할 수 있다. 브라우저마다 사용하는 코드방식이 다르므로 브라우저별로 설정해주어야 한다. background-webkit-gradient( 유형, 시작위치, from(색상), to(색상) ); * 유형 : 선형(linear) 또는 원형(radial)을 지정한다. * 시작 위치, 끝 위치 : x와 y 좌표를 백분율로 입력하거나 left, bottom 처럼 영문으로 그라데이션의 시작과 끝 위치를 설정한다. * from(색상) : 그라데이션 시작 색상을 설정한다. * to(색상) : 그라데이션 끝 색상을 설정한다. ex) <style> /* * 높이 150 픽셀 크기에 왼쪽에서 오른쪽으로 검정색에서 흰색으로 그라데이션이 채워진다. */ div{ height:150px; border:1px solid #000000; background: -webkit-gradient(linear, left center, right center, from(#000000), to(#ffffff)); } </style>
다단표시 column 속성을 사용하면 다단을 손쉽게 나눌 수 있다. ex)<style> /* * 2개의 단으로 나누고 단 간격은 10픽셀, 구분선은 검정색 실전으로 표시된다. */ div{ border:1px solid #000000; -webkit-column-count:2; -webkit-column-gap:10px; -webkit-column-rule:1px solid #000000; } </style>
(0) 
(0)
