본문 바로가기
반응형

전체 글331

봄날 배 부른 투정 지난 금요일 이래 글을 전혀 쓰지 못했네요. 틈이 없어 못 쓴 게 아니라, 요즘 따라 왜 이렇게 글 하나 쓰기가 버거운지요... 예전에는 내가 이 일을 어떻게 했지? 라는 생각이 들고... 아니면 지금 제가 글을 쓰려고 하는 분야가, 생각보다 어려운 단계인가 봐요. 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.
[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.
[html] abbr 태그 [html] abbr 태그 abbr 태그는 두문자어(acronym)와, 약어(abbreviation )에 사용하는 요소로, 브라우저나 검색엔진에 유용한 정보를 줍니다. 넷스케이프가 abbr 요소를 만들고, 마이크로소프트가 acronym을 만들어 두 요소 다 html4까지 사용하고 있었지만, 두 정의가 혼동스럽고 브라우저 지원도 저마다 달라, html5부터 acronym은 퇴화 요소로 규정합니다. html5부터는 두문자어와, 약어에 모두 abbr 태그를 사용합니다. 참고 acronym: 단어의 머리글자를 딴 말. NATO는 North Atlantic Treaty Organization의 두문자어임 '나토'라고 읽음. abbreviation: 쉽게 알아들을 수 있도록 줄인 말. BBC는 British Bro.. 2015. 3. 2.
반응형