Front-End/CSS (4) 썸네일형 리스트형 [css] on/off 토글 스위치 간단히 만들기 1. HTML 2. CSS/* on/off토글 */label { display: block; position: relative; width: 100px; height: 45px; background: #d3d3d3; border-radius: 60px; transition: background 0.4s; } label::after { content: ""; position: absolute; left: 2.5px; top: 50%; width: 40px; height: 40px; border-radius: 100%; background-color: #fff; transform: translateY(-50%); .. [CSS] 글씨 강조 효과 형광펜 효과 background-color: yellow; 2. text-shadow: 0px 0px 20px yellow; 첫 번째 값: 그림자의 가로 위치를 지정(X offset) 두 번째 값: 그림자의 세로 위치를 지정(Y offset) 세 번째 값: 그림자의 흐림 정도를 지정(Blur) : 값이 클수록 더 흐릿한 그림자가 생성. 네 번째 값: 그림자의 색상 3. box-shadow: 0 0 10px yellow; - Type : Outset(box 외곽) / Inset(box 내부) 첫 번째 값: 그림자의 가로 위치를 지정(X offset) 두 번째 값: 그림자의 세로 위치를 지정(Y offset) 세 번째 값: 그림자의 흐림 정도를 지정(Blur) : 값이 클수록 더 흐릿한 그림자가 생성. 네 .. 티스토리 구독 이미지 넣기 티스토리에도 구독하는 기능이 있다는 걸 알고 계셨나요? 구독하면 피드에 구독자들이 올린 글이 게시됩니다! 그럼 티스토리 구독기능 활성화 방법과 구독이미지 설정하는 방법 알아봅시다 :) 목차 1. 구독 기능 활성화 2. 구독 이미지 생성 3. 블로그 주소, 블로그 ID, 원하는 이미지 주소 구하기 4. 코드 입력 5. 서식으로 등록 6. 글에서 사용하기 구독 기능 활성화 1. 티스토리 관리자 페이지로 들어갑니다. https://블로그이름.tistory.com/manage 2. 관리자 사이드 메뉴에서 꾸미기 >> 메뉴바 / 구독 설정 들어가기 3. 메뉴바 설정과 구독 버튼 설정을 '표시합니다.'로 바꿔주기 원하는 위치로 설정 하고 미리보기 기능으로 확인하기! 구독 이미지 생성 1. 원하는 구독 이미지를 생성.. 티스토리 TOP버튼 만들기 TOP 버튼 만들기 긴 글을 읽다 보면 다시 위로 올라가야하는 일이 종종 생기는데 스크롤을 왔다갔다 하는게 불편하여 TOP버튼을 만들어 보기로 했다. 많은 글들을 봤는데 저는 여기 블로그를 참고했습니다. "https://galam.tistory.com/ " Living-T blog 착한휴대폰 리빙통신입니다. 고객의 입장에서 최적의 조건으로 상담하고 판매 하겠습니다. galam.tistory.com 버튼 이미지 다운로드 두 개의 이미지를 사용해서 마우스 오버 시 이미지가 변경되도록 했다. 아래 제가 만든 이미지를 첨부했으니 자유롭게 사용하세요 :) 다른 이미지를 사용하고 싶으면 이미지 두 개 만들고 아래 자바스크립트에 Top1과 Top2를 수정해 주세요! 다운 받았으면 압축 풀어주고 두 파일을 등록해야 합.. 이전 1 다음
