개인적으로 링크 버튼을 만드는 두 가지의 방법에 대해 언급해보려고 합니다. 정답은 없지만 어떤 작업을 할 때 이 방법이 좋다라는 견해는 있으니 한번 참고해 보시기 바랍니다. 예시 먼저 아래의 링크 버튼을 살펴보시겠습니다. See the Pen a링크 버튼 만들기 두 가지 컨셉 by rgy0409 (@rgy0409) on CodePen. 버튼1과 버튼2 두 가지가 완성되어 있습니다. CSS를 살펴보시면 버튼1의 클래스명인 ex1에 적용시킨 스타일과 버튼2의 클래스명인 ex2의 스타일 옵션들이 다르다는것을 알 수 있죠. ex1은 비교적 간단합니다. ex2는 ex1에 비하면 다소 복잡합니다. 자유롭게 만들고자 할 때 이 방법은 현재 티스토리같은 규격과 형식에 얽메이지 않은 웹페이지에서 적용해볼 수 있는 방법입..
HTML에서 이미지를 삽입하고자 할 때 사용하는 태그(요소)는 라는 태그입니다. 그리고 그 태그 안에 src 옵션을 넣어서 이미지 경로를 지정해 줍니다. 이론 교육은 말로는 설명이 어려우니 직접 실습을 통해서 빠르게 알아보도록 합니다. 절대 쉽습니다. 먼저 이미지를 준비해 주세요. 너무 큰 이미지 말고 적당히 큰 사이즈로 준비해 줍니다. 가로 1000px 내외면 좋을 것 같습니다. 태그 사용 저는 고양이 이미지를 하나 준비했습니다. 이미지는 여러분들께서 작업중인 HTML / CSS 파일 폴더안에 모아두시는게 좋습니다. image 라는 폴더를 따로 생성해 해당 폴더에는 말그대로 이미지만 모아 관리하는것이 유지보수 차원에서도 훨씬 용이합니다. 이제 아래의 태그를 입력합니다. HTML 태그는 이렇게 구성됩니다..
지난 시간에는 a링크의 텍스트에 밑 줄이 들어가는것을 없애는 방법 및 더 자세한 옵션 활용 방법을 알아봤습니다. 이번에는 a링크의 기본 색상을 변경하는 방법에 대해 알아볼 것입니다. 이 부분도 지난 시간에 살짝 언급을 했었습니다. 링크 텍스트의 기본 색상은 파란색, 한 번 클릭한, 그러니까 최소 한 번이라도 방문한 링크 페이지는 보라색으로 바뀐다는 것을 말입니다. 여러분들께서 직접 구글에서 어떤것을 검색하시고 그 결과에 대한 링크들을 유심히 살펴보세요. 아직 방문하지 않은 검색글은 파란색 텍스트가, 방문한 사이트는 보라색 텍스트 링크로 바뀌어 있을테니까요. 본문에서는 이런 상황별 색상 변경 방법에 대해 안내를 해드릴 것입니다. HTML에서 그리고 CSS에서 사용하는 방법 두 가지를 모두 알려드리겠습니다...
HTML 세계에서 사용하는 수 많은 태그 중 요소라는것이 있습니다. 많이들 보셨을지도 모르겠습니다. 주로 링크를 넣을 때 사용하죠. a는 Anchor의 약자로 닻이라는 뜻입니다. 맞습니다. 배에 있는 그 닻을 의미합니다. 배가 정박하거나 출항할 때 바닷 속 바닥에 내린 거대한 쇳덩이가 바로 닻입니다. 닻을 올려라! 하면 출항을 의미하죠. 즉 이 앵커라는 개념은 뭔가를 단단히 고정하며 든든히 그 자리에 위치하는 우직함의 대명사로도 쓰입니다. 아무래도 HTML 세계에서는 하이퍼링크 문서답게 클릭 시 다른 웹사이트로의 이동에 있어서 마치 닻을 올리고 출항하는 기분을 주고 싶었던 모양입니다. 그래서 a 태그를 사용하게 된 것이 아닐까라는 생각을 해봅니다. a태그의 기본 형태는 다음과 같습니다. 텍스트 입력 a태..
스마트폰으로 인터넷 정보를 스크랩하는데 스크랩된 이미지 아래 부분에 웹사이트라는 문장이 표시가 되는것을 목격했습니다. 분명 캡쳐할때는 이런 글씨가 없었는데 싶었고 다시 한 번 해당 웹문서를 캡처 시도하며 체크했는데 역시 없습니다. 안드로이드에 추가된 기능인지는 모르겠으나 현재 사용중인 갤럭시노트20 울트라는 웹문서 캡쳐 시 URL 정보가 이미지에 남습니다. 그래서 캡쳐된 이미지를 갤러리에서 확인 시 북마크처럼 편리하게 해당 웹페이지를 방문하는 기능이 있습니다. 여기에서 힌트를 얻었습니다. 티스토리 본문에도 링크를 걸어서 마우스 오버 시 "바로가기" 표시가 되도록 만들고 싶었습니다. 왠지 가능해 보였습니다. 태그만 제어하면 될 것 같았습니다. 바로 시도해보았고 마침내 구현에 성공했습니다. 위의 이미지에 마..
안녕하세요. 친절한효자손입니다. 본문 중간에 삽입하는 수동 링크 스타일을 새로 만들어봤습니다. 아마 지난번 유튜브 실시간 스트리밍을 보신 분이시라면 이걸 만드는 과정을 라이브로 보셨을 거에요. 거의 한시간만에 완성한 애드온이지요. 스타일은 코드펜을 참고해서 만들었습니다. 미리보기 먼저 스타일을 미리 만나보시겠습니다. 아래의 링크에 마우스를 올려보시기 바랍니다. 그리고 변화되는 애니메이션을 직접 목격해 보세요. 짧은 텍스트의 링크글 이것은 어느정도 텍스트의 양이 제법 되는 본문 중간 링크글 와우! 이건 정말이지 말로 표현할 수 없을 정도로 텍스트의 양이 대단히 길기 때문에 두 줄로 내려가버리는 상당히 많은 텍스트의 양이 담긴 본문 중간 링크글 이런 느낌의 본문 중간 수동 링크글 스타일입니다. 보시면 아시겠..
티스토리의 새로운 글쓰기 에디터에서 링크글을 삽입 후 엔터를 입력하면 바로 아래에 해당 링크의 미리보기 이미지가 크게 적용됩니다. 근데 너무 공간을 많이 차지하는 것 같습니다. 제 기준에서는 너무 커요. 그렇기에 크기를 절반으로 줄였습니다. 가로 크기는 본문의 가로폭을 모두 100% 사용하는건 동일합니다. 세로 크기가 절반으로 줄어듭니다. 썸네일 이미지도 동시에 4분의 1 크기로 축소되었습니다. 위의 이미지가 바로 기존 티스토리의 링크글 미리보기 스타일입니다. 저만 크다고 생각한건가요? 아무튼 이 커다란 사이즈를 절반으로 줄여버렸습니다. 위의 이미지가 바로 수정된 링크글의 모습입니다. 세로 크기를 절반으로 줄였기 때문에 자연스럽게 썸네일 이미지는 4분의 1로 줄어들었습니다. 비율은 유지해야 하니까요. 그..
본문 중간에 삽입하는 링크용 친효애드온 스타일 마크7 입니다. 그냥 오늘 갑자기 이렇게 한번 만들어보고 싶다는 생각이 강하게 느껴져서 바로 작업했습니다. 사선으로 넣어보면 어떨까 싶었고 그 결과는 이렇게 완성되었습니다. 미리보기 짧은 링크글 텍스트가 제법 중간 사이즈 정도 되는 링크글 이것은 짧은 글의 몇 배 이상이 되는, 그러니까 텍스트가 꽤 긴 사이즈를 자랑하는, 본문 가로 사이즈를 넘어서는 그런 링크글 이렇게 됩니다. 별 다른 특징은 없고 애니메이션은 그냥 마우스를 올렸을 때 텍스트 색상이 바뀌는게 전부입니다. 요즘에는 그냥 밋밋한 스타일이 좋더라구요. 튜닝의 최종 종착지는 순정이라는 말이 정말 진리인 것 같습니다. 아무리 이것 저것 꾸며도 역시 심플한게 최고인 것 같아요. 심플 이즈 베스트 입니다..
어떤 분께서 혹시 티스토리에도 전화번호 링크가 가능한지를 여쭤보셨습니다. 물론 가능합니다. a 링크 태그를 이용해서 진행 할 수 있습니다. 또한 img 태그를 추가하여 이미지배너 타입으로 전화번호 링크도 생성 가능합니다. 그러면 한번 어떻게 하는지 살펴봅시다. 일반 텍스트에 전화번호 링크걸기 먼저 아래의 태그를 살펴봐주세요. 전화걸기 아주 간단한 태그죠? 그렇습니다. 보통 a href 태그 다음에는 url 주소를 넣는게 일반적입니다. 여기에서 URL 주소 대신 전화번호를 입력 할 수 있습니다. 단 tel: 이라는 태그를 함께 입력해줘야 합니다. 이것만 주의하시면 됩니다. 위의 예시를 바탕으로 완성된 결과가 아래에 있습니다. 전화걸기 이 페이지를 스마트폰에서 확인했을 때, 전화걸기 텍스트를 터치하면 실제 ..
스타일들이 통일감은 전혀 없지만 그냥 만들고 싶은대로 만드는 중 입니다. 이 중에서 마음에 드는 스타일을 골라 사용하시면 됩니다. 이번에도 본문 중간에 삽입하는 링크용 스타일을 연출해 보았습니다. 여섯번째 버전 입니다. 먼저 적용 예시 입니다. 짧은 제목의 링크 글 중간 사이즈 정도 되는 텍스트가 살짝 있는 제목의 링크 글 이것은 정말로 상상을 초월하는 가장 긴 사이즈를 자랑하는 제목의 링크 글이 되려고 열심히 발악하는 규모의 글 이런 스타일 입니다. 마우스를 올리면 색상이 변하면서 흔들거리는 애니메이션을 추가했습니다. CSS 세팅 먼저 아래의 첨부파일을 다운로드 받습니다. 그리고 파일을 열어줍니다. 텍스트 파일 문서 안에는 다음의 CSS 코드들이 들어 있습니다. /* 친효애드온 : 본문 중간 수동 링크..
이번에도 심심해서 본문 중간 링크용 스타일을 만들어봤습니다. 앞서 소개한 두 개가 다소 유니크한 느낌이라면 이번에는 정말 평범하게 만들었습니다. 마크1과 비슷한 컨샙의 모듈 입니다. 일단 아래에 샘플이 있으니 직접 마우스로 올려보면서 테스트해 보시기 바랍니다. 참고로 클릭해도 아무런 변화가 없습니다. 짧은 제목의 링크 글 중간 사이즈 정도 되는 텍스트가 살짝 있는 제목의 링크 글 이것은 정말로 상상을 초월하는 가장 긴 사이즈를 자랑하는 제목의 링크 글이 되려고 열심히 발악하는 규모의 글 이런 느낌의 본문 중간 링크글 입니다. 완전 단순하죠? 복잡한 스타일을 싫어하신다면 마음에 드실 것 같습니다. 저 역시 종종 이용하게 될 스타일 입니다. CSS 세팅 아래의 첨부파일을 다운로드 받습니다. 그리고 파일을 열..
본문 중간 링크글에 대한 스타일이 어느덧 네번째까지 맞이하게 되었습니다. 코딩의 세상은 참 오묘합니다. 그리고 너무나도 객관적인 영역인데 크리에이터의 입맛과 취향에 따라 그 결과물이 천지차이여서 참 신기함과 동시에 재밌기까지 합니다. 코딩하시는 분들이 이 맛에 작업하시는게 아닐까 싶습니다. 물론 그 코딩이 순수 개인의 의지냐, 아니면 돈을 벌기 위한 수단이냐에 따라 엄청난 차이가 있겠지만요. 서두가 길었습니다. 네번째 스타일을 만나보시겠습니다. 짧은 제목의 링크 글 중간 사이즈 정도 되는 텍스트가 살짝 있는 제목의 링크 글 이것은 정말로 상상을 초월하는 가장 긴 사이즈를 자랑하는 제목의 링크 글이 되려고 열심히 발악하는 규모의 글! 반드시 두 줄로 만들었어야만 하는 그 링크 글! 이런 형태의 수동 링크글..
현재 친효애드온을 하나 개발 중 입니다. 본문 내에서 편리하게 해당 소제목으로 빠르게 이동이 가능한 하이퍼링크 목차 애드온 입니다. 이 기능은 방문자의 편의성을 최대한 살린 방법으로 구현해 놓으면 원하는 내용을 잽싸게 이동할 수 있다는 장점이 있습니다. 그와 동시에 단점도 하나 존재합니다. 본문 중간에 노출되는 자동 애드센스를 못 보고 지나칠 수 있다는 점 입니다. 우선 아래의 참고글을 살펴보시기 바라겠습니다. 큐텐 추천 상품 모음 친절한효자손 큐텐(Qoo10) 추천 상품 모음 안녕하세요, 친절한효자손 입니다. 온라인 쇼핑을 좋아하는데 큐텐에서 관심있게 본 상품들을 따로 글로 작성하고 싶어서 이렇게 키보드를 두드리고 있습니다. 제 블로그에 들어오시는 분들도 rgy0409.tistory.com 위의 글을 ..
본문 중간에 참고용으로 삽입하는 링크글에 대한 두번째 친효애드온을 만들었습니다. 기존 스타일은 밋밋해서 좀 더 색다른 변화를 주고 싶었습니다. 관련글 모듈과 살짝 비슷한 부분이 있는데, 그럼에도 불구하고 개인적으로 무척 만족스러운 모듈이라고 생각하고 있습니다. 먼저 아래의 예시를 살펴보도록 하겠습니다. 이것은 짧은 제목의 링크글 이것은 그래도 제법 중간 사이즈의 제목을 가진 링크글 이것은 지금까지 여러분들께서 듣도 보도 못한 길이의 제목을 자랑하는 매우 긴 텍스트로 이루어진 장문의 링크글 보통은 링크글을 한 개 정도 배치하지만, 만약 2개 이상의 그룹으로 배치하는 경우에도 가능합니다. 링크글 목록이 약간씩 떨어져 배치됩니다. 마우스를 올리면 왼쪽의 동그라미가 가로로 길어지는 애니메이션 효과를 연출했습니다..
이번 친효애드온은 본문 중간에 삽입하는 링크 입니다. 수동으로 넣는 경우가 종종 있습니다. 예를 들어서 CSS 코딩 관련해서 글을 작성했다고 한다면, 해당 글과 관련된 HTML 내용이라던지, 아니면 유용한 사이트라던지 바로가기를 넣어야 하는 경우 입니다. 지금까지 작성했던 글 중에서도 관련된 문서가 있을 수 있습니다. 이럴 때 요긴하게 사용되게 될 것입니다. 방법은 두가지인데, 어떤 포지션이냐에 따라서 다릅니다. 첫번째는 말 그대로 수동으로 넣는 경우입니다. 두번째는 티스토리 플러그인 중 하나인 "이전 글 넣기"를 사용할 때 입니다. 하나하나 사용법을 안내해 드리겠습니다. CSS 세팅하기 먼저 이 모듈을 적용시키기 위한 스타일을 세팅해야 합니다. 방법은 스킨편집으로 들어가셔서 CSS 탭으로 이동합니다. ..
오늘은 가상 클래스 선택자에 대해 배웠습니다. 보통 링크 태그인 a 요소에서 많이 볼 수 있습니다. 우리가 흔히 알고 있는 텍스트 기본 링크 색상은 파란색이며, 밑줄이 그어져 있습니다. 그리고 한번 방문한 링크는 보라색으로 바뀌어 있습니다. 이 부분을 설정할 수 있는데, 가상 클래스 선택자를 통해서 수정이 가능합니다. 태그를 먼저 살펴보겠습니다. 위의 스크린샷처럼 작성하시면 됩니다. 각 부분의 설명은 다음과 같습니다. a:link → 링크가 걸린 텍스트의 기본 상태a:visited → 한번 이상 방문했던 링크 텍스트a:hover → 링크가 걸린 텍스트 위에 마우스가 올라갔을 경우를 설정a:active → 링크가 걸린 텍스트를 클릭하고 있을 때를 설정 보통은 색상 변경을 가장 많이 하는 편이죠. 아니면 밑..
오늘은 간단한 태그 입니다. 글자나 이미지에 클릭 시 이메일을 바로 보낼 수 있는 링크를 거는 방법에 대해 알아보겠습니다. 먼저 HTML 기본 구조를 만들고, body 안쪽에 다음과 같이 작성해 보겠습니다. 2018 © copyright by 텍스트입력 이렇게 입력하시면 됩니다. 그러면 미리보기로 한번 브라우저에 띄워보겠습니다. 보시는것처럼 이렇게 정상적으로 문구가 나타나고 있고, admin 을 클릭하면 윈도우의 경우라면 아웃룩 익스프레스가 열리거나 혹은 기타 메일 프로그램이 열리게 됩니다. 간단하지만 요긴하게 쓰일 수 있는 이메일 링크 입니다. 끝. ●HTML 이미지에 ALT 태그 속성값을 반드시 넣어줘야 하는 이유●HTML에서 주소 입력하는 address 태그를 사용하는 방법 "친절한효자손 취미생활"..
이번 시간은 참으로 사용하기 용이한 이미지맵에 대해서 알아보겠습니다. 이 방법은 네이버 블로그에서 많이 사용합니다. 네이버 블로그를 사용하시는 분들 중에서는 위젯 곳곳에 링크를 걸어두신 분들이 제법 많이 계십니다. 대체 이건 어떻게 하는걸까 궁금하셨던 분들은 이번 강좌를 꼭 눈여겨 봐주시기 바랍니다. 이미지맵이란 말 그대로 커다란 이미지 안에서 투명한 가상의 레이어를 만들어 그곳에 링크를 거는 방법 입니다. 우선 준비물은 사용하고자 하는 이미지가 필요합니다. 그리고 HTML 태그 중, AREA 그리고 MAP 태그를 사용해서 원하는 좌표에 넘어가고자 하는 인터넷 주소를 입력해서 사용하게 됩니다. 그러면 구체적으로 어떻게 하는지 알아보겠습니다. 우선 이미지는 이것으로 사용해 보겠습니다. 웹 접근성 연구소 홈..
엑셀을 공유할 일이 있어서 어떻게 하는건지 알아보니까 평소 해오던 공유 방법과 크게 다를 바 없었다. 생각보다 간단했고 쉬웠다. 어떻게 진행하는건지 알아보도록 하자. 피가되고 살이되는 블로그, 친절한효자손 취미생활!글, 사진 및 이미지 ▶ CopyLeft(C) 유길용#CopyLeft(C) 는 저작권의 반대개념으로, "모든것을 공유한다" 는 뜻 입니다##공유라는 개념은 그대로 복붙하시라는 개념이 아니라, 내용을 응용해서 가져가시라는 말씀입니다##사진과 이미지의 일부는 퍼온것도 있음을 밝힙니다##본 블로그는 크롬(Chrome Browser) 1920×1080 해상도에서 가장 선명하게 보입니다# EXCEL 문서 인터넷 웹 공유하기 - 원드라이브 공유 활용 먼저 선행해야 하는 작업이 있다. 윈도우 유저라면 기본..