티스토리 블로그 꾸미기: 오디세이 스킨에서 SNS 버튼 링크 연결 되지 않는 오류 수정하기 이전 포스팅에 이어서 오디세이 스킨으로 변경하니까 SNS 링크를 입력하면 자동으로 SNS 버튼이 생기는 기능이 있어서, 잘 관리하고 있지는 않지만^^; liis 인스타그램 추가하였다. 당연히 링크가 잘 연결되어있겠거니 하면서 신경쓰지 않고 있었는데, 우연히 눌러보니까 사이트에 연결할 수 없다는 메시지가 뜨는 것이다. 그래서 URL 주소를 잘못 입력했나 싶어서 다시 고치고, https도 혹시나 해서 http로 바꿔보기도 하고...했는데도 오류가 떠서 html를 살펴보니... URL 주소 앞에 '//' 이렇게 슬래시 두 개가 붙어 있는 것이었다. 그렇니까 오류가 난 이유는 굳이 'https://'라고 적을 필요없이 w..

티스토리 블로그 꾸미기: 오디세이 스킨의 로고 이미지 크기 원하는 대로 바꾸기 오랜만에 티스토리 블로그 스킨을 바꾸었다. 가장 최근 스킨인 'Odyssey(오디세이)'을 보니까 html을 변경하지 않고도 커스텀하기 좋게 잘 나온 것 같아서 나도 이것 저것 바꾸어 보는 중이다^^ 블로그의 타이틀도 이미지로 바로 넣을 수 있게 되어있는데, 텍스트 크기 18px에 맞춰서 고정이 되어있다보니까 로고 이미지의 높이가 '18px'보다 큰 경우 아래처럼 로고가 너무 작게 들어가서 보기가 좋지 않다. ↓ 이 부분은 티스토리 블로그 html 편집하는 곳에서 간단하게 수정이 가능해서 바꾸어보겠다. 변경할 부분 로고 크기 바꾸기 모바일 화면에서 로고 관련 부분 수정하기 CSS:로고 크기 변경 일단 '스킨편집'에서 로고 이미..

html: 레이아웃 구조 ↓↓↓ 차례대로 먼저 보고 오기 ↓↓↓ 서당개 웹 튜토리얼 시작! Let's Start! '서당개 웹 공부' 튜토리얼 소개 서당개 웹공부 프롤로그 프롤로그 튜토리얼 소개 (링크트리 스타일 랜딩페이지 만들기) 누구에게 도움이 될까? 긴~ 서론 '랜딩페이지 제작 판매'를 하는 것이 올 liis.tistory.com 서당개 웹 튜토리얼 00. 무료 소스 코드 편집기: vscode 웹사이트 제작하기 위한 소스 코드 편집기: 비주얼 스튜디오 코드(Visual Studio Code, VSCode) 서당개 웹 튜토리얼 시작! Let's Start! '서당개 웹 공부' 튜토리얼 소개 서당개 웹공부 프롤로그 프롤로그 튜 liis.tistory.com 서당개 웹 튜토리얼 01. 웹 퍼블리싱 전 기..

웹 제작 기초 작업: 와이어프레임 작성하고 초기 세팅하기 서당개 웹 튜토리얼 시작! Let's Start! '서당개 웹 공부' 튜토리얼 소개 서당개 웹공부 프롤로그 프롤로그 튜토리얼 소개 (링크트리 스타일 랜딩페이지 만들기) 누구에게 도움이 될까? 긴~ 서론 '랜딩페이지 제작 판매'를 하는 것이 올 liis.tistory.com 서당개 웹 튜토리얼 00. 무료 소스 코드 편집기: vscode 웹사이트 제작하기 위한 소스 코드 편집기: 비주얼 스튜디오 코드(Visual Studio Code, VSCode) 서당개 웹 튜토리얼 시작! Let's Start! '서당개 웹 공부' 튜토리얼 소개 서당개 웹공부 프롤로그 프롤로그 튜 liis.tistory.com ↑ 지난 포스팅에서 웹사이트를 만들 때 사용하는 소스..

웹사이트 제작하기 위한 소스 코드 편집기: 비주얼 스튜디오 코드(Visual Studio Code, VSCode) 서당개 웹 튜토리얼 시작! Let's Start! '서당개 웹 공부' 튜토리얼 소개 서당개 웹공부 프롤로그 프롤로그 튜토리얼 소개 (링크트리 스타일 랜딩페이지 만들기) 누구에게 도움이 될까? 긴~ 서론 '랜딩페이지 제작 판매'를 하는 것이 올 liis.tistory.com ↑지난 포스팅을 통해서 링크트리 형태의 랜딩페이지를 제작하기로 하며 '서당개 웹 공부'의 포문(?)을 열었다. 웹페이지는 메모장만 있어도 만들 수 있지만, 좀 더 편리하게 소스를 작성하기 위해 소스 코드 편집기를 이용하면 좋다. 이전에 웹 퍼블리싱을 독학할 때 개발자 분께 추천 받은 무료 프로그램인 '앱타나(Aptana)'..

'서당개 웹 공부' 튜토리얼 소개 서당개 웹공부 프롤로그 프롤로그 튜토리얼 소개 (링크트리 스타일 랜딩페이지 만들기) 누구에게 도움이 될까? 긴~ 서론 '랜딩페이지 제작 판매'를 하는 것이 올해 목표 중 하나였다. 웹 퍼블리싱에 관심도 있고 회사에서 웹디자인 할 때마다 퍼블리싱을 어깨너머 배우기도 했기 때문에 서당개 풍월 읊 듯 간단하게 웹 페이지를 제작하는 것은 할 수 있을 것 같아 용기있게 목표로 삼았지만, liis - 2021년 새해 목표 4가지 웹 특성 상 발생할 수 있는 여러가지 오류를 해결하기에는 서당개 수준의 웹 경험만 가지고서는 돈을 받고 웹 제작을 하는 것은 아직 무리가 있다고 생각이 들었다. 그래서 티스토리 블로그에 '튜토리얼' 방식으로 랜딩페이지를 처음부터 끝까지 만들어보는 경험을 공..

티스토리 블로그 꾸미기: 답글 프로필 이미지 블로그의 Portfolio 스킨을 사용 중인데, 댓글을 달면 내 프로필이 보이지만, 댓글에 답글을 달면 랜덤 프로필 이미지가 나오는 것이다. (내 답글 프로필은 튜브...멋쩍ㅋ) 보통 내가 내 글에 '댓글'보다 '답글'을 달게 될텐데, 계속 요렇게 내 프로필 대신 랜덤 이미지가 보이는 것이 아쉬워서 수정을 해보았다. (다행히도) 코드 한줄로 간단하게 수정 가능!^^ html: 수정 수정 전 코드 ㄴ /*이미지 경로를 수정!*/ '티스토리 블로그 > 스킨 편집 > html 편집'에서 Portfolio 스킨 기준으로 's_rp2_rep' 태그를 먼저 찾는다. (단축키: Ctrl+F) 태그 내에 경로를 보면 유저마다 랜덤하게 부여되는 카카오톡 캐릭터 프로필 이미지 ..

티스토리 블로그 꾸미기: 스크롤 메뉴바 만들기 티스토리 블로그 Portfolio 스킨을 사용하면서 좀 아쉬웠던 점이 글 내용이 길면 상단 메뉴바가 보이지 않는다는 점이다. 다른 카테고리의 글을 보고 싶으면 맨 위로 스크롤을 쭉해서 메뉴 버튼을 찾아야 했다. 나도 내 블로그에서 다른 글 보기가 어려운데 방문자들은 오죽할까. 그래서 상단에 고정되는 메뉴바를 만들고 더 나아가서 스크롤할 때 등장하도록 애니메이션까지 추가해보련다! 이 튜토리얼은 티스토리 블로그 Portfolio 스킨에 초점이 맞춰져 있으며, w3school.com의 오픈 소스를 활용해서 만들었다. ※ How to - Slide Down a Bar on Scroll: www.w3schools.com/howto/howto_js_navbar_slid..

티스토리 블로그 꾸미기: 한글 웹폰트로 제목 스타일 바꾸기 티스토리 블로그의 이미지와 무드를 가장 쉽게 바꿀 수 있는 방법 중에 하나는 '폰트'를 바꾸는 것이다. 요즘에는 한글 폰트도 웹폰트로 많이 공유가 되고 있어서 매번 보던 '나눔'서체와 다른 다양한 폰트로 자신의 티스토리 블로그 또는 웹사이트의 분위기를 확 바꿀 수 있다. 한글 웹폰트를 기준으로 쉽게 폰트 소스를 가져올 수 있는 두 개의 사이트를 소개하면서 바꾸는 방법을 알려드리겠다. 구글 폰트 눈누 티스토리 폰트 바꾸기 구글 폰트 (https://fonts.google.com/) 구글 폰트의 가장 큰 장점은 다양한 언의 폰트들을 서칭할 수 있다는 것이다. 세세한 라이센스는 직접 확인을 해야하지만 웹폰트는 거의 무료로 사용할 수 있고 어느 나라에서..

웹 퍼블리싱: 구글 머티리얼 아이콘 (Google Material Design Icons) 웹사이트를 만들다보면 필수적으로 또는 부수적으로 '아이콘'이 필요하다. 예를 들어 티스토리에도 있는 '메뉴'나 '검색' 아이콘 같은 경우다. 이런 아이콘들은 사용자들에게 익숙한 기본 형태가 있고 크게 변경할 수 있는 여지가 많지 않기 때문에 구글 머티리얼 아이콘 같이 이미 만들어진 아이콘들을 적용하는 것도 간편한 방법이다. 구글 머티리얼 아이콘의 가장 큰 장점 중에 하나는 '폰트'처럼 사용할 수 있기 때문에, 폰트의 컬러, 사이즈를 바꾸는 것처럼 아이콘의 컬러, 사이즈를 아주 쉽게 바꿀 수 있다. 또한 디스플레이 해상도 상관없이 깨끗한 이미지를 보여주기 때문에 매번 이미지를 만들어서 사용할 필요가 없다. 티스토리 ..