본문 바로가기
반응형

전체 글219

『HTML CSS 기초』 실습예제 다운로드와 사용 안내 안녕하세요. 지구별에입니다. 이번에 출간한 전자책『 HTML CSS 기초 — AI 작업이 막힐 때 찾아보는 쉬운 웹 기본서』의 WEEKEND 실습편에서 사용하는 예제 파일과 사용 방법을 안내합니다. 책을 읽다가 직접 코드를 바꾸어 보고 싶을 때, 해당 장의 예제 파일을 내려받아 함께 실습해 보세요.실습예제 다운로드아래에서 실습할 장의 ZIP 파일을 내려받으세요. 각 장의 예제는 해당 장에서 배운 내용을 중심으로 구성했습니다. 앞 장의 완성 파일을 이어서 수정할 필요 없이, 실습할 장의 예제로 시작하면 됩니다. 32장에는 책에서 배운 내용을 모아 만든 WEEKEND 통합 완성본이 들어 있습니다. 글과 사진, 메뉴, 카드, 일정표와 입력 양식이 어우러진 웹페이지를 살펴보고, 나만의 내용으로 바꾸어 보.. 2026. 11. 4.
제가... 전자책을 내게 되었습니다. 『HTML CSS 기초』— AI 작업이 막힐 때 찾아보는 쉬운 웹 기본서 안녕하세요. 지구별에입니다. 정말 오랜만에 인사드립니다. ^^ 결혼하고 아이를 키우며 지내다 보니, 어느새 10년 넘게 티스토리를 비워 두었네요. 오랜만에 돌아와 예전에 쓴 글들을 살펴보니, 하나씩 배우고 정리해 올리던 그 시간들이 떠오르네요. 오늘은 그동안의 안부와 함께 기쁜 소식을 전하려고 합니다. ^^ 이 블로그에 썼던 HTML과 CSS 기초 글을 바탕으로 전자책을 한 권을 내었습니다.(이제 판매 등록을 하였기에 서점에 노출되기까지 시간이 걸리겠지만이요..) 제목은 바로, 『HTML CSS 기초』— AI 작업이 막힐 때 찾아보는 쉬운 웹 기본서 예전에 정리했던 내용을 다시 살펴보며 달라지거나 부족한 부분을 보완하고, 필요한 설명과 실습을 더해 한 권으로 묶었습니다. 그때처럼 제가 이해한 내용을 .. 2026. 11. 3.
초등 아이와 가볼만한 곳, 놀숲 신림점에 다녀오다 초등 아이와 가볼만한 곳, 놀숲 신림점에 다녀오다 지난 주말에 아이와 어디를 갈까 생각하다가 만화방에 방문해 보기로 했어요. 평소에 도서관이나 서점은 자주 갔지만 만화만 볼 수 있는 공간은 처음이거든요. 예전의 만화방은 단순히 만화책, 간식만 있는 곳이었는데 요즘에는 휴식 쉴 수 있는 공간으로 새롭게 변신이 되었더라고요. 저희 집에서는 버스로 한 번에 도착! 20분 정도 밖에 안 걸렸어요. 찾기도 어렵지 않았어요. 저는 지상에 있는 줄 알았는데 지하 1층에 있더라고요. 아.... 예전에 지하 만화방의 그 어둡고 퀴퀴한 냄새가 날까 걱정하며 들어갔는데... 아래로 내려가니 제일 먼저 신발장이 나오고 마치 카페 처럼 꾸며져 있더라고요. 일단 옛날 생각하던 그 어두운? 이미지가 아니어서 안심. 신발장 키를 카.. 2023. 3. 15.
진로 고민하는 친구들에게 해주고 싶은 말 진로 고민하는 친구들에게 해주고 싶은 말 청소년 시절부터 20대를 관통하는 키워드가 무얼까요? 바로 진로 문제일 것 같아요. 저 같은 경우는 잘 하는 어떤 분야에서 선두에 서는 것. 1등이 되는 것이 중요했고 다른 사람보다 잘한다는 것(우위에 서는 것)이 카타르시스를 주었어요. 그래서일까요? 그에 대한 반증으로 조금 잘했다고 하더라도, 2 3 4 등이 되면 주목 받지 못하게 되고, 인정 받지 못한 것 같고, 이 길을 계속 가도 되는지 끊임 없이 생각하게 되고 결국 포기한 경험이 셀 수 없이 많았습니다~ 지나고 보면 참 아까워요. 내가 좋아하고, 조금은 재능이 있었던 분야인데 1등이 되지 못해서 인정을 못받는 것 같고, 그래서 나 자신에 확신이 서지 못하고, 결국 그 일로 성공하지 못할 것.. 2023. 3. 3.
초등학교 저학년 공부, 어떻게 해야할까 ? 안녕하세요? 무척 오랜만에 티스토리에 접속을 했습니다. 너무 오래 쉬었지요.... 너무 시간이 오래 지나기도 했고, 일일이 그간 있었던 일을 단 몇 줄로 표현하기가 어렵네요 ^^.... 조금씩 쉬운 글을 올리면서 그동안 어떻게 지내왔는지 적어 볼게요. 물론 제 티스토리에 한 번 들어오신 분들이라면 관심 사항이 아니겠지만.... 나이가 들어서인지 핵심만 말하는 데 자신이 없다고 해야 하나.... 자꾸 쓸데 없는 말이 나오는 것도 같고 이해해 주시고요. 우리 아이가 벌써 초등학교 1학년이 되었답니다. 지난 해 그러니까 7살에 한글을 떼었는데 한글을 배우고 떼기까지 또 험난한 과정이 있었습니다. 그래서 '아 ~ 이제 한글을 읽을 수가 있구나~'하고 한시름을 놓을 때쯤 이제는 ' 얘를 어떻게 공부시켜야 하나?'.. 2022. 6. 9.
고무나무 키우기 고무나무 키우기, 물주기, 분갈이하는 법 안녕하세요. 오랜만에 식물에 관해 글을 쓰네요 지난주에 화원에 가서 고무나무, 떡갈 고무나무, 스파티 필름을 데려왔어요. 아기 낳고 한 몇 년간은 키우던 화초들이 베란다에서 말라가는 것만 보다가, 이제서야 마음에 여유가 살짝 생겨 화원에 들렀습니다. 모두 작은 포트로 된 것들이여서 마사토와 배양토도 사와서 분갈이도 했어요. 이 세 가지 식물은 모두 처음 키워보는 식물인데 그래서 최적의 환경을 찾아주기 위해 공부도 하고 매일 매일 상태를 살피고 있어요. 오늘은 고무나무에 대해서 정리를 해 보려고 합니다. 고무나무 키우기 고무나무는 원래 열대우림지역, 그늘에서 자라는 식물이라고 합니다. 이 식물은 적절한 빛과, 적절한 그늘이 모두 필요한 식물인데요 직사광선보다는 간접.. 2019. 10. 30.
W3C 미디어 쿼리 level 4(Candidate Recommendation), 번역해 보다 W3C 미디어 쿼리, 번역해 보다 제가 블로그 공백이 너무 길다 보니 처음 글로 무엇을 쓸까 참 많이도 헤멨는데.... 그러다가 반응형 웹 기술에 필요한 '미디어 쿼리'가 가장 적절하고 필요한 글이란 생각이 들었답니다 예전에 미디어 쿼리 관련 글([css] 미디어 쿼리, @media query 이해하기)을 쓴 적도 있지만, 보완해야 할 점이 많이 보이더라고요. 그런데 이 자료 저 자료를 모으다 보니 시간이 생각 외로 너무 많이 걸려서요... --; 그래서 마음에 부담을 줄일 겸, W3C에서 작성한 미디어 쿼리 글을 번역해 보려고 합니다. (원문을 통째로 번역한 것은 아니며, 제가 자의적으로 제외시킨 부분도 있음) 이 문서는 권고안이 되기 전 권고안 후보(Candidate Recommendation)이며,.. 2019. 10. 5.
[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원 .. 2015. 5. 29.
근황 요즘 블로그에 들어 올 경황이 없었어요 한동안 내키지 않기도 했고 제 일을 인수인계하면서 들어 올 수도 없었고요 시간은 왜 이리 빨리 흐르는지 저는 벌써 30주랍니다 2개월 조금 지나면 아가가 탄생해 있을 거예요 지금까지와는 사뭇 다른 새로운 환경이 펼쳐지겠지요^^ 앞을 너무 내다보며 살진 않으려 해요 현재에 충실하면서 아이를 위해 그리고 저를 위해서도 좋은 것을 더 많이 보고 생각하며 살려고해요^-^ 그럼 또 시간 될 때 종종 기록을 남길게요 2015. 5. 1.
[반응형 웹사이트] 유동적인 그리드, 이미지, 크기 조절이 가능한 글꼴 [반응형 웹사이트] 유동적인 그리드, 이미지, 크기 조절이 가능한 글꼴 오늘은 반응형 웹사이트에서 자주 등장하는 개념 정리를 해 보려고 합니다. 반응형 웹사이트란, 브라우저나 기기 환경에 따라 레이아웃이 유동적으로 변하는 것을 말하지요. 그래서 자주 등장하는 단어가 아래 두 가지입니다. Fluid Grids (유동적인 그리드) Fluid Images (유동적인 이미지) 먼저 그리드란? 그리드란 우리말로 격자라고 하는데, 웹페이지를 수직 수평선으로 분할하는 레이아웃 요소입니다. 수직, 수평선은 사용자에게 보이지 않을 수도 있습니다. 아래 이미지는 부트스트랩 그리드 예시임. 제 블로그 역시 헤더, 본문, 사이드바, 푸터 등 전형적인 레이아웃 입니다. http://getbootstrap.com/examples.. 2015. 4. 6.
반응형

티스토리툴바