친효스킨 : 더 아트북에 적용시키려고 준비중인 일부 메뉴 스타일을 만들어 봤습니다. 마우스를 올리면 광택이 스윽~ 하는 효과를 만들어주고 싶었습니다. 그래서 간단하게 한번 구현해 보았습니다. 저는 자바스크립트 능력이 현저히 떨어집니다. 그러므로 믿는건 HTML과 CSS 뿐입니다. 하지만 이 두가지로도 이만한 효과를 연출할 수 있습니다. CSS의 장인이 되고 싶어집니다. (웃음) 예시 See the Pen CSS : MenuBar by rgy0409 (@rgy0409) on CodePen. 이렇습니다. 마우스를 올려보세요. 그러면 스윽 광택이 흐르는 효과가 나타납니다. 메뉴는 일부러 크게 만들어 놨어요. 아마 실전에서는 작게 바뀔 것입니다. 물론 스타일이 살짝 바뀔수도 있구요. 그러면 어떤 원리로 돌아가는..
프린터와의 인연 또한 학창시절로 거슬러 올라갑니다. 그림에 딱 눈을 뜨기 시작했던 시점이죠. 정확히 고등학교 1학년때입니다. 이 내용은 CD굽던 노인에서 언급한 그 중딩 친구와 관련이 있습니다. 혹시 이 글을 못 보셨다면 한번쯤 심심하실 때 읽어보시기 바랍니다. 씨디굽던 노인 (ODD Recorder : CD라이터의 추억) 씨디굽던 노인 (ODD Recorder : CD라이터의 추억) 이 장치와의 인연은 중학교 3학년때로 거슬러 올라갑니다. 친구 때문에 컴퓨터를 구매하게되고 이 친구 때문에 PC 조립부터 포맷하는 방법까지 알알버리게 됩니다. 그리고 이 친구 때문에 CD를 rgy0409.tistory.com 잉크젯 프린터와의 인연 중학교때의 그 친구는 PC 부분에서는 저보다 한 발, 아니 10발 정도 앞서..
영진닷컴으로부터 좋은 제안을 받았습니다. 제목에서 언급한 "코딩은 처음이라 with 웹 퍼블리싱" 이라는 도서에 대한 후기글 작성 제안입니다. 이곳 친절한효자손 취미생활 티스토리에는 꽤 많은 웹코딩 관련 글들이 올라온 상태이며 앞으로도 꾸준히 업로드 될 예정입니다. 따라서 본 도서를 직접 소개해주시면 매우 큰 시너지 효과가 있을 것으로 기대한다는것이 영진닷컴측의 이유입니다. 실제로 저 또한 친효스킨2를 개발중에 있기에 아직까지 저도 모르는 지식이 있을 수 있으니 이 책 한권만으로도 도움이 상당히 될 것이라고 생각해서 제안을 흔쾌히 수락했습니다. 책 미리보기 택배가 꽤 묵직한게 도착했길래 보낸 사람의 정보를 확인해보니 영진닷컴이었습니다. 이것이 코딩은 처음이라 위드 웹 퍼블리싱 신간 도서 되시겠습니다. 책..
이 효과는 현재 친효스킨의 우측 상단에 위치한 버튼 메뉴에 적용된 CSS 효과입니다. 마우스를 올려보시면 마치 네온사인에 불이 들어온 듯 은은한 불빛이 나를 감쌀 것입니다. 그렇습니다. 이 효과의 핵심 옵션은 바로 text-shadow입니다. 이 CSS 스타일 옵션을 사용해 네온사인 효과를 연출하는 것입니다. 빠르게 알아보겠습니다. 예제 See the Pen CSS text-shadow (NeonSign Effect) by rgy0409 (@rgy0409) on CodePen. 위의 예시에는 링크 버튼이 두 개 있습니다. 첫번째는 폰트어썸을 사용한 링크고 두번째는 흔하디 흔한 텍스트 링크입니다. 마우스를 올려보시면 두개 모두 네온사인 효과가 적용되고 있음을 알 수 있습니다. 앞서 언급했듯 :hover 했..
개인적으로 링크 버튼을 만드는 두 가지의 방법에 대해 언급해보려고 합니다. 정답은 없지만 어떤 작업을 할 때 이 방법이 좋다라는 견해는 있으니 한번 참고해 보시기 바랍니다. 예시 먼저 아래의 링크 버튼을 살펴보시겠습니다. See the Pen a링크 버튼 만들기 두 가지 컨셉 by rgy0409 (@rgy0409) on CodePen. 버튼1과 버튼2 두 가지가 완성되어 있습니다. CSS를 살펴보시면 버튼1의 클래스명인 ex1에 적용시킨 스타일과 버튼2의 클래스명인 ex2의 스타일 옵션들이 다르다는것을 알 수 있죠. ex1은 비교적 간단합니다. ex2는 ex1에 비하면 다소 복잡합니다. 자유롭게 만들고자 할 때 이 방법은 현재 티스토리같은 규격과 형식에 얽메이지 않은 웹페이지에서 적용해볼 수 있는 방법입..
홈페이지를 제작하다보면 텍스트는 필연적으로 들어가게 되어있습니다. 메뉴 항목이라던지, 홈페이지 제목 등등에 사용되곤 하죠. 푸터 영역엔 무조건 텍스트가 들어갑니다. 설마 푸터를 이미지로 퉁치는 만행을 저지르는 일은 없어야 할 것입니다. 오늘 알아볼 text-transform은 한글이 아닌 알파벳으로 이루어진 영문장을 사용할 경우에 적용할 수 있는 방법입니다. 내용이 너무나도 간단하니 예시를 통해 바로 알아봅시다. See the Pen CSS text-transform by rgy0409 (@rgy0409) on CodePen. 어떤가요? 금새 파악이 되죠? 그러면 간단히 요약해 보겠습니다. text-transform: none; ▶ 기본값 text-transform: capitalize; ▶ 영단어의 첫..
텍스트에 밑줄을 넣거나, 취소줄을 긋거나 a링크의 줄을 없앨 때 사용하는 text-decoration에 대해 알아보겠습니다. 개인적으로는 text-decoration을 a링크에 많이 사용하는 편입니다. a링크 태그는 기본적으로 밑줄이 들어가는 형태입니다. 요즘 웹페이지를 살펴보시면 링크에 밑줄이 들어간 경우가 거의 없잖아요? 그때 사용하는것이 text-decoration: none; 처리입니다. 종류와 쓰임새는 예시를 통해 한번 자세히 살펴보겠습니다. 기본 옵션 예시 See the Pen CSS text-decoration by rgy0409 (@rgy0409) on CodePen. 각 항목별로 살펴보시면 쉽게 파악 가능합니다. 아래는 요약 내용입니다. text-decoration: none; ▶ 비활성..
이것도 중학교 시절로 거슬러 올라갑니다. 꽤 친했던 친구가 있습니다. 군시절까지도 연락을 주고 받았었는데 호주로 어학 연수를 간 이후로 소식이 뚝 끊겨버렸습니다. 와우를 좋아했었고 제게 자꾸 와우를 전도하려고 했던 그 녀석... 생사가 궁금합니다. 혹시라도 이 글을 보면 꼭 연락 좀 해주십시오. 아무튼 중학교시절 그 녀석의 집을 되게 자주갔었습니다. 이유는 컴퓨터! 그 녀석에게는 나이 차이가 좀 나는 형이 있었습니다. 생김새가 너무 똑닮아서 너무 신기했었는데 말입니다. 그 녀석의 큰형은 늘 PC앞에 있는 시간이 많았는데 어느날은 컴퓨터로 TV를 보는 것 아니겠습니까? 신선한 충격이었습니다. '컴퓨터로 TV도 볼 수 있구나!' 그때 처음 알았습니다. 하지만 저분과 전혀 친분이 없던 저는 선뜻 말할 용기가 ..
텍스트 혹은 이미지와 텍스트 조합에서 세로축에 대한 정렬을 설정할 수 있는데 이때 사용하는것이 바로 vertical-align 입니다. vertical-align은 부모 요소와 자식 요소 사이에 사용되어지며 부모 요소는 반드시 inline 또는 inline-block 요소여야 합니다. 블록요소는 안 됩니다. 그렇기때문에 텍스트로 이루어진 문장에서 사용되어지거나 이미지와 텍스트가 같이 있는 경우에 사용됩니다. 사용 빈도는 그렇게 높지 않습니다. 블록요소를 세로정렬하는게 훨씬 깔끔하고 확실한 방법이기 때문입니다. 하지만 이것도 알아두면 분명 요긴하게 사용할때가 올 것입니다. 블록요소의 세로 정렬에 대한 방법은 아래의 글을 참고해주시기 바랍니다. CSS flex align-items 자식요소 세로 정렬(배치)..
알리에서 괜찮은 충전기를 또 하나 발견했습니다. 회사 브랜드는 KOVOL이라고 하는군요. 한글화하면 코볼이 되려나요? 아무튼 코볼에서 출시한 충전기는 모두 PD충전을 지원합니다. 또한 GaN 소재여서 발열도 심하지 않을 것으로 추측됩니다. 개인적으로도 이미 GaN 소재의 PD충전기를 가지고 있기에 잘 알고 있습니다. 절찬리 판매중인 코볼 PD충전기는 크게 세 종류입니다. KOVOL 140W 38.06US $ 35% OFF|KOVOL Powerful GaN Charger 140W Max Type C PD Fast Charger For iPhone 13 12 Pro Max Samsung Xiaomi For Macbook Smarter Shopping, Better Living! Aliexpress.com w..
수 많은 도서들, 그리고 그 속에 담겨있는 엄청난 양의 텍스트들... 이 텍스트들의 공통점이 하나 있습니다. 모든 도서가 이렇지는 않겠지만 대부분은 들여쓰기가 적용되어 있습니다. 보통 새로운 문단이 시작되면 첫 단어의 왼쪽이 살짝 떨어져 있을겁니다. 이런 식으로요. 예시 살펴보기 See the Pen 텍스트 들여쓰기 두 가지 방법 by rgy0409 (@rgy0409) on CodePen. 위의 예시를 쭉 훑어보시면 두 개의 무작위 문단과 두 개의 이미지가 있습니다. 각 문장은 p태그로 감싸여 있으며 들여쓰기가 적용되어 있습니다. 또한 p태그 안에도 img 태그를 넣었습니다. 그런데 이 두개의 이미지는 차이가 있습니다. 이미지의 왼쪽 부분을 유심히 살펴보시면 알 수 있습니다. 첫번째 이미지에는 들여쓰기 ..
알리에서는 이 케이스를 판매하고있지 않는 것 같습니다. 아무리 찾아봐도, 1주일 내내 찾아봐도 도무지 흔적조차 찾을 수 없어요. 결국 최후의 수단으로 위시를 검색해 봅니다. 그리고 마침내 이곳에서 발견을 하게 됩니다. 보는 순간 구매를 해야겠다고 바로 결심하게된 케이스입니다. 말로 백날 떠들어봐야 의미 없죠? 여러분들도 저와 생각이 같은지 실물을 한번 만나보시기 바랍니다. 바로 이겁니다. 정품 케이스는 없고 이렇게 벌크 타입으로 배송되는군요. 그래서 저렴한 듯 합니다. 민트 백그라운드에 핑크색 조합이 무척이나 맛있어 보입니다. 마치 마카롱 같은 느낌입니다. 안쪽은 스크래치 방지용 패드가 붙어있습니다. 접착력이 있는건 아닙니다. 단지 스마트폰의 뒷면에 케이스로 인해 스크래치가 발생하는것을 방지하는 목적에 ..
얼마전에 알리에서 구매한 터치식 전원 버튼을 한번 소개해 드린 바 있습니다. 전원 버튼으로서 전혀 손색은 없는데 문제는 이게 또 하나의 주렁주렁열매가 되어버리는 것입니다. 그냥 개인적인 표현인데 주렁주렁열매란 PC 주변기기가 중구난방으로 연결되어 너무 볼품없어보이고 지저분해짐을 뜻합니다. 특히 케이블이 눈엣 가시죠. 요즘 PC 주변기기가 얼마나 다채롭습니까? 일단 기본적으로 마우스랑 키보드가 있습니다. 스피커도 있죠. 이런 것들이 하나 하나 모여서 마치 거미줄처럼 네트워크라인을 형성합니다. 시간이 지나면 이 케이블에 먼지가 수북하게 앉아있죠. 청소하기도 귀찮고 번거롭습니다. 그래서 현재 저는 무선 키보드와 무선 마우스를 사용 중입니다. 이러한 이유 때문입니다. 그런데 여기에 USB 형식의 PC 전원버튼까..
책책책 카테고리를 개설한지는 얼마 되지 않았습니다. 그렇기 때문에(?) 글이 많지도 않죠. 그렇습니다. 저는 책을 잘 읽지 않는 한국인 중 한명입니다. 하지만 반드시 읽어보고 싶은 책이 있다면 기필코 정독합니다. 주로 마음이 심란할 때 또는 마인드에 균열이 생겼을 때, 내 생각이 맞는지에 대한 확신이 서지 않을 때 등등 책을 읽는 이유는 대체로 명확합니다. 이유가 어찌되었듯 결론은 나 자신을 위한 독서라고 해야 하겠군요. 출판한 경험이 있기에 아무래도 글쓴이의 입장에서 어떤 생각을 가지고 무엇을 말하려는 것인지를 많이 생각하려고 애쓰는 편입니다. 이번에 읽게 된 리딩페미님의 「언니의 비밀계정」이라는 책은 딱 두 가지의 개념을 확실히 일깨워주었습니다. 1. 내가 남자라서 참 다행이다 2. 콘텐츠 속 여성이..
이걸 살까 말까 몇날 며칠을 고민했습니다. 가격이 걸림돌입니다. 알리에서 구매하는 제품들은 대부분 저렴합니다. 저렴하면서 성능이 준수하면 물론 더할나위없이 좋겠지만 꼭 그렇지많은 않다는것을 여러분들도 잘 아시리라 생각됩니다. 그래서 더 고민이었습니다. 이 제품은 가격대가 좀 있습니다. 외장형 저장장치 케이스 주제에 말입니다. 그렇다고 특별한 성능이 있는것도 아닙니다. 또한 요즘 거의 사용하지 않는 mSATA 방식의 케이스입니다. 사실 고민할게 없는 제품이죠. 그럼에도 불구하고 저는 질러버렸습니다. 제품 이모저모 제품은 이렇게 생겼습니다. 뭔가 메탈 재질이 느껴지지 않습니까? 그렇습니다! 이것이 구매의 결정적인 이유입니다. 케이스 전체가 방열판입니다. M.2 방식이나 mSATA 방식의 SSD는 열을 많이 ..
최근 포트폴리오 작업을 해야 할 일이 생겼습니다. 그런데 포폴을 PDF로 완성해 달라고 요청하시어 여러장의 이미지를 하나로 묶는 방법을 검색하다보니 포토샵에서 이것이 가능하다는걸 알게 되었습니다. 실제로 해보니까 완전 쉽더군요. 어떻게 하는건지 한번 알아봅시다. 1. 포폴용 이미지 준비당연히 가장 먼저 해야할일은 이미지를 제작하는 것입니다. 이 과정은 지극히 개인적인 영역이므로 생략합니다. 포트폴리오용 이미지는 각자 알아서 준비합시다. 본문에서는 귀여운 고양이 사진으로 대체합니다. 2. 포토샵에서 불러오기이제 포토샵을 실행합니다. 이제부터는 이미지를 불러오는 과정이 기존과 다릅니다. File > Automate > PDF Presentation 으로 들어갑니다. PDF 프리젠테이션 설정창이 떴습니다. 왼..
추억여행을 위한 카테고리를 하나 개설했습니다. 제 티스토리를 구독하시는 분들 중에서는 이미 읽어보신분이 계실 수 있으시겠군요. 혹시 못 보셨다면 아래에 살짝 링크를 해두겠으니 시간 여유가 되시거나 심심하시면 한번 스윽 읽어봐주시기 바랍니다. 요즘의 10대는 아마 이걸 잘 모를거에요. KKND 복사 좀 해보겠다고 1.44MB 플로피 디스크를 몇십장 샀던 추억 저 글을 작성하면서 진짜 한번 플레이 해보고 싶어서 KKND를 열심히 구글링을 통해 찾았습니다. 그리고 마침내 찾아내고 말았습니다. 문제는 이게 완전 오래된 게임이다보니 실행파일을 더블클릭하니까 이런 오류가 뜨더군요. Failed to setup DirectDraw Error 분명 최신 버전의 다이렉트X가 설치되어 있을 터! 이 문제는 단순 다이렉트X..
이번에 환경공모전 출품을 하는데 좋은 아이디어가 떠올랐습니다. 머릿속에 떠오른 이미지를 연출하려면 거미줄 브러시가 필요한 상황입니다. 포토샵(Photoshop) 브러시(Brush)는 무궁무진한 종류가 펼쳐져 있습니다. 포토샵이라는 프로그램 자체가 이미 제가 어렸을 때부터 있었던 터라 그 역사와 전통이 어마무시하죠. 그에 반해 프로크리에이트(Procreate)는 태생이 오래 되지 않습니다. 그래서 그런것인지는 몰라도 브러시의 종류가 포토샵 대비 다양하지 않습니다. 턱없이 부족하죠. 그래서 생각했습니다. 「포토샵 브러시로 프로크리에이트 브러시로 변환하는 방법이 없을까?」 딱히 변환하는 플랫폼은 아직까지는 없는 것 같습니다. 그러나 우리는 늘 답을 찾을 것입니다. 현재 필요한 브러시 소스는 바로 이 거미줄 브..
위시에서 쇼핑을 하다가 꽤 이뻐보이는 키보드를 하나 발견하게 됩니다. 발견하면 일단 무조건 장바구니에 킵합니다. 그리고 잊혀지죠. 그런데 이 키보드는 일주일에 최소 한번씩 자꾸 머릿속에서 아른거렸습니다. 잊을만하면 생각나고 또 생각나고했죠. 그렇기에 결국 구매를 하게 됩니다. 궁금한건 잘 못 참는 성격이기에 어쩔 수 없습니다. 뭐 사용해보고 딱히 마음에 들지 않으면 당근마켓이나 중고나라에 올려버리면 그만이니까요. Wolf Totem사 L1 키보드 울프토템이라는 회사는 진짜 처음 들어봅니다. 늑대부적 회사라니?! 강력함이 느껴집니다. 박스는 저 멀리 험란한곳에서 왔기 때문에 많이 찌그러졌습니다. 제품을 받고나니 갑자기 회사가 무엇을 판매하는지 궁금해졌습니다. https://www.langtucn.com/y..
지난시간까지해서 프로필 아이콘 만들기와 말풍선 만들기까지 완료했습니다. 이제는 상대방과 자신과의 대화 티키타가가 오고가는 스타일을 만들어 보도록 합니다. 혹시 본 페이지를 검색으로 처음 방문하셨다면 아래 두 개의 내용을 먼저 읽어보시기 바랍니다. 그래야 본문이 이해됩니다. 내용이 이어지기 때문이지요. HTML + CSS 카카오톡 채팅창 화면 만들기 1장 - 프로필 아이콘 표현하기 HTML + CSS 카카오톡 채팅창 화면 만들기 2장 - 대화창 (말풍선) 미리보기 최종적으로 이렇게 완성이 될 것입니다. See the Pen 카카오톡 채팅창 만들기 by rgy0409 (@rgy0409) on CodePen. 지난시간까지는 상대방의 말풍선을 완성했으니 이번에는 자신이 답변을 할 때의 말풍선입니다. 카톡에서 상..
지난 시간에 이어 오늘도 연이어서 HTML + CSS로 카카오톡 채팅 대화창을 만들어 보겠습니다. 이전 강의에서는 프로필 아이콘을 만드는 방법에 대해 알아보았습니다. 이번에는 프사 바로 옆에 표시되는 대화창 모양을 만들어볼 것입니다. 그 전에 최종 완성본을 한번 보시고 넘어가겠습니다. 미리보기 이렇게 만들 것입니다. See the Pen 카카오톡 채팅창 만들기 by rgy0409 (@rgy0409) on CodePen. 프로필 아이콘 만드는 방법은 아래의 카테고리 관련글에도 있지만 혹시 찾기 어렵거나 오류로 인해 링크가 뜨지 않는 경우를 대비해 바로 아래에도 링크를 해두겠습니다. 혹시 프사 만들기 강좌를 못 보셨다면 먼저 보시고나서 만들어 주시기 바랍니다. 내용이 이어지기 때문입니다. HTML + CSS..
오랜만에 주변 지인으로부터 PC 조립 요청 의뢰가 들어왔습니다. 즐거운 마음으로 컴퓨존에 들어가봅니다. 원래 매달 첫째 주마다 조립PC 견적글을 올리려고 했는데 생각해보니 월별로 끊는건 큰 의미가 없더라구요. 한달 사이에 가격 변동이 심해지는것도 아니고, 그렇다고 신상품이 월마다 쏟아지는것도 아니니까요. 넉넉하게 반년 정도마다 끊거나 아예 요청하시는 분의 조립PC 목적을 듣고 그것에 맞추는게 훨씬 좋다는 판단이 들었습니다. 이번 조립PC 사용 목적 이번에는 아는 동생의 요청인데 현재 스타트업 CEO입니다. 화장품 관련으로 진행하다보니 포토샵같은 그래픽 툴을 사용할일이 많으며 엑셀 작업도 많이 해야 합니다. 즉 그래픽회사 수준의 사양이면 될 것 같습니다. 그렇다고해서 게임 개발같은 고사양의 그래픽툴을 다루..
현재 친효스킨의 댓글은 카카오톡 대화창같은 UI를 적용시킨 상태입니다. 실제로 대화하는 것처럼 표현이 되어 좀 더 정감있다고 해야할까요? 물론 100% 똑같이 구현은 불가능했지만 그래도 90%이상은 똑닮은 것 같아서 만족스럽습니다. 이렇듯 웹상에서 HTML과 CSS 조합 만으로도 얼마든지 채팅창같은 표현이 가능합니다. 본 시리즈는 웹으로 카톡 채팅창을 표현해보는 강좌입니다. 미리보기 최종 완성되는 형태는 아래와 같습니다. See the Pen 카카오톡 채팅창 만들기 by rgy0409 (@rgy0409) on CodePen. 제법 카카오톡 대화창같지 않습니까? 이제 이 부분을 하나하나 설명드리려고 합니다. 먼저 우리가 할 것은 사람 모양의 아이콘 형태를 만드는 것입니다. 바로 이 아이콘입니다. HTML ..
안녕하세요. 친절한효자손입니다. 어제까지만해도 안 그랬는데 2022년 8월 8일! 오늘 티스토리에 접속해보니 뭔가 본문에 업데이트가 된 모양입니다. 보아하니 티스토리측에서 본문 관련 CSS를 새롭게 추가한 듯 합니다. 이 코드로 인해 친효스킨의 본문 중 일부가 스타일이 엉망이 되는 현상을 목격했습니다. 현재까지 발견된 오류는 다음과 같습니다. 1. 본문 글꼴 및 리스트 스타일 2. 첨부파일 스타일 3. 본문 자동링크 스타일 4. TOC 자동목차 스타일 5. 유튜브 썸네일 자동생성 스타일 이 문제들을 수동으로 해결할 수 있는 방법을 안내해 드리겠습니다. 본문 글꼴 및 리스트 스타일 친효스킨 본문의 기본 글꼴은 이롭게바탕체입니다. 그런데 애플 고딕체로 강제 적용이 되었더군요. 마음에 들지 않기에 친효스킨의 ..
HTML 요소의 영역을 확장하고 펼치는데 유용하게 사용하는 CSS 스타일이 바로 padding(패딩)과 margin(마진)입니다. 예를 들어서 h3 태그를 사용하는데 이 태그의 주변 영역을 넓혀서 백그라운드의 색상을 확장하고 싶습니다. 이럴때 우리는 padding을 써야 할까요? margin을 써야 할까요? 여기에서는 백그라운드의 색상 영역을 확장하고 싶다고 했으니 padding을 사용해야 맞습니다. padding 패딩은 요소의 영역을 몸을 부풀려 확장하는 역할을 합니다. 겨울에 추우면 패딩을 입죠? 패딩을 입으면 몸이 커지는 효과를 볼 수 있습니다. 그 원리라고 이해하시면 됩니다. 패딩은 자신의 몸둥아리를 늘리는 역할을 합니다. 아래에 태그를 사용하여 간단한 텍스트를 넣어봤습니다. 인라인요소에 적용시키..
안녕하세요. 친절한효자손입니다. 진짜 오랜만에 본문 중간 링크 스타일을 만들어 보았습니다. 그동안 게을렀던 자신을 탓하고 반성하며 이따금씩 이런 스타일들을 틈나는대로 만들어 보기로 다짐합니다. 완성된 모습은 다음과 같습니다. 아래의 버튼에 마우스를 올려보세요. See the Pen 친효애드온 : 본문 링크 (마크10) by rgy0409 (@rgy0409) on CodePen. 기본적으로 짙은 회색 박스안에 텍스트가 들어있는 형태의 링크 버튼입니다. 이 링크 버튼은 문단 사이에 있는 특정 단어에 링크를 걸 때는 사용하기가 부적합합니다. 상/하/좌/우로 기본 패딩값이 무려 20px이나 적용되기 때문입니다. 따로 링크 텍스트를 만들 때 적합합니다. 그러면 세팅부터 사용 방법까지 알아보겠습니다. 먼저 아래의 ..
기본적으로 HTML의 태그에는 고유 속성이 있습니다. 이 부분에 대해서는 이미 한 차례 자세히 언급을 한 글이 있으니 아래의 내용을 한번 더 확실히 이해하시는것이 도움이 될 것입니다. HTML 태그 기본 분류 - 블록요소 인라인요소 HTML 태그 기본 분류 - 블록요소 인라인요소 티스토리와 함께 배우는 HTML의 세상에 잘 오셨습니다. 사람의 기억력은 한계가 있습니다. 자꾸 써먹지 않으면 언젠가는 까먹습니다. 저는 사람입니다. 즉 저도 써먹지 않으면 까먹을 수 있습니 rgy0409.tistory.com 위의 글에도 나와있듯 태그(Tag)에는 고유 속성이 있는데 그 속성에 따라 블록요소, 인라인요소, 인라인-블록요소 이렇게 3가지의 요소로 나뉩니다. 각 요소마다 가지는 특징을 정확히 이해한다면 HTML+C..
갑자기 발생한 일입니다. 모든 기기는 다 상황이 엇비슷합니다. 예고 없이 갑자기 고장납니다. 컴퓨터도 에어컨도 기기입니다. 컴퓨터 고장은 종종 겪어봤는데 이번에 에어컨이 갑자기 고장나는 경험을 하게 되었습니다. 현재 저희집에서 사용중인 에어컨은 캐리어 제품으로 벽걸이 타입입니다. 모델명은 CS-061WRI입니다. 고장 증상은 다음과 같습니다. 1. 갑자기 주황색 시계 아이콘이 깜박이며 작동을 멈춤 2. 전원을 끄고 다시 재가동해도 동일함 3. 찬바람은 전혀 나오지 않고 마치 송풍모드처럼 미지근한 바람만 나옴 이래서는 도저히 안 되겠습니다. 그나마 천만 다행인건 오늘 낮 기온이 그리 높지 않다는 것! 이것은 하늘이 도우셨습니다. 에어컨에 대해서는 자세히 모르므로 섣불리 건드렸다가는 더 악화될 가능성이 있으..
지난번에 미니 단축키 키보드에 대해서 후기를 남긴 바 있습니다. 사용해보고나니 몇 가지 부족한 부분이 있었습니다. 해당 단축키 키보드는 Ctrl과 Alt를 대체할 수 없었습니다. 이게 무슨 소리냐면 포토샵이나 클립스튜디오를 사용해보시는 분들은 잘 아실겁니다. Ctrl키와 Alt키를 조합해 사용하는 단축키가 생각보다 많습니다. 따라서 단축키 키보드는 이런 키조합을 이용해 사용하기가 어렵다는 부분입니다. 물론 해당 프로그램에서 단축키 정보를 바꾸면 되겠지만 애석하게도 컨트롤과 알트키를 제외한 나머지 키 조합은 사실상 불가능했습니다. 뭔 뜻이냐면 A키와 D키를 조합해 쓸 수 없다는 이야기입니다. G60 이모저모 그래서 이것을 발견해 구매하지 하게 됩니다. 제조사에 대한 정보는 나와있지 않고 모델명만 G60이라..
여러분들의 한 달 스마트폰 통신비는 얼마나 되시는지요? 현재 저는 LG헬로모바일을 사용하고 있습니다. 진짜 오래 사용하고 있죠. 통화 품질 및 통신 서비스는 대기업 통신망을 사용하고 있기에 사용하면서 불편함을 느낀적은 거의 없습니다. 어차피 집에 있는 시간이 압도적으로 많기에 와이파이를 이용하고 있는 경우가 많긴 하지만요. 외출시에도 LTE로 매우 잘 사용 중입니다. 데이터, 통화, 문자가 모두 무제한인데 한 달 통신비는 약 17,000원 정도입니다. 이런 말도 안 되는 가격탓에 어머니와 남동생도 모두 다 저와 같은 알뜰폰 요금제를 꾸준히 이용 중입니다. 물론 저 만칠천원은 제휴카드를 결합해야만 할인을 받아 저렇게 비용을 최소화 할 수 있는 것입니다. 정말 많은 알뜰폰 통신 회사들 제가 아는 MVNO 통..