본문 바로가기

전체 글 보기588

네이버에서 티스토리 블로그 검색되게 하기 : 네이버 웹마스터 도구 티스토리 유저들의 만년 고민은 그놈의 '네이버 검색'인 듯하다. 네이버가 폐쇄적이니 정치적이니 하는 이야기는 접어두고, 어쨌든 우리가 할 일은 방문자의 유입을 위해 우리의 티스토리를 네이버 검색에 등록하는 것, 그것 하나뿐이다. 언젠가부터 네이버에서의 유입이 뚝 끊겼다면, 네이버 웹마스터 도구에 접속하자. 네이버 웹마스터 도구 아래 링크로 네이버 웹마스터 도구에 바로 접속할 수 있다. http://webmastertool.naver.com/ 네이버 웹마스터 도구에 검색 등록하기 ① 접속 화면에서 우측 상단의 로그인 버튼을 눌러 네이버 계정으로 로그인하자. ② 티스토리는 웹페이지니까 '사이트 추가'를 클릭한다. ③ 검색 등록을 원하는 자신의 티스토리 블로그 주소를 입력한다. ④ 실제 사이트의 소유자인지를 .. 열린노트/IT·SW·디자인
스크롤을 내리면 나타나는 '맨 위로 가기' 버튼 적용하기 PC나 태블릿 환경에서 가로로 나열돼 있는 구성요소들이, 모바일 환경에서는 세로로 쭉 이어지기 때문에 스크롤이 길어지기 일쑤이다. 그래서 '맨 위로 가기' 버튼을 만들어 넣기도 하고, 스크롤을 내려도 상단에 고정되는 기본 메뉴바를 마련하기도 한다. 여기서는 우선 티스토리 블로그를 기준으로, 가장 간단한 방법의 '맨 위로 가기' 버튼 적용 방법을 소개한다. 적용 소스 HTML(skin) 마크업 티스토리 블로그 관리자 모드로 접속해 skin.html에 다음 두 가지 소스를 넣어주어야 한다. 먼저 아래 코드를 와 사이에 삽입한다. 바로 앞에 넣는 것도 괜찮다. 이 코드는 'images/up-arrow-icon.png'라는 가로 55픽셀, 세로 55픽셀의 이미지를 '맨위로' 버튼으로 사용하겠다는 뜻이다. 그 다.. 열린노트/IT·SW·디자인
웹 코딩에 필요한 CSS 단위와 사이즈 비교 표 코딩할 때 크기 속성은 여러 가지 단위로 사용할 수 있다. 요즘 브라우저들은 대부분 확대-축소(Zoom) 기능을 갖추고 있기 때문에 굳이 상대 단위인 em이나 %를 쓸 필요 없이 편한 대로 px나 pt 수치로 입력하면 되지만, 화면 크기에 따라 다르게 출력되는 반응형 페이지를 코딩할 때는 상대 단위를 활용하는 것이 유용하다. 이 장점 때문에 점점 비율 단위가 많이 쓰이는 것 같다. CSS에 사용되는 size 단위들 CSS의 크기 단위로는 절대 단위와 상대 단위가 쓰인다. 절대 단위 in(Inches) : 말 그대로 인치(inch)이다. 1인치는 2.54cm이다. cm(centimeters) : 우리가 미터법에 따라 쓰는 그 센티미터를 말한다. mm(millimeters) : 0.01cm에 해당하는 밀리미.. 열린노트/IT·SW·디자인
html의 기본 표(table) 코드 공유 지난번에 Table Generator를 소개한 적이 있다. 간단한 클릭 몇 번만으로 원하는 모양의 예쁜 테이블 코드를 자동으로 생성해 주는 사이트이다. http://www.tablesgenerator.com/ 그런데 막상 다양하고 예쁜 모양의 표를 만들어 쓰려니, 매번 포스팅할 때마다 코드를 가져오기가 너무 번거로웠다. 여러 가지 테이블을 미리 구비해 놓으면 좋겠지만, 너무 개수가 많아지면 나중에 너무 골치아파질 것 같다. 그래서 아주 단순한 모양의 표를 짜서 코드를 공유한다. 1px의 회색 테두리가 있고 셀 배경이 흰색인, 그냥 기본 표 코드이다. CSS에는 다음 코드를 추가해 준다. 혹시 제목줄을 쓸까 싶어서 th(첫째 줄) 속성에는 배경색과 별도의 테두리를 설정해 두었다. 개별 속성은 임의로 수정해.. 열린노트/IT·SW·디자인
사직서 내는 꿈을 꿨다. 설 연휴가 끝나가는 2월 20일 금요일, 밤 11시쯤 잠자리에 들었다. 그리고 너무도 생생한 꿈을 꾸었다. 등골이 오싹해지는 꿈, 직장에 사직서를 내고 마지막 출근하는 꿈이다. 짧고도 강력한 꿈이었다. 얼마나 생생했는지, 잠에서 깬 후에도 이게 현실인지 아닌지 한참을 멍하니 생각해야 했을 만큼 강했다. 사실 나는 거의 6개월 전부터 이 직장을 계속 다녀야 하나 말아야 하나 하는 고민에 빠져 있었다. (적어도 내 생각에는) 나는 드물게 일을 잘하고 또 열심히 하는 사람이다. 누가 알아주지 않아도 집에 일거리를 싸 오기 일쑤이다. 그만큼 업무 자체가 아주 마음에 들고 적성에도 잘 맞기 때문이다. 팀장님이나 임원들도 좋은 분들이고, 동료들도 대부분 성격이 좋다. 하지만 '일하기 싫어지게 만드는' 요인들이 자꾸.. 일상기록부
[스페인] 바르셀로나 여행을 위한 맵북 다운로드 스페인 여행 준비에서 가장 골치아픈 건 역시 바르셀로나다. 볼 게 너무 많다 보니 도무지 정리가 안 된다. 여행사들이 운영하는 일일 현지 가이드 투어도 너무 많아서 머리가 아플 지경. 웬만하면 투어 없이 혼자 여행하고 싶은데 쓸 만한 정리 자료가 없을까 하다가, 정말 놀라운 자료를 발견했다. 바로 투어팁스가 제공하는 맵북 서비스. '맵북'이라는 타이틀에 맞게, 엄청나고 방대한 지도 자료들을 수록하고 있다. 완전 소중하다. 이게 무료라니. 지도뿐만 아니라 전반적인 여행 정보를 수록한 가이드북도 제공한다. 역시 무료다. 개별 유저들이 업로드한 여행 자료도 받아볼 수 있다. 나는 일정은 어느 정도 짰고 축구는 마드리드 홈구장에서 볼 계획이므로 이 두 권은 다운받지 않았다. 바르셀로나뿐만 아니라 주요 도시들에 .. 여행노트/스페인 여행
[스페인] 2015년 최신판 바르셀로나 지하철 노선도 요즘 업무가 너무 바쁜 와중에도 틈틈이 스페인 여행을 준비 중이다. 가장 고민되는 것은 역시 바르셀로나. 이렇게 관광할 데가 많은 도시가 존재했다니, 놀라워 기절할 정도다. 여행사 투어를 며칠 끼워야 하나 말아냐 하나 고민이 심각하다. 일단은 최근 지하철 노선도부터 구해 놓았다. 가이드 투어를 하든 알아서 여행하든 간에, 바르셀로나는 지하철 없이는 도저히 여행이 불가능하다고 판단했기 때문이다.(대도시가 다 그렇지 않겠는가) 다운로드는 페이지 맨 아래에. 바르셀로나 2015년 지하철(Metro) 노선도 어렵지 않게 구한 전체 노선도. 2015년 최신판이다. 마음에 든다. 역 하나하나가 자세히 잘 보인다. 각 라인별 설명도 붙어 있고, 2015년 요금도 함께 있다. 만족스럽다. 지하철 노선도 JPG 파일 내.. 여행노트/스페인 여행
스페인(Spain/Espana) 구글맵 여행 지도 스페인 여행을 앞두고 고민하는 예비 여행자들을 위한 포스트들입니다. 한국어 인터넷에서 모은 것들과 외국(영어 또는 스페인어) 사이트에서 번역해 모은 것들이 섞여 있습니다. 많은 정성을 들인 자료이므로 다른 곳으로 공유하지 마시고 개인적으로만 사용하시기를 부탁드립니다. *페이지 맨 아래에서 본문 내용과 각 명소의 사진을 PDF 파일로 다운로드할 수 있습니다. *파일 비밀번호는 somglespa입니다. *자료가 도움이 되었다면 인사 한 줄 남겨 주세요. 제대로 된 상세 지도가 있어야 여행 일정(루트)을 짤 수 있으니 지도는 정말이지 중요하다. 구글 맵(Google Map)이라는 훌륭한 서비스가 있지만 구글 맵은 넓은 범위를 확대해 한 번에 저장할 수도, 출력할 수도 없어 불편하다. 그래서 구글 맵을 확대한 .. 여행노트/스페인 여행
왕초보를 위한 - 항공권을 예약하는 다양한 방법 학생 때는 돈이 없어서, 취업하면 결혼 자금 마련하느라, 결혼하면 시댁 눈치 보느라, 나이 먹으면 체력이 달려서 못 간다는 해외여행. 직장인이라 돈도 벌겠다, 결혼은 기왕 늦었겠다, 한 살이라도 젊을 때 있는 시간 없는 시간 쪼개어 틈틈이 좋은 곳을 여행하기로 결심한 어느 때부터인가 이제 틈만 나면 해외여행 궁리다. 올해 계획한 첫 번째 여행지는 스페인. 2015년에는 공휴일이 거의 토요일이나 일요일이라 빨간 날이 별로 없어서, 설 연휴가 황금 같았다. 그런데 일이 바빠도 너무 바빠서 결국 설 연휴는 포기하고 5월에 있을 ‘근로자의 날+어린이날’ 조합, 또는 석가탄신일을 끼워서 휴가를 떠나기로 결정했다. 그리고 곧장 스페인행 비행기 티켓을 백방으로 알아보기 시작했다. 그 과정에서 터득하게 된 스페인 항공.. 여행노트/스페인 여행
티스토리에서 div 태그만으로 첨부파일 다운로드 버튼 꾸미기(CSS) 굳이 티스토리 블로그를 이용하는 이유는 모두 같다. 사용자가 마음껏 html를 수정하며 꾸미는 재미가 있기 때문이다. 그런데 티스토리의 에디터에서 ‘파일 첨부’ 기능을 이용하면 첨부파일 화면의 디자인이 예쁘지가 않다. 무슨 말이냐 하면, 아래와 같이 ‘파일 첨부’를 이용해서 방문자가 다운로드할 수 있도록 파일을 업로드하면 이렇게 파일 아이콘과 파일명이 통째로 생성된다. 코드를 들어가 보면 이런 구조로 돼 있다. 물론 이 코드를 분석해서 파일의 URL을 추출하고 CSS를 이용해 a 태그에 예쁜 효과를 준 다음, 각 글을 쓸 때마다 버튼 속성을 달리 줄 수도 있다. 그런데 이 경우 매번 긴 태그를 입력해야 한다는 번거로움이 있다. CSS를 꾸몄다 하더라도, 첨부파일을 올릴 때마다 글에 다음과 같은 태그를 첨.. 열린노트/IT·SW·디자인
다양한 형식의 예쁜 표(테이블)를 자동으로 만들어주는 사이트 CSS에 익숙해지면 페이지를 코딩하거나 블로그 게시물을 쓸 때 별로 막히지 않는데, 유독 테이블만 작성하려고 하면 굉장히 골치 아프다. 틀을 좀 정해 놓고 싶어도 하드 코딩만으로는 적당하고 예쁜 테이블 속성을 완성하는 데 시간이 많이 걸리고 디자인 감각도 여간 필요한 게 아니다. 그래서 찾은 곳이 바로 Table Genetrator. 간단하게 예쁜 html(CSS) 테이블(table) 만들기 먼저 아래 사이트에 접속한다. http://www.tablesgenerator.com/ 가면 이렇게 쭉 종류별 테이블들이 구분돼 있다. LaTeX, HTML, Text, Markdown 등등... 원하는 형식을 찾아가자. 대부분은 HTML이 필요할 것 같고, Text Table도 경우에 따라 아주 쓸모가 많을 것 같.. 열린노트/IT·SW·디자인
티스토리나 웹사이트에 Font Awesome 글리프 아이콘 CSS 활용하기 지난 포스트에서 Font Awesome 4.3.0 설치와 사용법을 간단하게 소개했다. Font Awesome 설치 및 사용법 포스트 바로가기 위에서 설명한 방법은 HTML 등에서 마크업하는, 그러니까 일일이 입력해 주는 방법이다. 실제로 Font Awesome 홈페이지에 있는 'Examples'에서는 거의 이 방법들만을 위주로 소개하고 있다. 그런데 글리피콘의 진가는 개별 마크업에서 오는 게 아니라, CSS에서 온다. 일정한 class 네임을 가진 요소들의 앞이나 뒤에 이 글리프 아이콘들을 넣도록 설정함으로서 웹사이트와 블로그의 디자인을 더욱 깔끔하고 예쁘게 꾸밀 수 있는 것. 그 기본적인 원리와 방법을 소개한다. Font Awesome을 CSS에 활용해 보자 리스트 앞에 사용하기 Font Awesome.. 열린노트/IT·SW·디자인
집에서 만든 요구르트로 과일 요거트 해 먹기 겨울철이면 요구르트 제조기로 뽀송뽀송 보들보들한 요구르트를 꼬박꼬박 만든다. 우유랑 액상 요거트 한 병을 휘~ 휘~ 저어 섞고 요구르트 제조기 병에 나누어 남아 돌리면 끝. 그대로 병째 냉장고에 넣어 두면 배고플 때마다 한 끼 뚝딱 하기 좋다. (물론 그렇다고 밥을 안 먹는 건 아님. 요거트는 간식일 뿐.) 먼저 국그릇에 귤 하나 까서 담고 사과도 대충 쪼개 넣는다. 깎아 두면 금세 갈변하니 만들기 직전에 깎는다. 파프리카를 넣어도 엄청 맛있다. 우리집엔 일 년 내내 파프리카가 있다는 소문이 있다고 한다. 요구르트 한 병 투척한다. 아까우니까 밥숟가락보다 조금 작은 도시락용 숟가락으로 싹싹 긁어 모은다. 땅콩은 필수! 땅콩만 있으면 과일이 없어도 엄청 맛있다. 하지만 땅콩이 없으면 과일이 많아도 맛이 없.. 열린노트/만들기·그리기
알아두면 유용한 무료 디자인 소스(이미지, 음원) 사이트 블로그를 포함해 각종 콘텐츠 작업을 하다 보면 사진이나 일러스트, 사운드 소스가 필요할 때가 많다. 그럴 때마다 유용하게 활용할 수 있는 Stock Free 사이트들을 스크랩해 왔다. 1. 모그파일 강력 추천하는 곳입니다. 너무 많이 검색되어서 원하는 것을 솎아내는 데 시간이 필요할 정도. http://morguefile.com/ 2. 월페이퍼스와이드 정말 멋진 고화질 사진들이 많습니다. 단, 이 사진을 활용할 때 상업적 용도는 따로 승인을 받으셔야 하며, 이곳의 출처를 밝히는 것이 좋습니다. http://wallpaperswide.com/ 3. 이미지베이스 이름처럼 무료 이미지들을 모아놓고 있는 곳입니다. ‘고퀄’ 무료 이미지를 모으기 위해 노력하고 있고, 실제로 좋은 이미지를 찾을 수 있어요. htt.. 열린노트/IT·SW·디자인
자주 쓰이는 웹 색상 표 : 색상 코드(color code)와 이름 모음 웹페이지를 코딩하다 보면 아무래도 기준컬러 몇 가지를 조합하고 반복해서 사용하는 경우가 많다. 그럴 땐 복잡한 여섯 자리 Hex Code를 외워 쓰느니, 차라리 색상 이름을 사용하는 편이 낫겠다. '#FFD700'보다는 'Gold'가, '#87CEEB'보다는 'skyblue'가 더 간편하니까. HTML name Hex code R G B Decimal code R G B Pink FF C0 CB 255 192 203 LightPink FF B6 C1 255 182 193 HotPink FF 69 B4 255 105 180 DeepPink FF 14 93 255 20 147 PaleVioletRed DB 70 93 219 112 147 MediumVioletRed C7 15 85 199 21 133 Lig.. 열린노트/IT·SW·디자인

티스토리툴바