::Devlog::

반응형 웹 디자인 ( RWD; Responsive Web Design ) 반응형 웹다지안은 가로 크기에 변화를 줄 때, 컨텐츠들이 사이즈에 맞춰 유동적으로 재배치 되는 형태. " 너가 어떤 화면 크기를 갖고 있는 디바이스일지 몰라서 모두 다 준비해봤어!걱정은 하지마 너의 디바이스 크기대로 바뀔테니!! " 적응형 웹 디자인 ( AWD; Adaptive Web Design ) 브라우저 크기를 줄여도 한동안 반응이 없다가 정해진 해상도가 되면 레이아웃이 갑자기 재배치 되는 형태. 스크린에 맞는 성능을 보장하지만 모든 디바이스에 맞춘 화면을 설계한다는 것은 불가능에 가깝다. " 너가 그 크기라면 이것을 줄게! 물론 그 크기도 내가 따로 준비했지! 헉헉... " 웹 디자인의 현주소N-Screen의 모바일 시대다...

Material Desgin 적용하기Material Design 공식 홈페이지에 한글로 정말 자세히 나와있다.>>Material Design Get Started>> Material Design이 제공하는 디자인에 대해 알아보기 전에,웹사이트의 레이아웃을 결정하고 설계하는데 도움을 주는 Grid System에 대해 먼저 알아보자.Gridhtml code>123456789101112131415161718 s12 s12 m4 l2 s12 m4 l8 s12 m4 l2 s12 m6 l3 s12 m6 l3 s12 m6 l3 s12 m6 l3 Colored by Color Scriptercs Bootstrap 을 사용해봤다면 익숙한 사용방법일거라 생각한다.제공하는 시스템도 거의 동일하다.데스크탑일 경우에는 Larg..

6. hover와 transition을 활용하자.코드먼저 보겠다.html>123456789101112131415161718 JS Bin Colored by Color Scriptercs css>1234567891011121314.scroll-icon-down span{ border: solid #0F0 3px; padding: 5px 20px;; transition: all 0.5s; transition-timing-function: ease;}.scroll-icon-down span:hover{ transition: all 0.5s; transition-timing-function:ease; border: solid #CFCFCF 3px; border-radius: 50%; background-colo..

background image와 transparent만 잘 알아도 그럴듯한 웹 페이지를 구성할 수 있다. #image{ background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(/img/baby1.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed; } background: linear-gradient 속성과 url 속성을 살펴보자. url을 통해 원하는 image를 로드한다. 그리고 linear-gradient를 통해서, 그라데이션을 주는데, 여기서 중점을 둬야할 곳은 ..

Chapter 4. Pseudo Class와 Pseudo Element 활용하기가상 요소만 잘 알고 활용해도, 인터랙티브한 웹 페이지를 구성할 수 있다.Pseudo Class Pseudo Class는 단순한 선택자(simple selector)로는 표현할 수 없는 어떤 것을 select하는 선택자이다. 특정한 상태말고 규칙에 따라 상태가 바뀌는 요소를 선택할 때 사용하는 것이다. 종류 Dynamic pseudo-class :hover :visited :link :active :focus 위 네 개는 anchor tag(a태그)와 함께 자주 쓰인다. 그리고 focus tag는 input tag와 함께 쓰인다. UI element states pseudo-class :enabled :disabled :che..