본문 바로가기

Dev.FrontEnd/HTML_CSS

 (10)
#반응형 웹과 적응형 웹에 대한 고찰 반응형 웹 디자인 ( RWD; Responsive Web Design ) 반응형 웹다지안은 가로 크기에 변화를 줄 때, 컨텐츠들이 사이즈에 맞춰 유동적으로 재배치 되는 형태. " 너가 어떤 화면 크기를 갖고 있는 디바이스일지 몰라서 모두 다 준비해봤어!걱정은 하지마 너의 디바이스 크기대로 바뀔테니!! " 적응형 웹 디자인 ( AWD; Adaptive Web Design ) 브라우저 크기를 줄여도 한동안 반응이 없다가 정해진 해상도가 되면 레이아웃이 갑자기 재배치 되는 형태. 스크린에 맞는 성능을 보장하지만 모든 디바이스에 맞춘 화면을 설계한다는 것은 불가능에 가깝다. " 너가 그 크기라면 이것을 줄게! 물론 그 크기도 내가 따로 준비했지! 헉헉... " 웹 디자인의 현주소N-Screen의 모바일 시대다...
7. Material Design 이해하기 - Grid 편 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을 활용하자 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..
5. background 속성을 알아보자 / 그럴듯한 웹페이지 만들기 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를 통해서, 그라데이션을 주는데, 여기서 중점을 둬야할 곳은 ..
4. Pseudo Class 와 Pseudo Element 활용하기 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..
[Tip] Font Awesome 활용하기! Font Awesome 활용하기!위 sample에서 아래 방향 화살표가 Font-Awesome을 활용한 아이콘이다. >>Font-Awesome 페이지로 이동하기>> 활용하는 방법은 간단하다.위 예제의 코드를 살펴보면 쉽게 이해할 수 있다. i tag를 보면 class가 지정되있는 것을 볼 수 있다.Font-Awesome 페이지에 있는 아이콘들 중 마음에 드는 아이콘을 클릭하면,그 아이콘에 해당하는 class가 나온다.그 클래스를 복사, 붙여넣기 해주면 된다! 물론,여기에 추가적으로 해야할 사항이 한 가지 더 있다.HTML파일을 읽어들일 때, i class = " " 에 해당하는 클래스가 무엇을 가리키는지 알아야 하기 때문에, 태그에 추가로 삽입해야할 코드가 있다. 혹시 뭔가가 잘 되지 않는다면 Font-..
[HTML/CSS] 2. Responsive Web Design / 반응형 웹이란? 반응형 웹(Responsive Web)이란? 반응형 웹은 사용자의 특정 해상도를 가징하지 않는 것부터 출발한다. 모든 해상도를 커버할 수 있고, 의도에 따라 특정 해상도 범위에 제한적으로 적용할 수 있으며, 적절한 중단점(breakpoint)를 제공한다. 반응형 웹 개념 *모바일 퍼스트 PC보다 모바일 기기를 먼저 생각해서 디자인하고 프로그래밍 하는 기법이다. 모바일의 제약 1) 모바일 기기의 스크린 크기 2) 네트워크 속도 및 품질 3) 사용하는 모드 반응형 웹은 고 사양(고 해상도) 웹이 저 사양(저 해상도) 모바일 기기에서도 불편함없이 구현되는데 초점이 맞춰져 있다. 때문에 일반 웹이 모바일 웹으로 보여질 때 불필요한 요소들을 최소화시켜야 한다. 가장 대표적인 것으로 일반 웹 메뉴를 버튼 하나로 축..
[HTML/CSS] 3. Bootstrap Framework CSS 프레임워크 부트스트랩 사용해보기! 3. Responsive design with bootstrapBootstrap Framework부트스트랩을 사용하는 방법은,이미 부트스트랩에서 지정된 class를 정의하는 방식으로 사용한다. 반응형 이미지class = img-responsive 버튼class = “btn btn-block"btn : 버튼 모양btn-block : 100%로 가득찬 버튼 Grid Font Awesome Font Awesome은 아이콘 라이브러리로, vector 이미지이다. .svg 파일에 저장되어있다. 링크를 추가함으로써, 아이콘을 추가할 수 있다.px을 조절함으로써 크기를 조정할 수 있다.아이콘은 icon이므로 i라는 약자로 element를 표시한다.열고 바로 닫아준다. 좋아요 = fa-thumbs-up 쓰레기통 = f..

티스토리툴바