요즘 초등학생들은 코딩 교육이 필수라는데
나는 아주아주 예전에 초등학교를 졸업한지라 내게 HTML의 마지막 기억은 <marquee>태그랄까ㅋ
(왜 차고 많은 것들 중 하필 이걸까ㅋ)
그래서 그동안 네이버 블로그보다 더 취향에 맞게 꾸밀 수 있는 티스토리를 하고 싶어도
스킨을 건들 줄 몰라 그동안 만들어놓기만 하고 방치 아닌 방치ㅠㅠ
... 하다가!
얼마 전 좋은 기회가 되어 HTML5와 CSS3, 그리고 아주아주아주 약간의 JavaScript를 배울 기회가 생겼다 :)
그래서 조금씩 차근차근 나만의 블로그를 새로 꾸며보면서
그새 다 까먹은 웹디자인 복습을 해보려 한다.
티스토리에는 웹디자인 배웠답시고 처음부터 스킨 만든다며 괜히 나댈 필요 없이
블로그 관리 > 스킨 변경에 들어가 보면 적용 버튼 하나로 끝나는 훌륭한 디자인들이 많다.
심지어 상단에 보이는 웬만한 스킨들은 이미 다 반응형이라
이 중 가장 내 스타일인 Odyssey로 적용하고 소소하게 하나씩 내 스타일로 바꿔 보기로 했다.
우선 첫날은 이 정도만 수정!
왼쪽은 스킨 변경한 직후, 오른쪽은 내가 약간 편집한 후의 캡처다.
(변경 직후엔 캡처하기 까먹어서 다 바꾼 후에 다시 스킨 새로 적용해보고 캡처ㅠㅠ 바보ㅠㅠ)
1. 상단 내비게이션 부분의 배치와 배경을 살짝 바꾸고,
2. 그 밑에 타이틀에 사진을 배치하고 길이(height) 더 길게.
3. 인기글 하나를 크게 배치했는데 요건 그냥 스킨 옵션에서 적용해준 거.
4. 하단 우측에 클릭하면 상단으로 바로 가는 top버튼 만들어 고정해주기.
5. 그 밖에 자잘한 거 등등(폰트 변경, 포인트 컬러 변경 등등)...
(아무래도 바꾸다 보니 이전에 과제했던 홈페이지 메인과 매~우 흡사하게 나와서
사람 취향이란 게 이렇게나 무섭구나 싶기도 하고ㅋ)
아무래도 내 취향이 많이 반영된 결과물이라 할 수 있는데
여기서 '내 취향'이라고 하면, 마우스가 향했을 때 무언가 반응이 있는 걸 좋아해서
어떻게 보면 그런 쓰잘데 없는 것 위주로 꾸민 것 같기도 하다.
그래도 뭐 어떠냐, 내 건데 ㅋㅋㅋ(클라이언트는 나다!!)
오늘 나름의 포인트는 css 한 줄로 왠지 있어 보이는 배경화면 고정과(왼쪽),
밑으로 조금 내려가면 갑자기 뿅! 생기면서 마우스를 가져다 대면 진해지고 커지는 top버튼(오른쪽)이랄까.
나처럼 티스토리 블로그 꾸미기를 시작하는 누군가에게 이제부터 쓸 글이 도움이 된다면 더없이 기쁘겠지만
그럴 일은 뭐 거의 없을 것 같고ㅋ
그냥 앞으로 복습 겸, 하나씩 수정할 때마다 한번 html, css와 함께 여기에 기록해봐야지!
'블로그 꾸미기' 카테고리의 다른 글
[티스토리 스킨 편집] 글 제목(타이틀) 가독성 높이기 (0) | 2020.12.20 |
---|---|
[티스토리 블로그] 파비콘 적용하기 (0) | 2020.11.22 |
[티스토리 스킨 편집] 스크롤 진행률 표시줄(scroll indicator) 만들기 (5) | 2020.10.30 |
블로그 다크 모드를 만들다. (13) | 2020.10.16 |
[티스토리 스킨 편집] 상단 메뉴 없애기(초⭐️간단!!) (1) | 2020.10.15 |
[티스토리 스킨 편집] 블로그 폰트 바꾸기(+무료 한글폰트 사이트) (5) | 2020.10.14 |
[티스토리 스킨 편집] top 버튼 꾸미기(CSS3 animation) (17) | 2020.10.12 |
[티스토리 스킨 편집] 스크롤시 배경 고정하기 (0) | 2020.09.19 |
댓글