음악이 재생중일때만 곡 정보(제목, 프로그레스바)가 표시되는 뮤직 플레이어 다크모드에서 이뻐보이도록 노을 색상으로 배경을 넣어 주었다.음악 바뀔 때마다 하늘 색깔이 바뀌게 설정해 보니 이쁘다! 빌딩이랑 달은 무료 svg 사이트에서 가져와서 넣어주었습니다. CSS 로 크기와 위치 조절해서 원하는 곳에 추가하면 된다. 참고로 블로그에서 구글 애드센스나 광고로 수익 창출하시는 분들은 배경음악은 자제해 주세요상업적 목적으로 브금 쓰시면 노노노 [html 코드] ..
1. 사이드 메뉴 hover 효과 커스텀 [기존 메뉴] 기본 메뉴도 깔끔하고 이쁘지만 나는 다크모드를 위해서 눈에 띄는 효과를 주고 싶었다.마우스 올리면 글씨색이 변하면서 글씨 아래에 그라데이션바가 생기도록 커스텀 했다. hELLO 스킨 기준/* 사이드바 호버 그라데이션바 커스텀(24.11.11) */#sidebar #category .tt_category ul li::after { width: 0%; height: 2px; position: absolute; transition: width 0.4s; background-color: #80D0C7; background-image: linear-gradient(90deg, #80D0C7 0%, #7e92eb 100%); ..
⚡1. Main 영역 원래 티스토리 기존 스킨 현재 커스텀 상황Dark 모드 Light 모드✅ 오늘의 명언(랜덤명언) 삽입명언은 퍼왔으나 HTML/CSS는 직접 커스텀함✅ 상단에 Navigation Bar 삽입 ⚡2. Thumbnail Header 영역hELLO 스킨 기본 버전 변경후✅ 썸네일 이미지 추가, 카테고리명 hover ✅ Navigation Bar 추가모바일에서 접속하면 Side Bar가 없어져서 다른 카테고리에 들어가기 어려움상단에 메인헤더, 썸네일 헤더에 Navigation Bar 추가 메인이랑 마찬가지로 헤더에 다섯가지 탭 달아 주고 hover 효과 주었음. ⚡3. Side Bar 영역✅ 배경 음악 뮤직플레이어 ✅ 프로필 사진 그라데이션 테두리✅ 메뉴 hover 효과- 마우..
✨커스텀 전 기본 헤더 티스토리에서 hELLO 스킨을 적용하고 게시글을 발행 한 뒤 헤더 부분의 모습이다. 썸네일로 설정한 이미지가 blur 처리되면서 헤더 배경으로 오고, 제목이 가운데로 온다. 그리고 아래는 글 발행시간과 해당 글의 카테고리가 한 줄로 나오는데, 카테고리명에는 태그에 href 속성이 걸려 있어서 클릭하면 해당 카테고리로 넘어 간다. 🧞♀️헤더 커스텀 완성작 이번 포스팅에서 커스텀할 내용은 크게 두 가지이다.헤더 좌측 상단에 아이콘 추가카테고리 이름에 마우스 올리면 색상이 변하는 hover 효과 주기물론 위 캡처처럼 발행일, 카테고리명의 위치를 카테고리명이 먼저 나오게 바꾸어 줄 것이다.카테고리에 hover 효과를 주면서 배경에 박스가 생기게 되어 앞으로 나오는 것이 더 낫기 ..
이번 컨텐츠에서는 티스토리 블로그 마우스 커서 변경하는 법 & 마우스 이펙트 추가하는 법 소개 해 드리려고 합니다.블로그 특성상 모바일에서는 안 되고 PC버전 블로그에서만 보여지는 기능입니다~!svg 아이콘을 받아서 css 추가 해 주는 법도 있지만 오늘은 정말 간단하게 소스만 복사해오면 바로 쓸 수 있는 방법 알려드리겠습니다. 1. 마우스 커서 모양 바꾸기 아래 링크에 접속해서 마음에 드는 커서를 선택한다. Free Cursor Downloads - Cursors-4U.comDate: 16 Jan 2024, 22:00 By Tor With 11 Comments All commenting and comments have been removed from the cursor pages. Too many n..
✨제목 &텍스트 디자인✨ 📌 1. 가로 선이 두 개 있는 제목 디자인2개의 선으로 간단하게 제목을 꾸며봐요. position: absolute 대신 flex를 이용해서 코드를 구현해 볼게요. ☑️ HTML 코드멋진 웹디자인을 위한 아이디어☑️ CSS 코드.heading { display: flex; justify-content: center; align-items: center; font-size: 36px;}.heading::before,.heading::after { content: ''; width: 70px; height: 3px; background-color: #ffb28e;}.heading::before { margin-right: ..
✨사진에 음영 추가하기✨ 안녕하세요. 오늘은 사진에 세 가지 방법으로 사진을 꾸미는 법을 배워봅시다. 단색 음영, 줄무늬 음영, 점 모양 음영 추가하는 법 알려드릴게요. 포토샵이나 일러스트를 사용하지 않아도 HTML과 CSS만으로 작업 할거니까 Vscode에서 따라해주세요. 📌 STEP 1. 단색 음영 추가하기 ☑️ HTML ☑️ CSS img { box-shadow: offset-x offset-y blur-radius color; } img { box-shadow: 20px 20px 0 #efcfd6; } 📌 STEP 2. 줄무늬 음영 배치하기 가상요소 선택자 ::before을 활용하면 자연스럽고 재미있는 느낌을 주는 대각선 줄무늬를 디자인할 수 있어요. ☑️ HTML 이번에는 이미지 태그를 div ..
