-
티스토리 블로그 포스팅 버튼 만들기 html CSS 코드개발 공부 2025. 2. 4. 12:05반응형
내가 쓰려고 만든 티스토리 블로그 포스팅 버튼
html CSS 코드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; line-height: 1.8; color: #333; } h2 { color: #0073e6; margin-top: 30px; } p { font-size: 16px; } .highlight { background-color: #ffffcc; padding: 2px 5px; font-weight: bold; } .button-container { text-align: center; margin: 30px 0; } .button { display: inline-block; padding: 20px 40px; background-color: #FFD700; color: #000; font-size: 30px; font-weight: bold; text-decoration: none; border-radius: 15px; border: 2px solid #000; } .button:hover { background-color: #FFC107; } </style> </head>노란 바탕, 검정 글씨
글씨 크기 30px 버튼 스타일
<style> 부터 css 적용
버튼은 .button 있는 부분 보면 됨.
배경 색 바꾸고싶다면 -> background-color: 변경하고 싶은 색깔;
글자 색 바꾸고 싶으면 -> color: 바꿀 글자색;
글자 크기 변경 원한다면 -> font-size: 원하는 글자크기px;
<div class="button-container"> <a href="#" class="button">버튼 바로가기</a> </div>위 css 적용 후 이렇게 버튼 생성하면, css에 맞는 디자인 버튼 생성됨
href -> 여기에 버튼 클릭시 이동할 페이지 url 넣기
버튼 바로가기 -> 여기에 버튼 내 글씨 작성하기
끝
반응형'개발 공부' 카테고리의 다른 글
Visual Studio 2019 git 메뉴 안 보일 때 추가 방법 (0) 2025.02.19 윈도우 방화벽 포트 오픈 하는 방법 초간단 (0) 2023.10.06 google oauth에러 unable to verify the first certificate 해결 방법 (0) 2023.10.06 google api OAuth 클라이언트 ID 생성 (0) 2023.05.10 Google Api 사용하기 - 프로젝트 생성 (0) 2023.05.10