본문 바로가기
반응형

분류 전체보기333

봄에 키우기 좋은 식물(키우기 쉬운 화초 추천) 봄에 키우기 좋은 식물(키우기 쉬운 화초 추천) 봄 되면 길가에 화초를 놓고 파는 곳이 많이 생겨요. 가격도 저렴하고요, 주로 포트로 된 화분이라 집에 데려와서 분갈이를 해줘야 하지만 사서 키우는 재미를 볼 수 있는 싱싱한 화초예요. 그래서 제가 지금까지 키운 화초 중에서, 키우기 수월한 순서대로 정리해 보았어요. 중간 중간에 화초 키우는 요령 링크도 걸어 두었으니 참고해 주세요 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.
오렌지자스민 열매, 채취했어요 오렌지자스민 열매, 채취했어요 지난 초여름에 오렌지자스민을 처음 사서 키워 보았어요. 오렌지 자스민 생각보다 키우기 어렵지 않습니다. 오렌지자스민 키우기(꽃이 피는 적절한 환경과, 오렌지자스민 물주기) 다만 제가 처음 키우는 식물이다 보니, 1년 동안의 습성이 어떨지 궁금했는데... 지금 이 글을 쓰기에 적절한 시기인 것 같습니다.^^ 오렌지자스민은 4계절 꽃을 피우는 식물이라는 것 알고 계시죠 하지만 햇볓과 기온이 맞아아 꽃을 피운답니다. 추운 겨울은 햇볓에 오래도록 두어도 꽃을 피우지 않더라구요. 더구나 저희는 낮 동안 거실 난방을 하지 않았거든요^^ 그래서, 겨울 동안은 오렌지자스민 키우는 재미가 조금 덜 하다고 할까요.... 그러던 찰나.... 오렌지자스민 열매가 맺기 시작하더군요. 처음엔 초록빛.. 2015. 3. 17.
css로 반응형 메뉴 만들기. 상단에서 내려오는 드롭다운 메뉴. css로 반응형 메뉴 만들기. 상단에서 내려오는 드롭다운 메뉴. 지난 시리즈에 이어지는 반응형 메뉴 만들기 연습입니다. css로 토글 메뉴 만들기(메뉴 열고 닫기) 반응형 메뉴 만들기(select 태그를 이용) css로 반응형 메뉴 만들기 off canvas (left) 오늘은 화면 너비 480px 이하에서, MENU라는 글자와 메뉴 아이콘이 등장하며 (가로 화면 100%) 메뉴 클릭 시 하단으로 펼쳐지는 메뉴를 만들어 보겠습니다. (아래 그림 참조) A 화면 (너비 480px 이상일 때) B 화면(너비 480px 이하일 때) C 화면(너비 480px 이하에서 메뉴 클릭할 때) 이번에도 체크박스를 응용했습니다. 체크박스 기초가 필요하신 분은 아래 링크 참조 css로 토글 메뉴 만들기(메뉴 열고 닫기) h.. 2015. 3. 16.
[css3] transition 속성(transition-property/transition-duration/transition-timing-function/transition-delay ) [css3] transition 속성 오늘 배울 속성은 transition 입니다. transition은 한 가지 상태에서 다른 상태로 변화하는 것이라고 보면 됩니다. 예를 들어, 너비가 100px 였다가 마우스 오버할 경우 200px로 늘어난다든지 글꼴 크기가 14px 였다가 마우서 오버 시 20px로 확대 되는 등. transition 속성으로 이 두 가지의 이행 과정을 부드럽게 표시할 수 있습니다. *보통 트렌지션은 요소에 마우스 오버 했을 때 변화가 나타남 transition 속성은 아래 네 가지 속성의 단축 속성입니다. 각 속성은 본문 참조 transition-property 속성 transition-duration 기간 transition-timing-function 시기 선택 transiti.. 2015. 3. 10.
[CSS3] text-overflow 속성 [CSS3] text-overflow 속성 박스 안에 내용이 넘칠 때 텍스트를 어떻게 처리할지 지정하는 속성입니다. 주의 : text-overflow 속성은 다음 2가지를 모두 충족할 경우에만 적용됩니다. 1. overflow 속성값이 hidden, scroll, auto 일 때(visible 제외) 2. white-space:nowrap (텍스트 길어도 줄바꿈 되지 않음) 또는 텍스트가 다음 줄로 이동하지 않는 비슷한 경우 overflow 속성 (overflow: visible, hidden, scroll, auto 차이) white-space 속성(pre, pre-wrap, pre-line 차이) ▶ 브라우저 지원 ie6.0+, chrome 4.0+, firefox 7.0+, safari 3.1+, .. 2015. 3. 6.
[css3] overflow-x / overflow-y 속성 [css3] overflow-x / overflow-y 속성 아주 오래 전에 overflow 속성에 대해 다루었죠. overflow는 내용이 넘칠 때 어떻게 보일지 선택할 수 있는 속성이라고 했습니다.(아래 글 참조) overflow 속성 (overflow: visible, hidden, scroll, auto 차이) overflow-x 속성은 x축, 즉 왼쪽과 오른쪽의 내용이 넘칠 때, overflow-y 속성은 y축, 즉 위에 아래의 내용이 넘칠 때 어떻게 보여줄지 지정합니다. ▶브라우저 지원 ie9.0+, chrome 4.0+, firefox 3.5+, safari 3.0+, opera 9.5+ ▷overflow-x 속성값 visible|hidden|scroll|auto|initial|inherit.. 2015. 3. 5.
반응형