티스토리 블로그가 이렇게 커스텀이 자유로운지 몰랐다 ⊙.☉
프론트엔드 개발자의 디자인 본능이 아주 드릉드릉 하구만 그래
일단, 기본 템플릿은 [ Odyssey ] 를 사용했습니다.
HTML 기본 틀을 그대로 사용할거고
CSS를 위주로 바꿔서 수정할 예정이에요.
1. 헤더 고정
기존 헤더는 스크롤을 내리면 보이지 않는데요.
저는 헤더가 항상 화면 상단에 박혀있으면 좋겠거든요.
그래야 언제든 메인으로 바로 가거나, 검색을 할 수 있을테니까
자, 그럼 스킨 편집 > 'html 편집' 으로 들어가줍시다.
그 다음은 CSS 탭을 클릭
여기서 검색(Ctrl + F)으로 '.header' 를 검색해주세요.
기존에 header 의 position 이 relative 인걸 fixed로 바꿔서 짱박아줄거에요.
주석처리한 부분이 기존 코드, 박스로 하이라이트 준 부분이 수정한 코드입니다.
적용 후 미리보기 창을 새로고침 해주시면 스크롤을 내렸을 때 헤더가 따라오는 걸 볼 수 있을거에요.
2. 폰트 추가
로고 폰트가 로고 문구와 어울렸으면 하니 폰트를 추가해 줄거에요.
폰트는 'Google Fonts' 에서 찾아서 추가해주면 되는데요.
(위 문구를 클릭하면 새창으로 이동합니다)
저는 블로그 타이틀인 '개발새발해' 느낌에 맞춰,
살짝 뚝딱이면서 가독성이 좋은 폰트를 골랐어요.
원하는 폰트를 추가해주면 내가 추가한 폰트들의 목록이 나오는데요
보통 사이드 목록이 열어져있지만,
안 보인다면 위에 (1) 버튼을 눌러주면 열려요.
다음 import 방식으로 변경해주시고 (2)
그 아래 style 태그에 감싸인 코드를 복사해주세요. (3)
다시 블로그 꾸미기 CSS 탭으로 넘어와서
최상단에 복사한 코드를 붙여주세요.
3. 타이틀 로고 텍스트
다음, 타이틀 로고의 클래스명은 '.link_logo' 입니다.
좀 전에 .header 에서 조금만 내리면 있기도 하구요. 아니면 link_logo로 검색해주세요.
좀 전에 추가한 폰트를 로고에 적용시켜줄거에요.
4. 헤더 배경
4-1. 불투명
게시글에서 스크롤을 내렸을 때 그 뒷편으로 글이 살짝 보이면 좋겠더라구요.
불투명도를 주는 방법입니다.
rgb( r g b / 29%)
rgba( r, g, b, 0.29)
4-2. 그라데이션
심플 이즈 베스트지만!
전반적인 콘텐츠, container 영역 배경을 흰색으로 갈거라
단색보다는 그라데이션을 주는 게 더 예쁘고 포인트를 줄 수 있겠더라구요
메인 색인 연보라와 살짝 푸른끼가 섞인 보라색을 그라데이션으로 쓸 거에요
불투명도도 그대로 유지했습니다.
그라데이션을 넣고 싶은데 뭐가 예쁜지 잘 모르겠다!
하시는 분들은 관련 사이트에서 도움을 받을 수 있어요.
그라데이션 참고 사이트
더 많겠지만 저는 주로 이 2곳에서 보곤 합니다 (☞ﾟヮﾟ)☞
선형 그라데이션(Linear Gradients) 말고도 원형 그라데이션(Radial Gradients)도 가능해요
선형 그라데이션은 (to right/left/bottom/.. , 색1, 색2, 색3, ...)
원형 그라데이션은 각 색의 범위 사이즈 (red 5%, green 15%, blue 60%)
와 같이 작성해요.
더 자세한 내용은 W3S 를 참고해주세요.
4-3. 그림자
헤더 아래로 자연스럽게 그림자가 지는 효과를 주면
헤더와 본문과 구분이 생기고 좀 더 입체감을 줄 수 있어요.
아까 그라데이션을 준 .header 클래스 안에
'box-shadow' 를 추가해줍니다.
(x축, y축, blur 양, blur 크기, 색상) 순입니다.
4-4. 투명도 블러효과
(22.08.31 추가)
위에서 아예 투명하게 해서 글이 다 보이도록 했는데,
그렇게 했더니 로고 타이틀과 겹쳐서 불편하더라구요..!
그래서 불투명한 유리느낌이 나도록 바꿨습니다
'Glassmorphism ui'를 검색하면 무슨 느낌인지 알거에요
뒤가 비치지만 블러로 흐릿하게 보이는 스타일입니다.
간단하게 'backdrop-filter' 효과를 주면되는데요.
그 중에 blur 효과를 5px 정도 주겠습니다.
'.header' 클래스에 'backdrop-filter: blur(5px)' 을 추가해주세요.
짠,
뒷 쪽이 비치지만 흐릿해서 헤더가 더 선명해보이죠.
살짝 본문과의 거리감이 느껴지기도 하구요. ( •̀ .̫ •́ )✧
5. 검색칸
헤더 우측에 있는 검색칸의 클래스명은 '.search' 의 input 입니다.
색상 컨셉에 맞게 검색칸의 하단 선의 색상을 바꿔줄거에요.
그리고 포커스가 주어졌을 때도 변화를 줄건데요.
제 배경의 색상이 두 가지잖아요? 그거랑 통일 시킬겁니다.
단, 투명도는 주지 않을거에요.
input 폼에 커서가 올라가 포커스 되었을 때,
푸른끼가 도는 보라색으로 바뀌게 했어요.
여기서 끝내려고 했는데..!
아쉬운게 하나 있더라구요.
6. 로고 타이틀 hover
지금은 단색인 로고 타이틀에 마우스를 올렸을 때(hover)
포인트를 주도록 할거에요.
hover 의 경우 미리보기 창에서 확인 할 수 없어요.
이때 하나의 팁이 있는데요 💡
본인의 블로그를 새창으로 하나 띄워주고
F12 를 눌러 개발자 도구를 켜주세요.
이 팁은 스킨 편집에서 적용시키고 미리보기 새로고침하고..
의 불편함도 해결할 수 있습니다!
여기서 미리 적용시켜보고
괜찮으면 그때 쓴 css를 그대로 복붙해서 쓸 수 있어요 (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
(제가 너무 늦게 알려드렸나요..?)
네모에 화살표가 있는 저 빨간 박스를 누르면 요소를 선택해서 태그 속성을 볼 수 있습니다.
이렇게 말이죠.
요소 선택이 체크되어 있는 상태에서 저 로고 타이틀을 눌렀을 때,
해당 태그의 속성과 css가 보이죠?
여기서 시도한 것들은 실제 저장되지 않으니
마음껏 여러 시도를 해볼 수 있어요.
저장되지 않으니! 버튼을 눌러 창이 이동되면 다 날아가게 됩니다!
여기서 해당 태그의 css 속성 창을 보면
Filter 옆에 ':hov' 를 눌러주세요.
해당 태그의 상태를 고정해서 볼 수 있어요
이미 꾸미고 난 후에 포스팅하는거라 효과가 보이는데요
(마우스를 올리게 되면 글자 주변으로 하얀 빛이 퍼지는 듯한 효과를 준 모습이에요.)
hover 클래스가 없는 상황이라면, 만들어줘야겠죠.
(1) 을 누르면 해당 태그의 class 명으로 만들어지고,
(2) 를 누르면 그냥 바로 스타일이 적용돼요.
(1)은 같은 class를 가지는 태그가 있을 경우 동시 적용이 될거고,
(2)는 인라인 스타일 처럼 해당 태그에만 적용이 됩니다.
hover 가 적용된 CSS를 작성해야하니,
(1) 과 같이 만들어서 class 뒤에 ':hover'를 적어줄게요.
그리고 그 뒤에 원하는 css를 적으면 되는데요.
저는 'text-shadow'를 이용해서 텍스트 주변으로 빛이 나는 효과를 줬어요.
반시계 방향으로 좌, 하, 우, 상 입니다.
x축, y축, blur 양, 색상 순이에요.
그림자 색상도 여러개로 해서 네온 같은 효과를 줄 수도 있는데요.
이건 W3S에서 확인할 수 있답니다
✨ 그래서 완성된 헤더! ✨
자, 이렇게 해서 헤더를 꾸며봤는데요.
각자의 스타일이 있으니 그대로 따라해보면서 익히셔도 좋고,
필요한 부분만 참고하셔도 좋아요~
도움이 되셨다면 댓글로 여러분의 블로그도 구경시켜주세요 ( •̀ ω •́ )✧
그 외에 다른 팁이나 꾸미기 방식이 있다면 댓글 남겨주세요 :)
감사합니다
'TIL > 블로그' 카테고리의 다른 글
| [웹][티스토리 블로그 꾸미기] 상단 헤더 꾸미기2 (2) | 2025.03.15 |
|---|---|
| [웹][티스토리 블로그 꾸미기] 메신저 말풍선처럼 댓글 꾸미기 (5) | 2022.09.18 |