css 텍스트 링크 버튼 하고 aside 태그 박스 필요하신 분들 가져다 사용하세요. 이 글에서 공유하는 소스들은 제가 직접 작성한 것이 아닙니다. 모질라, 구글 등에서 사용하는 소스들인데요. 제 워드프레스 블로그에 사용 중인 제너레이트프레스 테마에 사용하기 위에 조금 뜯어 왔습니다.
방문자 입장에서 버튼(<button>)과 링크(<a>)는 차이가 없습니다. 차이를 알 필요도 없죠. 누르면 다른 웹페이지로 이동하거나, 양식을 제출하는 기능을 수행하는 것에는 변함이 없으니까요.
게시물 목차
html 소스 저작권
html 태그 소스도 저작권 보호 대상입니다. 독창성을 인정 받는 것이 거의 불가능에 가까운 일이지만요. 이 불가능한 일이 벌어졌었습니다. 클래스 이름의 독창성이 인정되어서 말입니다.
마크업 언어가 저작권 보호 대상이면 한글도 영어도 저작권 보호 대상이어야 합니다. 한글, 영문으로 작성한 글, 시 등의 창작물이 저작권 보호 대상인 것이지 언어 자체는 저작권 보호 대상이 아닙니다. 요소의 크래스 명에 특정 기업, 브랜드 등을 사용하지 말란 얘기이었습니다.
css 텍스트 링크 버튼
달리 표현할 단어를 찾지 못해 버튼이라고 칭한 것입니다. 실제로는 버튼이 아닙니다. 버튼처럼 꾸며 놓은 텍스트 링크입니다.
구글 검색 센터에 있는 ‘시작하기’는 버튼이 아니고 링크입니다. 이 글에서 공유하고자 하는 것이 바로 저런 형태의 링크 버튼입니다.
모양이 같아 보이겠지만 전혀 다른 css 버튼입니다. 선택자 확인해 보면 독창적인 클래스 이름이 사용된 것을 알 수 있을 것입니다.
위와 같이 css 텍스트 링크 버튼 색상은 사용하는 워드프레스 테마 또는 티스토리 스킨에 맞게 변경하여 사용하면 됩니다. 물론 색상 변경하는 것이 싫거나, 어렵다면 그냥 사용해도 됩니다.
워드프레스는 재사용 블럭으로 등록해 놓고 사용하면 될 것이고요.
티스토리 블로그는 서식으로 저장해 놓고 글 쓰기 에디터에서 삽입하면 될 것입니다.
css 텍스트 링크 버튼 소스
See the Pen css text link button by lovedweb (@lovedweb) on CodePen.
파란색 css 텍스트 링크 버튼 소스입니다. 블로그에 적용하고 싶다면 소스 복사하여 가져가시면 됩니다.
aside 태그 박스
많은 사이트들이 aside 태그를 이용하여 페이지 내에서 부가 설명, 참조, 안내, 경고 등을 합니다.
구글 검색 센터의 검색 엔진 최적화 기본 가이드 문서도 aside 태그를 적극 사용합니다. 모질라 웹 기술 가이드 문서에도 적재적소에 사용합니다.
위의 이미지에 표시해 놓은 것이 바로 aside 태그 박스입니다. 실제로 구현하면 아래와 같이 다양한 형태로 표시할 수 있습니다.
독창적으로 만든 5종의 작품입니다. 실제로 웹 페이지에 사용하면 아래와 같이 표시됩니다.
배경, 텍스트, 링크 등의 색상은 원하는 색상으로 변경하여 사용하면 됩니다.
다른 요소도 마찬가지이지만, span에 클래스 이름을 지정해 놓았으니 필요하다면 느낌표 등의 아이콘을 표시해도 될 것입니다.
aside 태그 박스 안에 css 텍스트 링크 버튼을 삽입하여도 됩니다. 그리고 <datalist> 태그를 이용하면 접기 또는 더 보기 형태로 구현해도 됩니다.
aside 태그 박스 소스 5종 칼라
See the Pen aside color box by lovedweb (@lovedweb) on CodePen.
5종의 aside 태그 박스 소스입니다. 살펴보고 필요한 것을 복사하여 운영하는 워드프레스 테마 또는 티스토리 스킨 파일에 적용하세요.
html과 css만 사용한 소스이기 때문에 큰 문제는 없을 것입니다. 복사 붙여 넣기만 잘하면 문제 없이 작동할 것입니다.
혹시라도 만약에 본문에 첨부한 아이프레임 예제 소스들이 보이지 않는다면 위에 링크 페이지에 방문하여 확인하면 됩니다.