FrontEnd/Tistory 3

📑 TISTORY_블로그 꾸미기_Day3_카테고리 게시글 꾸미기

오늘은 지난 시간에 이어서 카테고리 게시글 목록을 꾸며보자. 기본적으로는 일반 게시글처럼 텍스트 및 썸네일 이미지가 아래와 같은 형태로 이루어진다. 위와 같은 구조를 flex를 사용하여 좀 더 아기자기하고 귀여운 카드 뉴스 형태로 만들고자 한다. 그를 위해서 기본적으로 존재하는 html태그에섯 css만 변경하지 않고, 구조 자체를 내가 원하는 대로 수정하고자 한다. 구상하는 초안은 아래와 같다. 1. 구조 변경 위의 구조를 구성하기 위한 html 코드를 아래와 같이 수정하여 적용하고 css를 입히면서 하나하나 모양을 만들어보자. 클래스명 또한 기존의 틀을 벗어나서 사용하기 위해 새로 작성한 것도 있기 때문에 그냥 새롭게 작성하는 것이 덜 헷갈릴 것이다. 아래의 소스는 블로그 설정에서 꾸미기 > 스킨 편집..

📑 TISTORY_블로그 꾸미기_Day2_상단 헤더 꾸미기

. . . 미루고 미뤄왔던 티스토리 블로그 꾸미기 2일차이다. 사실 계속 수정 및 개발중이고, 절반 이상은 끝났지만 까먹기 전에 정리하자! 처음부터 다 개발할 생각에 막막했는데 생각보다 커스텀이 편리하도록 자동화 및 변수화가 잘 되어 있다. 기본 스킨 세팅은 1편에서 했기 때문에 참고해주시기 바랍니다~ 1.상단 헤더 고정시키기 기본적으로 헤더는 상단에서만 보이고 스크롤 하면 사라지도록 세팅이 되어 있었다. 아직 헤더에 이것저것 메뉴를 넣지는 않았지만 추후에 추가할 것을 대비해서 스크롤로 화면을 내려도 헤더가 보이도록 할것이다. 그렇다면 바로 스킨 편집 > html 편집 > css탭 으로 가보도록 하자! ctrl + F 키로 '.header' 클래스를 탐색해서 아래와 같이 position을 수정하자. 주석..

📑 TISTORY_블로그 꾸미기_Day1_홈 화면 구성하기

. . . 미루고 미루다가 드디어 기술블로그로 사용하던 티스토리를 개발자답게 꾸며보기로 했다. 아직 미완성이긴 하지만,, ㅎ 전부 완성한 후에 포스팅을 하게 되면 까먹을 것 같아서.. 미리 중간 점검 겸 간단히 포스팅을 남기면서 정리하고자 한다. Start! 1. 스킨 설정 꾸미기 전에 제로부터 개발할 일은 아니기 때문에,,, 티스토리에서 제공하는 기본 스킨을 선택해보자. 블로그 설정에 들어가서 꾸미기 > 스킨 변경을 눌러보면 이렇게 10개 정도의 스킨을 확인할 수 있다. 구글에 검색해보니 많은 사람들이 본인이 직접 커스텀한 스킨을 올려두었는데, 해당 스킨을 다운받아서 사용해도 되지만 본인 만의 개성을 뽐내고 싶다면야..^^ 나는 이번이 처음이기도 하고,, 프론트엔드는 잘 하지 못해서 공부할 겸 가장 기..