본문 바로가기

전체 글331

[반응형 웹사이트] 유동적인 그리드, 이미지, 크기 조절이 가능한 글꼴 [반응형 웹사이트] 유동적인 그리드, 이미지, 크기 조절이 가능한 글꼴 오늘은 반응형 웹사이트에서 자주 등장하는 개념 정리를 해 보려고 합니다. 반응형 웹사이트란, 브라우저나 기기 환경에 따라 레이아웃이 유동적으로 변하는 것을 말하지요. 그래서 자주 등장하는 단어가 아래 두 가지입니다. Fluid Grids (유동적인 그리드) Fluid Images (유동적인 이미지) 먼저 그리드란? 그리드란 우리말로 격자라고 하는데, 웹페이지를 수직 수평선으로 분할하는 레이아웃 요소입니다. 수직, 수평선은 사용자에게 보이지 않을 수도 있습니다. 아래 이미지는 부트스트랩 그리드 예시임. 제 블로그 역시 헤더, 본문, 사이드바, 푸터 등 전형적인 레이아웃 입니다. http://getbootstrap.com/examples.. 2015. 4. 6.
봄에 키우기 좋은 식물(키우기 쉬운 화초 추천) 봄에 키우기 좋은 식물(키우기 쉬운 화초 추천) 봄 되면 길가에 화초를 놓고 파는 곳이 많이 생겨요. 가격도 저렴하고요, 주로 포트로 된 화분이라 집에 데려와서 분갈이를 해줘야 하지만 사서 키우는 재미를 볼 수 있는 싱싱한 화초예요. 그래서 제가 지금까지 키운 화초 중에서, 키우기 수월한 순서대로 정리해 보았어요. 중간 중간에 화초 키우는 요령 링크도 걸어 두었으니 참고해 주세요 1. 테이블 야자 1위는 테이블 야자입니다~ 그늘에서도 잘 자라고, 물주기도 그렇게 어렵지 않아요. 어떤 화초는 물을 자주 주면 죽는 경우가 많은데 어지간하면 죽지 않으니 신기할 따름이에요... 제가 몇 년 전 반지하에 살던 때부터 키우던 화초인데, 잎이 클수록 공기정확 능력도 좋겠죠? 테이블 야자 키우기 (잘 키우는 비법) 2.. 2015. 3. 31.
IE6~8에서 미디어쿼리 지원하기 (respond.js vs css3-mediaqueries.js) IE6~8에서 미디어쿼리 지원하기 보통 반응형 웹사이트를 만들 때, 화면이 특정 너비가 되면 화면이 변하는 분기 처리(breakpoint)를 할 때 @media 미디어 쿼리 구문을 사용합니다. 하지만 @media 구문을 지원하는 브라우저를 보면 다음과 같습니다. [css] 미디어 쿼리, @media query 이해하기 이미지 출처 : http://caniuse.com/#search=%40media 위 이미지에서 빨간색으로 표시된 IE8은 지원이 되지 않습니다. IE6, 7은 말할 것도 없겠죠.. 아래 두 자바스크립트 라이버러리는 미디어쿼리를 지원하지 않는 IE6~8에서 반응형 웹디자인을 가능하게 해주는 스크립트입니다. respond.js css3-mediaqueries.js respond.js 장점: 빠.. 2015. 3. 27.
봄날 배 부른 투정 지난 금요일 이래 글을 전혀 쓰지 못했네요. 틈이 없어 못 쓴 게 아니라, 요즘 따라 왜 이렇게 글 하나 쓰기가 버거운지요... 예전에는 내가 이 일을 어떻게 했지? 라는 생각이 들고... 아니면 지금 제가 글을 쓰려고 하는 분야가, 생각보다 어려운 단계인가 봐요. HTML5, CSS3, 반응형 웹 .... 어느 쪽으로 가든 제가 이해하고 정리하는 데 많은 시간이 필요한데, 그전처럼 뚝딱 만들어낼 수 있는 수준이 아닌가 봐요. 블로그는 업데이트 주기도 검색 순위에 영향을 미친다고 알고 있어서.... 이러다가, 내 글도 검색에서 점차 밀리지 않을까 하는 조급함도 있고.... (그래 봐야 구글과, 다음 뿐이지만;;) 또 뭔가 준비가 되지 않은 상태에서 글 하나를 쓰려니, 제 성에 완전히 차지도 않은 애매한 .. 2015. 3. 26.
font awesome 사용법(웹 아이콘 이용하기) Font awesome 사용법(웹 아이콘 이용하기) 지난 시간엔 부트스트랩을 이용하여 아이콘 넣는 법을 배워 보았어요. 부트스트랩 사용법 (glyphicons 아이콘 넣기) 오늘은 font awesome 을 이용할 텐데 font awesome은 아이콘으로 사용되는 웹폰트 중에서 가장 잘 알려져 있고, 특히 부트스트랩과도 함께 사용할 수 있습니다. 원래 부트스트랩 2.0 버전에서 아이콘(Glyphyicons)은 이미지 형식이었기에, 크기 조절이나, 색상 혹은 배경색 바꾸기가 되지 않았습니다. 이때 font awesome은 font 형식으로 제공했기에, 크기 조절, 색상, 배경색 바꾸기가 자유로웠습니다. 하지만 부트스트랩 3.0 버전부터는 아이콘을 font 형식으로 제공합니다. Font Awesome과 Gl.. 2015. 3. 20.
부트스트랩 사용법 (glyphicons 아이콘 넣기) 부트스트랩 사용법 (glyphicons 아이콘 넣기) 부트스트랩 참 많이도 들어보았는데, 정확히 무엇이고 어떻게 사용해야 할까요? 읽기만 하고는 도저히 이해가 가지 않아 직접 부트스트랩을 사용해 보기로 했어요. 그래서 오늘은 부트스트랩을 이용하여 메뉴 아이콘을 넣기를 해 볼 생각합니다. 이렇게 먼저 간단한 활용법을 배운 후에, 자세한 사용법을 이후 강좌에서 차차 살펴 볼까 해요. 일단 그래도 한 가지 알아두어야 할 것은... 부트스트랩(bootstrap)이란? 웹사이트를 만들 때 html, css, 자바스크립트 언어를 아는 사람은 직접 만들기도하고, 드림위버 같은 저작도구를 사용하기도 합니다. 부트스트랩도 일종의 웹사이트 저작 도구로(특히 반응형에 최적) htm과, css에 기반한 템플릿을 제공합니다. .. 2015. 3. 18.