본문 바로가기

전체 글331

오렌지자스민 열매, 채취했어요 오렌지자스민 열매, 채취했어요 지난 초여름에 오렌지자스민을 처음 사서 키워 보았어요. 오렌지 자스민 생각보다 키우기 어렵지 않습니다. 오렌지자스민 키우기(꽃이 피는 적절한 환경과, 오렌지자스민 물주기) 다만 제가 처음 키우는 식물이다 보니, 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.
[html] mark 태그 [html] mark 태그 mark 태그는 사용자에게 관계된 텍스트를 강조하고자 할 때 사용합니다. ▶브라우저 지원 ie9+, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+ ▶mark 요소 사용 예 1. 검색 결과에서 찾은 키워드를 두드러지게 표시하여 사용자가 원하는 것을 쉽게 찾을 수 있도록 함. 2. 인용할 때 특정 텍스트를 강조하게 위해 strong, em, mark 태그 차이 텍스트를 강조하는 의미에서 세 가지가 쓰일 수 있는데, 각기 용도가 다릅니다 em. 강세를 둔 강조. emphasized text 약자로 이탤릭체로 표시함. 강조의 위치는 문장의 의미를 바꿈 Cats are cute animals. '고양이'에 강조 Cats are cute an.. 2015. 3. 3.