굴리고 굴리는 블로그

티스토리 블로그 폰트(글씨체)를 자유자재로 바꿀 수 있는 다양한 웹폰트가 있습니다. 웹폰트란 웹페이지를 보는 사람의 컴퓨터에 특정 글꼴이 설치돼있지 않더라도 웹페이지 로딩과 동시에 글꼴이 받아져서 볼 수 있게 하는 폰트입니다. 지금 제 티스토리 블로그에서 보고 계신 이 글에 적용된 폰트도 웹폰트입니다. 폰트명은 넥슨 Lv.2 고딕으로, 무료로 이용가능토록 배포된 코드를 이용해서 아주 간단하게 적용한 것입니다. 무료 웹폰트를 티스토리에 적용하는 방법 무료 웹폰트를 티스토리에 적용하는 방법은 다음과 같습니다. 1. 무료 웹폰트를 제공하는 사이트에 접속하여 마음에 드는 폰트(글씨체)를 고릅니다. 무료 웹폰트를 제공하는 사이트는 눈누(noonnu.cc/) 또는 구글 폰트(fonts.google.com/)가 있습..

티스토리 블로그를 하는 재미 중 하나는 스킨과 폰트를 자유자재로 변경할 수 있다는 점입니다.(여기에 구글의 애드센스 광고까지 추가할 수 있으니 더욱 재밌습니다.) 굴리고 굴리는 블로그라는 티스토리 블로그를 운영한지 햇수로 3년째, 만으로는 2년 가까이 됐습니다. 길다면 길고 짧으면 짧은 기간이지만 (제 기준에서) 생각지도 못한 많은 분들께서 방문해주셨고 소중한 댓글을 달아주신 분들도 많아 블로그를 운영하는 재미가 더욱 커졌습니다. 처음에는 기본 스킨부터 시작하였고, 간단한 HTML, CSS의 코드 수정도 할 줄 몰라 티스토리에서 제공한 기본 기능만 사용하면서 글을 썼습니다. 하지만 티스토리 생태계에 들어와 여러 블로그들을 방문해보고 정말 멋지고 좋은 느낌이 나는 블로그들을 많이 보았습니다. 저도 그런 좋..

티스토리에서 기본적으로 제공하는 반응형 스킨인 포트폴리오 스킨을 적용 후, 포스팅한 내용들을 보니 넓은 도화지 내의 공간을 충분히 활용하지 못한 느낌이 살짝 들었습니다. 이유는 본문 너비가 충분히 넓지 않게 설정돼있기 때문이었습니다. 요즘에는 정사각형 모니터를 쓰시는 분들보다 와이드형 모니터를 쓰는 분들이 훨씬 많기 때문에 티스토리 블로그의 화면을 효율적으로 활용할 필요가 있었습니다. 우선 본문 너비가 720px로 비교적 좁은 상태의 화면을 보시면 아래와 같습니다. 이 정도의 너비가 적당할 수도 있고 보기 좋을 수도 있지만 애드센스 반응형 광고가 표출될 때 보면 정사각형에 가까운 광고가 나오는 경우가 많아 글이 쓰인 문단의 너비와 왠지 어울리지 못하는 느낌이 살짝 듭니다. 이를 해결하기 위해 아래와 같이..

오랜만에 티스토리 블로그 스킨을 변경했습니다. 2020년 8월 24일에 JB Skin(유료스킨)으로 변경 후 다시 순정 스킨으로 돌아왔습니다. 야매로 배운 스킬로 JB Skin을 요리조리 수정하고 재밌게 사용하면서 정말 정이 들었었습니다. 어느 날 스킨을 수정하면서 반응형 코드를 어딘가 잘못 건드렸는지 모바일에서 접속 시 메인화면에 가로로 스크롤이 생기는 문제점이 있었습니다.(화면이 모바일 화면에 딱 맞지 않고 건들건들 거리는 현상이랄까요?) 다행히 글을 읽을 때는 이런 현상이 발생하지 않아 아쉬운대로 그냥 적용하다가, 갑자기 블로그 뽐뿌가 와서 한번 고쳐봐야겠다! 고 생각하고 오리지널 JB Skin을 다시 적용했습니다. 근데 이게 웬걸... 기존에 튜닝해놓은대로 다시 하나하나 수정하려니 생각보다 많은 ..

원하는 장소, 원하는 시간에, 하고 싶은 일을 한다 디지털노마드(Digital Normad) 라는 말. 한번쯤은 다들 들어보셨을 것입니다. 말 그대로 온라인 상에서 유목민처럼 떠돌아다니면서 생활하는 사람들입니다. 정해진 공간이 없이 노트북 한대만 있으면 어디서든 일을 할 수 있고, 아이디어나 나의 이야기, 콘텐츠, 지식이 있으면 누구나 할 수 있는 직업군입니다. 특히 초기자본이 거의 들지 않으면서(초기자본이 전혀 필요 없기도 합니다.) 나의 능력에 따라 적정한 수익에서 큰 수익까지 낼 수 있는 무궁무진한 잠재력을 가진 직업이라고 생각합니다. 처음 디지털노마드라는 말을 들었을 때 들었던 생각은 다음과 같습니다. 진짜 자유로운 직업이다. 직장에 얽메일 스트레스도 없고, 내가 원하는 시간에 원하는 장소에서 일..

저의 티스토리 블로그 첫 화면(메인화면)을 보시면 아래와 같이 유튜브 영상이 배치돼있는 것을 보실 수 있습니다. "워런버핏이 된다는 것(Becoming Warren Buffett)" 라는 약 1시간 반짜리 유튜브 영상을 블로그 메인에 넣은 것입니다. 아주 감명깊게 본 영상으로 긴 긴 투자여행의 큰 이정표 같은 울림을 주는 영상이기에 대표 영상으로 넣었습니다.(유튜브 올려주신 분 감사합니다. 내리시지 않으셨으면 좋겠습니다^^) 이처럼 원하는 영상을 티스토리 블로그에 넣는 방법은 간단합니다. 코딩이라곤 HTML과 CSS를 여기저기 기웃거리며 짜집기로 아주 조금 배운 저도 몇 번 시도하다보니 성공했으니까요! 영상을 넣는 소스로는 다양한 소스가 있겠지만 저는 아래의 소스로 영상 배치에 성공했습니다. 위 소스를 ..

2019년 9월. 태어나서 처음으로 블로그를 개설해보았습니다. 기존에 네이버 블로그에 개인용 자료들을 주섬주섬 난잡하게 비공개로 저장하는 용도로만 블로그를 이용했지, 이렇게 꾸준하게(?) 글을 쓰고, 방문자분들과 댓글로 소통하는 형태의 블로그는 처음이었습니다. 시작이 반이라고 글이 안써질 때도 있고, 포스팅하는 것 자체가 일이 되는 경우도 있었지만 어쨌든 시간은 흘러흘러 블로그를 시작한지 1년 반이 되었습니다. 나름 2년차 블로거!(훗) 블로그를 시작한 이유, 더 정확하게는 티스토리 블로그를 시작한 이유는 블로그를 통해 돈을 벌 수 있다는 것을 알고서부터입니다. 그 전에 유튜브 얘기를 잠시 하자면... 2019년 9월이면 이미 유튜브가 엄청나게 성장해서 이미 큰 채널로 성장한 유튜브 채널부터 새롭게 뛰어..

HTML이라는 웹 언어를 공부하고 있습니다. 기초적인 사항이지만 배운 내용을 잊어버리지 않기 위해 바로 기록해놓습니다. 이번 글은 HTML의 기본 구조에 대한 설명입니다. HTML의 기본구조 우리가 어떤 웹페이지에서 보게되는 화면은 HTML에서는 태그 안에 나열된 수많은 태그들의 결과입니다. 그리고 이 태그를 설명해주는(즉, 화면에 보이는 웹페이지를 설명해주는) 태그를 HTML언어 배우기 HTML과 CSS언어를 배워서 블로그를 좀 더 재미있게 만들어봅시다. html파일로 저장 후 웹브라우저로 표출해보면 아래와 같이 나타나는 것을 확인할 수 있습니다. 이처럼 HTML언어 배우기 HTML과 CSS언어를 배워서 블로그를 좀 더 재미있게 만들어봅시다. 블로그는 티스토리 블로그를 쓰고 있습니다. 메모장에 다음과 ..

HTML태그 중 많이 사용하는 h1~h6태그를 간단하게 살펴보겠습니다. 이 중에서도 h1, h2태그를 가장 많이 사용합니다. 현재 생활코딩이라는 아주 유익한 유튜브 채널을 통해 코딩을 독학으로 배우고 있는데요, 생활코딩의 선생님이 강조하신 사항은 모든 태그를 다 외울 수 없고, 외울 필요도 없다는 것입니다. 그보다 "내가 작업하다가 떠오른 아이디어를 웹페이지에 구현하기 위해 이러이런 기능이 필요한데 어떤 태그지?" 하는 궁금증이 생겼을 때, 이를 검색해서 찾아낼 수 있는 능력을 키우는 게 훨씬 더 중요하다고 하셨습니다. h1 태그도 이런식으로 접근해보겠습니다. 가령 구글에 html h1 tag로 검색을 해보겠습니다. 그러면 연관검색어까지 주르륵 나와 수많은 검색결과가 나올 것임을 예측할 수 있습니다. 검..

li, ul, ol 태그란? 웹페이지에 목록을 만들어주는 태그인 li, ul, ol 태그를 정리해놓으려 합니다. HTML의 태그 중 하나인 li태그, ul태그, ol태그는 목록을 만들어주는 태그입니다. 가령 현재 제 블로그의 카테고리를 예로들면, 1. 절세계좌 활용법 2. 현명한 투자자로 성장하기 3. 투자의 대가 4. 배당 일정표 이와 같이 목록을 나열해주는 태그가 이 li, ul, ol 태그입니다. li태그는 list(목록)의 약자이고, ul태그는 unordered list(순서가 정해지지 않은 목록)의 약자, ol태그는 ordered list(순서가 정해진 목록)의 약자입니다. li태그 list태그로 예로든 카테고리를 작성해보면 다음과 같습니다. 메모장에 아래와 같이 입력해 봅니다. 절세계좌 활용법..