티스토리

지구별 안내서
검색하기

블로그 홈

지구별 안내서

aboooks.tistory.com/m

지구별에 님의 블로그입니다.

구독자
25
방명록 방문하기
공지 저작권 관련 정보 모두보기
반응형

주요 글 목록

  • 초등 아이와 가볼만한 곳, 놀숲 신림점에 다녀오다 초등 아이와 가볼만한 곳, 놀숲 신림점에 다녀오다 지난 주말에 아이와 어디를 갈까 생각하다가 만화방에 방문해 보기로 했어요. 평소에 도서관이나 서점은 자주 갔지만 만화만 볼 수 있는 공간은 처음이거든요. 예전의 만화방은 단순히 만화책, 간식만 있는 곳이었는데 요즘에는 휴식 쉴 수 있는 공간으로 새롭게 변신이 되었더라고요. 저희 집에서는 버스로 한 번에 도착! 20분 정도 밖에 안 걸렸어요. 찾기도 어렵지 않았어요. 저는 지상에 있는 줄 알았는데 지하 1층에 있더라고요. 아.... 예전에 지하 만화방의 그 어둡고 퀴퀴한 냄새가 날까 걱정하며 들어갔는데... 아래로 내려가니 제일 먼저 신발장이 나오고 마치 카페 처럼 꾸며져 있더라고요. 일단 옛날 생각하던 그 어두운? 이미지가 아니어서 안심. 신발장 키를 카.. 공감수 0 댓글수 2 2023. 3. 15.
  • 진로 고민하는 친구들에게 해주고 싶은 말 진로 고민하는 친구들에게 해주고 싶은 말 청소년 시절부터 20대를 관통하는 키워드가 무얼까요? 바로 진로 문제일 것 같아요. 저 같은 경우는 잘 하는 어떤 분야에서 선두에 서는 것. 1등이 되는 것이 중요했고 다른 사람보다 잘한다는 것(우위에 서는 것)이 카타르시스를 주었어요. 그래서일까요? 그에 대한 반증으로 조금 잘했다고 하더라도, 2 3 4 등이 되면 주목 받지 못하게 되고, 인정 받지 못한 것 같고, 이 길을 계속 가도 되는지 끊임 없이 생각하게 되고 결국 포기한 경험이 셀 수 없이 많았습니다~ 지나고 보면 참 아까워요. 내가 좋아하고, 조금은 재능이 있었던 분야인데 1등이 되지 못해서 인정을 못받는 것 같고, 그래서 나 자신에 확신이 서지 못하고, 결국 그 일로 성공하지 못할 것 같은 불안감에 .. 공감수 1 댓글수 1 2023. 3. 3.
  • 초등학교 저학년 공부, 어떻게 해야할까 ? 안녕하세요? 무척 오랜만에 티스토리에 접속을 했습니다. 너무 오래 쉬었지요.... 너무 시간이 오래 지나기도 했고, 일일이 그간 있었던 일을 단 몇 줄로 표현하기가 어렵네요 ^^.... 조금씩 쉬운 글을 올리면서 그동안 어떻게 지내왔는지 적어 볼게요. 물론 제 티스토리에 한 번 들어오신 분들이라면 관심 사항이 아니겠지만.... 나이가 들어서인지 핵심만 말하는 데 자신이 없다고 해야 하나.... 자꾸 쓸데 없는 말이 나오는 것도 같고 이해해 주시고요. 우리 아이가 벌써 초등학교 1학년이 되었답니다. 지난 해 그러니까 7살에 한글을 떼었는데 한글을 배우고 떼기까지 또 험난한 과정이 있었습니다. 그래서 '아 ~ 이제 한글을 읽을 수가 있구나~'하고 한시름을 놓을 때쯤 이제는 ' 얘를 어떻게 공부시켜야 하나?'.. 공감수 0 댓글수 1 2022. 6. 9.
  • 고무나무 키우기 고무나무 키우기, 물주기, 분갈이하는 법 안녕하세요. 오랜만에 식물에 관해 글을 쓰네요 지난주에 화원에 가서 고무나무, 떡갈 고무나무, 스파티 필름을 데려왔어요. 아기 낳고 한 몇 년간은 키우던 화초들이 베란다에서 말라가는 것만 보다가, 이제서야 마음에 여유가 살짝 생겨 화원에 들렀습니다. 모두 작은 포트로 된 것들이여서 마사토와 배양토도 사와서 분갈이도 했어요. 이 세 가지 식물은 모두 처음 키워보는 식물인데 그래서 최적의 환경을 찾아주기 위해 공부도 하고 매일 매일 상태를 살피고 있어요. 오늘은 고무나무에 대해서 정리를 해 보려고 합니다. 고무나무 키우기 고무나무는 원래 열대우림지역, 그늘에서 자라는 식물이라고 합니다. 이 식물은 적절한 빛과, 적절한 그늘이 모두 필요한 식물인데요 직사광선보다는 간접.. 공감수 5 댓글수 1 2019. 10. 30.
  • W3C 미디어 쿼리 level 4(Candidate Recommendation), 번역해 보다 W3C 미디어 쿼리, 번역해 보다 제가 블로그 공백이 너무 길다 보니 처음 글로 무엇을 쓸까 참 많이도 헤멨는데.... 그러다가 반응형 웹 기술에 필요한 '미디어 쿼리'가 가장 적절하고 필요한 글이란 생각이 들었답니다 예전에 미디어 쿼리 관련 글([css] 미디어 쿼리, @media query 이해하기)을 쓴 적도 있지만, 보완해야 할 점이 많이 보이더라고요. 그런데 이 자료 저 자료를 모으다 보니 시간이 생각 외로 너무 많이 걸려서요... --; 그래서 마음에 부담을 줄일 겸, W3C에서 작성한 미디어 쿼리 글을 번역해 보려고 합니다. (원문을 통째로 번역한 것은 아니며, 제가 자의적으로 제외시킨 부분도 있음) 이 문서는 권고안이 되기 전 권고안 후보(Candidate Recommendation)이며,.. 공감수 1 댓글수 1 2019. 10. 5.
  • 안녕하세요 안녕하세요 지구별에 입니다 제가 마지막으로 글을 쓴 지 4년이 지났네요 그동안 출산, 육아 등으로 바쁘게 살아서 글 쓸 마음에 여유가 나지 않았어요 '이제 슬슬 다시 시작해 볼까' 맘 먹은 지 꽤 되었는데도 시작을 못하고 있어요 처음부터 무언가 그럴 듯해 보였으면 좋겠는데 머리가 따라 주지 않네요...^^ 그래서 가벼운 썰로 시작해 보려고 하니 많은 이해를 부탁드려요.... 제 블로그는 무려 4년이 지났지만, 여전히 많은 분들이 방문해 주셔서 정말로 감사하게 생각하고 있습니다 한편으로는 부족한 글을 보러 와 주시니 부끄럽기도 하지만 잘못된 점이 있다면 바로 알려주시면 시정하도록 하겠습니다 저에게 질문을 남기시는 분도 계신데, 제가 답변 드리기가 어려워 못달고 있는 것이니 오해 없으시길 바랍니다 아마도 다.. 공감수 10 댓글수 2 2019. 9. 27.
  • [6월 전시회] 2015 서울국제도서전(6/17~21) [6월 전시회] 2015 서울국제도서전(6/17~21) 올해도 어김없이 서울국제도서전이 열리네요. 너무 뒤늦게 알아서, 무료 사전등록 기간도 놓쳤습니다. 올해는 인원이 많을 것으로 예상해서인지 등록 기간도 무척 짧았는데, 25일까지 연장해서 등록을 받았다고 하네요. 아마 무료로 입장할 수 있는 다른 경로가 있을 테니 촉을 세워두고 관심을 가져 보세요. ^^ 서울국제도서전의 대략적은 개요는 다음과 같습니다 일시 :2015년 6월 17일(수) ~ 21일(일) 장소 :삼성동 코엑스 A홀 주빈국 : 이탈리아 관람 시간 :행사종료 30분 전 입장 마감 17일(수) ~ 19일(금) :10:00 ~ 19:00 20일(토) :10:00 ~ 20:00 21일(일) :10:00 ~ 17:00 입장료 : 일반 5,000원 .. 공감수 4 댓글수 0 2015. 5. 29.
  • 근황 요즘 블로그에 들어 올 경황이 없었어요 한동안 내키지 않기도 했고 제 일을 인수인계하면서 들어 올 수도 없었고요 시간은 왜 이리 빨리 흐르는지 저는 벌써 30주랍니다 2개월 조금 지나면 아가가 탄생해 있을 거예요 지금까지와는 사뭇 다른 새로운 환경이 펼쳐지겠지요^^ 앞을 너무 내다보며 살진 않으려 해요 현재에 충실하면서 아이를 위해 그리고 저를 위해서도 좋은 것을 더 많이 보고 생각하며 살려고해요^-^ 그럼 또 시간 될 때 종종 기록을 남길게요 공감수 2 댓글수 2 2015. 5. 1.
  • fontawesome 다운받아 이용하는 법 Font Awesome 다운받아 이용하는 법 지난 시간에는 font awesome을 인터넷 링크로 내려받아 사용하는 법을 알아보았어요. font awesome 사용법(웹 아이콘 이용하기) 오늘은 직접 다운 받아 서버에 올려 사용하는 방법을 알아보겠습니다. 1. 다음 페이지로 이동하여, Download 버튼을 누릅니다. http://fortawesome.github.io/Font-Awesome/ 2. 압축 파일을 풀면 font-awesome-4.3.0 폴더가 생깁니다. 하위 폴더는 다음과 같습니다. css- font-awesome font-awesome.min fonts-FontAwesome fontawesome-webfont fontawesome-webfont.eot fontawesome-webfont... 공감수 4 댓글수 0 2015. 4. 9.
  • [반응형 웹사이트] 유동적인 그리드, 이미지, 크기 조절이 가능한 글꼴 [반응형 웹사이트] 유동적인 그리드, 이미지, 크기 조절이 가능한 글꼴 오늘은 반응형 웹사이트에서 자주 등장하는 개념 정리를 해 보려고 합니다. 반응형 웹사이트란, 브라우저나 기기 환경에 따라 레이아웃이 유동적으로 변하는 것을 말하지요. 그래서 자주 등장하는 단어가 아래 두 가지입니다. Fluid Grids (유동적인 그리드) Fluid Images (유동적인 이미지) 먼저 그리드란? 그리드란 우리말로 격자라고 하는데, 웹페이지를 수직 수평선으로 분할하는 레이아웃 요소입니다. 수직, 수평선은 사용자에게 보이지 않을 수도 있습니다. 아래 이미지는 부트스트랩 그리드 예시임. 제 블로그 역시 헤더, 본문, 사이드바, 푸터 등 전형적인 레이아웃 입니다. http://getbootstrap.com/examples.. 공감수 9 댓글수 0 2015. 4. 6.
  • 봄에 키우기 좋은 식물(키우기 쉬운 화초 추천) 봄에 키우기 좋은 식물(키우기 쉬운 화초 추천) 봄 되면 길가에 화초를 놓고 파는 곳이 많이 생겨요. 가격도 저렴하고요, 주로 포트로 된 화분이라 집에 데려와서 분갈이를 해줘야 하지만 사서 키우는 재미를 볼 수 있는 싱싱한 화초예요. 그래서 제가 지금까지 키운 화초 중에서, 키우기 수월한 순서대로 정리해 보았어요. 중간 중간에 화초 키우는 요령 링크도 걸어 두었으니 참고해 주세요 1. 테이블 야자 1위는 테이블 야자입니다~ 그늘에서도 잘 자라고, 물주기도 그렇게 어렵지 않아요. 어떤 화초는 물을 자주 주면 죽는 경우가 많은데 어지간하면 죽지 않으니 신기할 따름이에요... 제가 몇 년 전 반지하에 살던 때부터 키우던 화초인데, 잎이 클수록 공기정확 능력도 좋겠죠? 테이블 야자 키우기 (잘 키우는 비법) 2.. 공감수 9 댓글수 0 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 장점: 빠.. 공감수 3 댓글수 0 2015. 3. 27.
  • 봄날 배 부른 투정 지난 금요일 이래 글을 전혀 쓰지 못했네요. 틈이 없어 못 쓴 게 아니라, 요즘 따라 왜 이렇게 글 하나 쓰기가 버거운지요... 예전에는 내가 이 일을 어떻게 했지? 라는 생각이 들고... 아니면 지금 제가 글을 쓰려고 하는 분야가, 생각보다 어려운 단계인가 봐요. HTML5, CSS3, 반응형 웹 .... 어느 쪽으로 가든 제가 이해하고 정리하는 데 많은 시간이 필요한데, 그전처럼 뚝딱 만들어낼 수 있는 수준이 아닌가 봐요. 블로그는 업데이트 주기도 검색 순위에 영향을 미친다고 알고 있어서.... 이러다가, 내 글도 검색에서 점차 밀리지 않을까 하는 조급함도 있고.... (그래 봐야 구글과, 다음 뿐이지만;;) 또 뭔가 준비가 되지 않은 상태에서 글 하나를 쓰려니, 제 성에 완전히 차지도 않은 애매한 .. 공감수 9 댓글수 4 2015. 3. 26.
  • font awesome 사용법(웹 아이콘 이용하기) Font awesome 사용법(웹 아이콘 이용하기) 지난 시간엔 부트스트랩을 이용하여 아이콘 넣는 법을 배워 보았어요. 부트스트랩 사용법 (glyphicons 아이콘 넣기) 오늘은 font awesome 을 이용할 텐데 font awesome은 아이콘으로 사용되는 웹폰트 중에서 가장 잘 알려져 있고, 특히 부트스트랩과도 함께 사용할 수 있습니다. 원래 부트스트랩 2.0 버전에서 아이콘(Glyphyicons)은 이미지 형식이었기에, 크기 조절이나, 색상 혹은 배경색 바꾸기가 되지 않았습니다. 이때 font awesome은 font 형식으로 제공했기에, 크기 조절, 색상, 배경색 바꾸기가 자유로웠습니다. 하지만 부트스트랩 3.0 버전부터는 아이콘을 font 형식으로 제공합니다. Font Awesome과 Gl.. 공감수 5 댓글수 1 2015. 3. 20.
  • 부트스트랩 사용법 (glyphicons 아이콘 넣기) 부트스트랩 사용법 (glyphicons 아이콘 넣기) 부트스트랩 참 많이도 들어보았는데, 정확히 무엇이고 어떻게 사용해야 할까요? 읽기만 하고는 도저히 이해가 가지 않아 직접 부트스트랩을 사용해 보기로 했어요. 그래서 오늘은 부트스트랩을 이용하여 메뉴 아이콘을 넣기를 해 볼 생각합니다. 이렇게 먼저 간단한 활용법을 배운 후에, 자세한 사용법을 이후 강좌에서 차차 살펴 볼까 해요. 일단 그래도 한 가지 알아두어야 할 것은... 부트스트랩(bootstrap)이란? 웹사이트를 만들 때 html, css, 자바스크립트 언어를 아는 사람은 직접 만들기도하고, 드림위버 같은 저작도구를 사용하기도 합니다. 부트스트랩도 일종의 웹사이트 저작 도구로(특히 반응형에 최적) htm과, css에 기반한 템플릿을 제공합니다. .. 공감수 5 댓글수 0 2015. 3. 18.
  • 오렌지자스민 열매, 채취했어요 오렌지자스민 열매, 채취했어요 지난 초여름에 오렌지자스민을 처음 사서 키워 보았어요. 오렌지 자스민 생각보다 키우기 어렵지 않습니다. 오렌지자스민 키우기(꽃이 피는 적절한 환경과, 오렌지자스민 물주기) 다만 제가 처음 키우는 식물이다 보니, 1년 동안의 습성이 어떨지 궁금했는데... 지금 이 글을 쓰기에 적절한 시기인 것 같습니다.^^ 오렌지자스민은 4계절 꽃을 피우는 식물이라는 것 알고 계시죠 하지만 햇볓과 기온이 맞아아 꽃을 피운답니다. 추운 겨울은 햇볓에 오래도록 두어도 꽃을 피우지 않더라구요. 더구나 저희는 낮 동안 거실 난방을 하지 않았거든요^^ 그래서, 겨울 동안은 오렌지자스민 키우는 재미가 조금 덜 하다고 할까요.... 그러던 찰나.... 오렌지자스민 열매가 맺기 시작하더군요. 처음엔 초록빛.. 공감수 9 댓글수 10 2015. 3. 17.
  • css로 반응형 메뉴 만들기. 상단에서 내려오는 드롭다운 메뉴. css로 반응형 메뉴 만들기. 상단에서 내려오는 드롭다운 메뉴. 지난 시리즈에 이어지는 반응형 메뉴 만들기 연습입니다. css로 토글 메뉴 만들기(메뉴 열고 닫기) 반응형 메뉴 만들기(select 태그를 이용) css로 반응형 메뉴 만들기 off canvas (left) 오늘은 화면 너비 480px 이하에서, MENU라는 글자와 메뉴 아이콘이 등장하며 (가로 화면 100%) 메뉴 클릭 시 하단으로 펼쳐지는 메뉴를 만들어 보겠습니다. (아래 그림 참조) A 화면 (너비 480px 이상일 때) B 화면(너비 480px 이하일 때) C 화면(너비 480px 이하에서 메뉴 클릭할 때) 이번에도 체크박스를 응용했습니다. 체크박스 기초가 필요하신 분은 아래 링크 참조 css로 토글 메뉴 만들기(메뉴 열고 닫기) h.. 공감수 7 댓글수 2 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.. 공감수 3 댓글수 0 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+, .. 공감수 9 댓글수 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.. 공감수 2 댓글수 0 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.. 공감수 0 댓글수 0 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.. 공감수 3 댓글수 0 2015. 3. 2.
  • HTML5 퇴화 요소(deprecated, obsolete 차이) HTML5 퇴화 요소(deprecated, obsolete 차이) 예전에 table에서 퇴화 속성에 대해 적은 적이 있는데, 어떤 분이 퇴화 속성인데 왜 여전히 정상적으로 작동하는지 질문하신 분이 계셨습니다. table 태그, tr 태그, th 태그, td 태그와 table 속성 정리 저도 궁금하던 차였는데, 마침 글을 읽다가 deprecated, obsolete 차이에 대해 나온 글이 있어서 정리해 보았어요. 더불어 html5에서 퇴화로 규정된 태그를 살펴볼까 합니다. 우선 용어 정의부터.... 제 블로그엔 '퇴화 요소' '퇴화 속성'이란 단어가 많이 등장하는데 deprecated와 obsolete를 저는 통일해서 '퇴화'라고 설명해 놓았습니다. 하지만 두 단어엔 차이가 있습니다. deprecated .. 공감수 4 댓글수 0 2015. 2. 27.
  • 이미지맵 태그(map, area 태그) 이미지맵 태그(map, area 태그) map 태그는 이미지맵을 만드는 태그입니다. 이미지맵이란 클릭할 수 있는 영역을 지닌 이미지를 말합니다. map 요소는 몇 가지의 area 요소를 포함합니다. area 요소는 이미지맵에서 영역을 지정합니다. 사용 예: map 요소의 name(또는 id) 속성은 img 요소의 usemap 속성과 관계가 있습니다. 따라서, usemap과 name 이름은 동일해야 함. name과 id를 반복해서 쓴 이유는, name 속성이 xhtml에서는 퇴화 속성이기 때문. ▶함께 사용할 수 있는 속성 속성 속성값 설명 alt text area 대체 텍스트. Href 속성이 있으면 필수 coords area의 좌표. 0,0이 상단 왼쪽임 x1, y1, x2, y2 사각형 모양일 때(s.. 공감수 1 댓글수 2 2015. 2. 25.
  • [css] cursor 속성 (마우스 모양 선택) [css] cursor 속성 (마우스 모양 선택) 무척이나 길었던 명절 연휴... 잘 지내고 오셨는지 모르겠네요 너무나 오랫동안 글을 쓰지 못했네요.^^ 오늘부터 또 조금씩 야금 야금 밀린 숙제를 해치워 나가야겠어요 오늘 배울 부분은 마우스 커서 모양을 지정하는 cursor 속성입니다. cursor 속성 : 마우스 포인터가 요소 위에 있을 때 표시되는 마우스 커서 모양을 지정 css 2.1 cursor 속성 브라우저 지원: https://developer.mozilla.org/ko/docs/Web/CSS/cursor 참조해 주세요 속성값 부분에 마우스를 대면 어떤 모양인지 나옵니다~ 속성값 설명 default 기본 커서. 보통 화살표 auto 기본값, 브라우저가 문맥에 기초하여 커서를 표시함 crossh.. 공감수 2 댓글수 2 2015. 2. 23.
  • 닥터 맘스 2, 모아철 솔직한 후기 닥터 맘스 2, 모아철 솔직한 후기 설날 연휴 잘 보내고 계신가요?^^ 새해에 인사도 못 드린 것 같아, 음력 새해를 맞이해서 인사 드릴게요. 모두 새해 복 많이 받으시고, 올 한해 술술술~ 풀리시길 바랄게요.^^ 저는 결혼을 조금 늦게 한 편인데, 그래서 솔로일 때와 결혼 이후 명절에 가장 크게 느끼는 차이점은 솔로일 땐 시골 집에 다녀와서 뭐하고, 누구랑 놀까 였는데... 이제는 시댁과 친정에서 제 역할을 하다 보니, 개인적으로 하고 싶은 일들은 자연 생각하지 않게 되었다는 거예요. 저는 그래도 솔로 생활을 오래한 축이라, 이런 것들이 그렇게 아쉬운 부분이 아니지만 독신주의를 고수하고픈 분들은 이 이유가 클거라 생각 돼요. 거두절미하고, 오랜만에 글을 쓰려니 글감도 생각나지 않고 해서 요즘 철분제 복.. 공감수 5 댓글수 0 2015. 2. 20.
  • css로 반응형 메뉴 만들기 off canvas (left) css로 반응형 메뉴 만들기 off canvas (left) 지난 시간엔 select 요소로 드롭다운 메뉴를 만들었어요. 반응형 메뉴 만들기(select 태그를 이용) 오늘은 반응형 메뉴 중 off canvas 메뉴를 배워보겠습니다. 캔버스란 화폭을 말하죠. off canvas란 화폭 밖으로 분리된 것이라 보면 되겠습니다. 화면이 축소될 때 메뉴 아이콘이 등장히고, 아이콘을 클릭하면 메뉴바가 나타나며 본문을 밀어내는 형식입니다. 아래 이미지를 보고 A화면→B화면→C화면 순으로 코드 작성을 해 보세요 A 화면 B 화면 C 화면 전체 html ≡ /*메뉴 아이콘*/ /*체크박스*/ /*메뉴*/ Home Guest Notice 본문 /*본문*/ 접이식 메뉴를 만들 때 label와 체크박스를 이용하는 법을 배웠.. 공감수 1 댓글수 0 2015. 2. 13.
  • 반응형 메뉴 만들기(select 태그를 이용) 반응형 메뉴 만들기(select 태그를 이용) 어제는 체크박스와 :checked 선택자를 이용하여 토글 메뉴 만드는 법을 배웠습니다. 오늘은 select 요소를 이용하여, 반응형 메뉴를 만들어 보겠습니다. select 요소는 드롭다운 목록 만들 때 사용하며, 각 선택 항목은 option을 사용합니다. [html] select 태그 [html] option 태그 ▶전체 html Home Guest Notice Home Guest Notice 본문 우선 메뉴 목록을 만드는 것은 지난 시간에 배운 것과 동일합니다. 그리고, 화면 너비가 25em 이하에서는 드롭다운 목록이 나올 수 있도록 select를 이용하여 새로운 목록을 구성합니다. Home Guest Notice onchange="if (this.valu.. 공감수 0 댓글수 0 2015. 2. 12.
  • [css] :checked 선택자를 이용한 토글 버튼 [css] :checked 선택자를 이용한 토글 메뉴 버튼 어제는 기본적인 토글 메뉴를 만들어 보았어요. css로 토글 메뉴 만들기(메뉴 열고 닫기) label 요소와, 체크박스, checked 선택자를 이용하여 메뉴 아이콘을 클릭하면 메뉴가 생성되고, 다시 클릭하면 메뉴가 사라지는 방식을 배웠습니다. 이번에는 토글 메뉴 버튼을 만들고, 전체적인 레이아웃까지 만들어 볼게요. A 화면 B 화면 C 화면 ▶전체 html ≡ Home ❘ Guest ❘ Noitce 본문 오른쪽 사이드바 footer 모두 지난 시간 배운 것을 응용했기 때문에 지난 강좌를 먼저 읽고 오셔야 이해하기 쉽습니다~ css로 토글 메뉴 만들기(메뉴 열고 닫기) css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장) 지난 시간과.. 공감수 0 댓글수 0 2015. 2. 11.
  • css로 토글 메뉴 만들기(메뉴 열고 닫기) css로 토글 메뉴 만들기(메뉴 열고 닫기) 미디어 쿼리를 이용해서, 반응형 웹사이트 만들기 연습해 보고 있습니다. 지난 시간에는 숨김 메뉴를 드러낼 때, hover 선택자로 마우스 오버할 때만 메뉴가 생성되었는데요... CSS로 반응형 웹사이트(소스) 만들기: 사이드바가 본문 아래로 떨어지게 css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장) 오늘은 메뉴 아이콘을 클릭했을 때 메뉴가 보이고, 다시 한 번 더 클릭하면 사라지는 방식을 배워볼게요. 영어로 toggle menu(토글 메뉴)라고도 하며 자바스크립트나 jquery를 이용한 방법도 있는데, 오늘은 css로만 만들어 보겠습니다. html 소스 ≡ /*메뉴 아이콘*/ /*체크박스*/ /*메뉴*/ Home ❘ Guest ❘ Noitce .. 공감수 1 댓글수 3 2015. 2. 10.
    반응형
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.