24.9 C
Seoul
토요일, 8월 9, 2025

spot_img

css 텍스트 링크 버튼 소스 및 aside 태그 박스 소스 5종 칼라

css 텍스트 링크 버튼 하고 aside 태그 박스 필요하신 분들 가져다 사용하세요. 이 글에서 공유하는 소스들은 제가 직접 작성한 것이 아닙니다. 모질라, 구글 등에서 사용하는 소스들인데요. 제 워드프레스 블로그에 사용 중인 테마에 사용하기 위에 조금 뜯어 왔습니다.

방문자 입장에서 버튼(<button>)과 링크(<a>)는 차이가 없습니다. 차이를 알 필요도 없죠. 누르면 다른 웹페이지로 이동하거나, 양식을 제출하는 기능을 수행하는 것에는 변함이 없으니까요.

css 텍스트 링크 버튼 소스  및 aside 태그 박스 소스 5종 칼라
css 텍스트 링크 버튼 소스 및 aside 태그 박스 소스 5종 칼라

css 텍스트 링크 버튼 소스  및 aside 태그 박스 소스 5종 칼라


 

html 소스 저작권

html 태그 소스도 저작권 보호 대상입니다. 독창성을 인정 받는 것이 거의 불가능에 가까운 일이지만요. 이 불가능한 일이 벌어졌었습니다. 클래스 이름의 독창성이 인정되어서 말입니다.

마크업 언어가 저작권 보호 대상이면 한글도 영어도 저작권 보호 대상이어야 합니다. 한글, 영문으로 작성한 글, 시 등의 창작물이 저작권 보호 대상인 것이지 언어 자체는 저작권 보호 대상이 아닙니다. 요소의 크래스 명에 특정 기업, 브랜드 등을 사용하지 말란 얘기이었습니다.

css 텍스트 링크 버튼

달리 표현할 단어를 찾지 못해 버튼이라고 칭한 것입니다. 실제로는 버튼이 아닙니다. 버튼처럼 꾸며 놓은 텍스트 링크입니다

구글 검색 센터에 있는 ‘시작하기’는 버튼이 아니고 링크입니다. 이 글에서 공유하고자 하는 것이 이런 형태의 링크 버튼입니다.

양이 같아 보이겠지만 전혀 다른 css 버튼입니다. 선택자 확인해 보면 독창적인 클래스 이름이 사용된 것을 알 수 있을 것입니다.

워드프레스 테마 또는 티스토리 스킨에 맞게 변경하여 사용하면 됩니다. 물론 색상 변경하는 것이 싫거나, 어렵다면 그냥 사용해도 됩니다.워드프레스는 재사용 블럭으로 등록해 놓고 사용하면 될 것이고요.

티스토리 블로그는 서식으로 저장해 놓고 글 쓰기 에디터에서 삽입하면 될 것입니다.

HTML

<div class="text-link-button">
<a class="button-block button-text-blue" href="https://lovedweb.com/491" target="_blank" rel="noopener noreferrer">사진으로 꽃이름 찾기</a>
</div>

CSS

.text-link-button {text-align: center; line-height: 1; clear: both;}
.text-link-block {justify-content: center;}
.text-link-button a.button-text-blue, .text-link-button a.button-text-blue:visited {background-color: #0366d6; color: #ffffff; padding: 15px 20px; border-radius: 5px; margin-right: 20px; display: inline-flex; align-items: center; justify-content: center; text-align: center; &:hover { background: #1d49aa; color: #fff;} &:focus {outline: none; box-shadow: 0 0 0 4px #cbd6ee;}}
.text-link-button > .gb-button {flex: 1;}
.button-block {text-decoration: none;}

파란색 css 텍스트 링크 버튼 소스입니다. 블로그에 적용하고 싶다면 소스 복사하여 가져가시면 됩니다.

aside 태그 박스

많은 사이트들이 aside 태그를 이용하여 페이지 내에서 부가 설명, 참조, 안내, 경고 등을 합니다.

구글 검색 센터의 검색 엔진 최적화 기본 가이드 문서도 aside 태그를 적극 사용합니다. 모질라 웹 기술 가이드 문서에도 적재적소에 사용합니다.

독창적으로 만든 5종의 작품입니다. 실제로 웹 페이지에 사용하면 아래와 같이 표시됩니다.

배경, 텍스트, 링크 등의 색상은 원하는 색상으로 변경하여 사용하면 됩니다.

다른 요소도 마찬가지이지만, span에 클래스 이름을 지정해 놓았으니 필요하다면 느낌표 등의 아이콘을 표시해도 될 것입니다.

aside 태그 박스 안에 css 텍스트 링크 버튼을 삽입하여도 됩니다. 그리고 <datalist> 태그를 이용하면 접기 또는 더 보기 형태로 구현해도 됩니다.

HTML

<aside class="aside note-block">
<div class="aside-box note-box">
<span class="aside-title note-title">참고</span> 꽃 이름을 알고 싶다면 <a href="https://lovedweb.com/491" target="_blank" rel="noreferrer noopener">사진으로 꽃이름 찾기</a> 참조
</div>
</aside>
<p></p>
<aside class="aside info-block">
<div class="aside-box info-box">
<span class="aside-title info-title">정보</span> 정보입니다 <a href="https://lovedweb.com/" target="_blank" rel="noreferrer noopener">link</a>를 확인하시기 바랍니다.
</div>
</aside>
<p></p>
<aside class="aside important-block">
<div class="aside-box important-box">
<span class="aside-title important-title">중요</span> 핵심 내용입니다. 피부에 좋은 <a href="https://lovedweb.com/493" target="_blank" rel="noreferrer noopener">꽃 이름 알기</a>
</div>
</aside>
<p></p>
<aside class="aside caution-block">
<div class="aside-box caution-box">
<span class="aside-title caution-title">주의</span> 주의 해야하는 내용입니다. <a href="https://lovedweb.com/" target="_blank" rel="noreferrer noopener">link</a>를 확인하시기 바랍니다.
</div>
</aside>
<p></p>
<aside class="aside warning-block">
<div class="aside-box warning-box">
<span class="aside-title warning-title">경고</span> 모르면 하시마세요. <a href="https://lovedweb.com/" target="_blank" rel="noreferrer noopener">link</a>를 확인하시기 바랍니다.
</div>
</aside>

CSS

.aside {--gutter: 0.5rem; padding: clamp(1.375rem, 1.2rem + 0.89vw, 2rem); border-radius: 10px;}
.aside-title {font-size: 1.25rem; font-weight: 700;}
.aside-box a {font-size: 1.25rem; font-weight: 700;}
.note-block{color: #174ea6; background: #deeafd;}
.info-block {color: #01579b; background: #e1f5fe;}
.important-block, .important-box a {color: #00796b; background: #e0f2f1;}
.caution-block, .caution-box a {color: #c34900; background: #fff5e3;}
.warning-block, .warning-box a {color: #a50e0e; background: #fce8e8;}
.archives-block {background: #dedede;}
details {border: 1px solid #aaa; border-radius: 4px; padding: 0.5em 0.5em 0;}
summary {font-weight: bold; margin: -0.5em -0.5em 0; padding: 0.5em;}
details[open] {padding: 0.5em;}
details[open] summary {margin-bottom: 0.5em;}
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

Related Articles

Stay Connected

18,393FansLike
128,393FollowersFollow
81,934SubscribersSubscribe

Latest Articles