열심히 짜놓은 코딩을 티스토리에 직접 업로드 하려니까 일반적인 스타일의 CSS의 경우는 그냥 스크린샷을 해서 이미지 통째로 올려도 상관은 없지만 움직이는 애니메이션, 자바스크립트의 경우는 결과 화면을 보여주기가 쉽지가 않습니다. 이럴때 필요한것이 코드펜 (Codepen) 입니다. 코드펜은 HTML, CSS, JS 등을 직접 입력해서 결과화면을 얻고, 이것을 다른 사람들과 공유함으로서 코딩 노하우를 공유하는 외국 사이트 입니다. 더불어 자신이 짜놓은 소스코드를 그대로 티스토리에 올릴 수 있습니다. 코드펜으로 올리면 결과화면까지 공유할 수 있어서 방문자도 직접 이것저것 클릭도 해보고 움직여보면서 같이 결과화면을 볼 수 있으니 더욱 직관적 설명이 가능합니다. 그러면 어떻게 올리는지 확인해 보겠습니다. 먼저 코..
CSS3에서 스타일 만으로도 다양한 그림자 효과를 연출할 수 있습니다. 각 요소에 대한 마크업 방법과 결과값을 한번 살펴보겠습니다. See the Pen CSS : text-shadow / box-shadow by rgy0409 (@rgy0409) on CodePen. 먼저 HTML 태그 상태 입니다. p태그와 div, button 세 개의 요소만 사용하고 있고 각각 글씨, 상자, 버튼 속성을 가진 요소 입니다. 이 모든 요소에 그림자 효과가 사용 가능합니다. 다음은 CSS 스타일 입니다. 글씨에 그림자를 만드려면 text-shadow를, 박스나 버튼에 그림자 효과를 연출하려면 box-shadow 요소를 사용하시면 됩니다. 그 뒤에 오는 숫자와 색상을 지정하시면 되며 box-shadow의 경우는 숫자가 ..
오늘도 유익한 자바스크립트를 하나 배웠습니다. CSS로 메뉴 스타일을 꾸미는 방법들은 앞서 2단 및 3단 드롭다운 메뉴를 만드는 부분에서 충분히 설명을 드렸습니다. 이번에는 자연스럽게 아래로 쓸려 내려오는 아코디언 스타일의 2단 메뉴 입니다. MAIN 01 MAIN 02 SUB 01 SUB 02 SUB 03 SUB 04 MAIN 03 SUB 05 SUB 06 SUB 07 먼저 HTML 부분 입니다. 메인 메뉴는 가로 스타일이며, 서브 메뉴는 세로 형태 입니다. 서브메뉴가 길어야 아코디언 효과를 제대로 만끽할 수 있으니까요. 다음은 CSS 스타일 부분 입니다. /*RESET*/ * { margin: 0; padding: 0; } body { font: 17px 'Nanum Gothic', sans-seri..
지난 시간에 이어서 transition 애니메이션에 대한 요소를 배워보겠습니다. 이번에는 속도를 조절하기 위한 방법을 알아보도록 하겠습니다. 우선 전 시간에도 잠깐 배워보았듯 기본적인 구조는 다음과 같습니다. transition : property duration timeingfunction; 그리고 각 요소에 대한 설명은 아래와 같습니다. property : 애니메이션을 적용할 태그 요소를 지정duration : 애니메이션 재생 시간timeingfunction : 애니메이션 속도 옵션 그래서 실질적으로 이 부분에 대해서는 이론만으로는 이해하기가 어렵기 때문에 아래의 코드를 먼저 구성해봤습니다. See the Pen transition options by rgy0409 (@rgy0409) on CodeP..
키보드의 배열에 대한 내용입니다. 보통 PC를 포맷하고나서 윈도우를 설치하는 과정에서 키보드에 대한 선택 화면이 나옵니다. 여기에서는 연결된 키보드의 종류에 따라 자동으로 윈도우에서 알맞는 배열로 골라서 선택되게 됩니다. 과연 이 배열은 어떤 차이가 있는지 알아보겠습니다. 103/106키 키보드 이 키보드는 한영전환 키가 키보드에 독립적으로 따로 배치된 키보드를 말합니다. 소프트웨어적으로 나뉜게 아닌, 완전 물리적으로 떨어진 단 하나의 키를 의미합니다. 요즘 나오는 키보드는 대부분 Alt키와 한/영 키가 합쳐져 나오는데, 옛날 키보드들 대부분은 한영전환버튼이 따로 있습니다. 이 키보드가 바로 103/106 키 배열 입니다. 위의 사진이 바로 그 키보드 입니다. 101키 키보드 한영 전환 키와 오른쪽 Al..
게임을 하다가, 혹은 저처럼 블로그 글을 작성하려 하다가, 기타 여러 문서들을 작성하려 할 때 어느날 갑자기 한글 입력이 되지 않는 경우를 체험하신 분들이 생각보다 많습니다. 원인이 무엇인지 정확하게는 답변드리기가 어렵겠으나, 가장 흔한 경우는 최근 설치한 프로그램이 원인일수도 있습니다. 다음으로는 흔하디 흔한 악성코드나 바이러스로 인한 윈도우 레지스트리 손상입니다. 어찌되었듯 지금은 결과인 한영전환이 안 되는 문제를 해결하는게 급하니 바로 방법을 알아보겠습니다. 한글 관련된 하드웨어 키보드가 두 개 이상 세팅된 경우먼저 불필요한 하드웨어 키보드가 윈도우에 등록되어 있는 경우가 있을 수 있습니다. 이런 경우는 차후에 추가된 새로운 키보드를 제거만 해주시면 해결됩니다. 잘 되다가 어느날 갑자기 안되는 경우..
오늘은 CSS3와 간단한 자바스크립트를 활용해서 전체화면으로 나타나게 되는 팝업창 출력에 대해서 배워보았습니다. 조금 복잡하긴한데 이해하고 나니까 어떻게 돌아가는지 좀 알 것 같습니다. 먼저 HTML 부분부터 살펴보겠습니다. See the Pen jQuery : Click Event (Full PopUp) by rgy0409 (@rgy0409) on CodePen. HTML과 CSS 버튼을 누르면 마크업 상태 확인이 가능합니다. 본문의 내용을 보시면 크게 두 가지의 div가 존재합니다. 하나는 팝업창이며 다른 하나는 이 팝업창을 띄울 버튼 역할을 하는 div 입니다. 그러면 CSS 스타일시트도 살펴보시기 바랍니다. CSS에서는 id 값이 popup인 div의 속성을 살펴보시면 화면 전체화면에 대한 팝업이..
여러분들께서 직접 촬영하신 사진이나 다운받은 이미지에 안개 효과를 만드는 포토샵 강좌 입니다. 어렵지 않습니다. 금방 할 수 있습니다. 저는 포토샵 버전이 CS6 입니다. 참고하시기 바랍니다. 먼저 사진을 불러옵니다. 새 레이어를 하나 만듭니다. Filter > Rander > Clouds 로 들어갑니다. 그러면 방금 만든 새 레이어에 이렇게 구름 효과가 생성됩니다. Ctrl + F를 계속 누르시면 스타일이 조금씩 바뀝니다. 이제 채널 탭으로 갑니다. 여기에서 Blue 채널을 선택합니다. 블루채널을 복사해서 알파채널을 하나 생성합니다. 방금 만든 알파채널을 선택하시고 Ctrl + L 을 눌러서 레벨을 변경합니다. 어두운 부분은 더 어둡게, 밝은 부분은 더 밝게 만듭니다. 저 빨간색 표시 부분을 옮기시면 ..
이번이 몇 번째 구매인지 모르겠습니다. 한 다섯번쯤은 되는 것 같군요. 그전에 사용했던 케이블은 JCO 제품 이었습니다. 케이블에 JCO라고 적혀있었거든요. 아무튼 이 케이블의 신뢰도는 이제 바닥났습니다. 두 번 이상 구매했던 제품인데, 모두 같은 증상으로 고장이 났습니다. 고속충전이 아예 먹통이 되는 현상이었습니다. 아마 제품 설계 미스가 아닐까 싶습니다. 그래서 다음으로 구매한게 바로 이 케이블 입니다. 이렇게 생긴 케이블 입니다. 길이는 약 1M 입니다. 가격은 오늘자 기준으로 3천원 이구요, 위에 보시면 세가지 기능이 핵심으로 표시가 되어있는 케이블 제품 입니다. 데이터 & 충전, 그리고 고속충전, C타입 이라는 것 입니다. 보니까 이거랑 비슷한 스타일의 케이블이 재법 있는데요, 이 제품은 케이블..
알뜰폰 신경을 안쓰고 있다가 오랜만에 헬로모바일 홈페이지에 들어가보니까 또다시 이벤트를 하고 있었습니다. 무제한 요금제가 다시 컴백했습니다! 저 역시 헬로모바일을 잘 사용 중 이고 한달에 약 17,000원 금액을 납부하고 문자, 데이터, 통화를 완전 무제한으로 사용하고 있습니다. 이 사실을 주변 사람들에게 말해줘도 잘 믿지도 않거니와 통화품질이 후졌다거나 데이터 속도가 느린거 아니냐고 의심합니다. (쯧쯧) 헬로모바일은 SK망과 KT망으로 통신사업을 하는 NVMO 알뜰폰 회사입니다. CJ에서 서비스하는 것이기에 의심의 여지는 눈 녹듯 사라집니다. 우리나라 3대 통신사만 있는것이 아닌, 중소기업의 통신사도 생각보다 많습니다. 어차피 대기업망을 빌리기 때문에 품질 부분에서는 크게 걱정하시지 않으셔도 됩니다. ..
아이허브에서 현재 2018년도 블랙프라이데이 행사를 진행하고 있습니다. 이 할인에 대한 쿠폰코드는 어제 한번 공지를 했는데, 우측 사이드바에 보시면 (모바일에서는 본문 아래 사이드바) 아이허브 코드만 따로 묶어둔 모듈이 있습니다. 그곳에 늘 최신 할인정보를 업데이트 하고 있으니 앞으로는 언제든지 아이허브 모듈을 실시간 확인하시면 되십니다. 저는 깜박하고 블랙프라이데이 생각을 하지 못해서 약 일주일전에 구매를 하고 말았습니다. (원통) 2018 아이허브 블랙프라이데이 할인 프로모션 코드인 BLACK 을 사용하시면 11% 더 할인받을 수 있습니다. 여기에 늘 사용 가능한 SSF5774 까지 합세하여 총 16%를 할인 받을 수 있습니다. 그리고 같은 상품을 2개 이상 구매 시 추가 할인까지 더해집니다. 그리고..
섬유향수는 말 그대로 우리가 입는 옷들에서 나는 케케묵은 냄새들을 제거할 때 사용하는 제품 입니다. 그야말로 이름 그대로 섬유를 위한 향수죠. 물론 이것은 임시적인 것으로 냄새를 확실히 제거하려면 빨래라던지 드라이크리닝을 맡겨야 합니다. 어디까지나 임시 방편 입니다. 섬유탈취로 유명한 페X리즈 제품도 비슷합니다. 냄새를 확실히 없애는건 빨래 뿐!!! 그리고 꼭 섬유유연제를 첨가해서 아주 향기롭게 만들어 줍시다. 특히 남성분들 중 좀 자기가 냄새난다고 생각이 되면 좀 노력을 해서 없애주세요. 비 오는날 버스타면 왜케 캐캐묵은 냄새가 많이 나는거냐... 특히 대전에 사는 남성분들 진짜 좀 신경좀 씁시다. 아오 내가 다 민망합니다. 그런 냄새를 풍기고도 어찌 공공장소를 이용할 수 있는건지 진짜 간이 배 밖으로..
안녕하세요! 오랜만에 아이허브 관련 글 입니다. 제가 새로운 티스토리 사이드바 모듈을 만들었습니다. 현재 이 블로그의 오른쪽에 보시면 (PC기준) 사이드바에 아이허브 모듈이 눈에 들어오실 것입니다. 그곳에 사용 가능한 쿠폰들을 올려놨습니다. 또한 자동으로 쿠폰 할인코드가 적용된 링크를 넣어두었기에 일일히 쿠폰 입력하기가 귀찮다면 클릭 한번으로 바로 이동하시어 할인혜택을 받으시게끔 만들었습니다. 만약 할인이 적용 안 된다면, 번거로우시더라도 수동 입력을 하시면 됩니다. 개인 고유코드 하나와 이벤트가 새로 진행되면 생성되는 프로모션 코드 이렇게 보통 두개를 사용하시면 됩니다. 신규코드 할인쿠폰과 이벤트용 프로모션 코드와의 중복 사용은 적용되지 않습니다. 신규 쿠폰과 이벤트 쿠폰 중, 할인율이 가장 높은 쿠폰..
여친님께서 좋은 선물을 주셨습니다. 마침 아이패드용 케이블이 하나 더 필요했었는데 딱 그걸 용케도 알아채시고 바로 사주셨습니다. 제품 브랜드는 저도 이번에 처음 알게 된 베이스어스 라는 회사 제품입니다. 마감처리도 훌륭하고, 가격도 괜찮습니다. 특히나 애플 악세서리는 비싸기로 유명한데다 지들이 판매하는 정품이 아니면 인식도 잘 안되는게 많은데요, 이 케이블을 얻은 시점으로부터 아이패드 소프트웨어 업데이트가 총 두 번 정도 진행 되었습니다. 업데이트 되면서 저렴한 케이블들은 인식이 안 되는 제품이 많은데 여기 제품은 인식도 잘 되고 충전도 잘 됩니다. 여친느님께서 본인꺼 구매하시면서 겸사겸사 같이 구매를 한 것이랍니다. 이건 여친꺼 케이블 이구요 제껀 빨간 레드 입니다. 보라색도 이쁘네요. 8핀 라이팅 케..
데스티니 가디언즈를 열심히 플레이 하고 있습니다. 가끔 한글이 입력이 안되는 경우가 있을때가 있는데 예전에 GTA5 때, 한글이 입력 안되던 원인과 비슷하지 않을까 싶어서 해보니까 역시 같은 이유였습니다. 토치라이트2 한글 입력 안되는 이유도 이와 같은 맥락입니다. 아무래도 외국계 게임이다보니, 국내로 오면서 키보드 버그가 발생하는 듯 합니다. 원인은 바로 한글과 관련된 키보드가 2개 이상 설치가 되어 있어서 서로 충돌이 나서 그런 것 같습니다. 실제로 제 컴퓨터는 한글 2018을 설치하고 나니까 한국어 키보드가 두개가 되었고 하나는 우리가 잘 아는 Microsoft 입력기 키보드와, 또 다른 하나는 한컴 입력기 라고 하는 키보드가 세팅되어 있었습니다. 이제 원인을 알았으니 해결방법은 간단합니다. 한컴 ..
광축은 말 그대로 축이 광(빛)으로 이루어지기 때문에 물에 강하다고 많이 마케팅을 하곤 합니다. 그래서 물세척을 해도 상관 없을 것이라고 생각하는데 이것은 절대 잘못 된 생각 입니다. 이유요? 간단합니다. 축은 광일지 몰라도 이것들이 연결된 PCB 회로는 과거나 지금이나 그대로니까요. 게다가 키보드 자체적으로 IPX8 등급을 받은것이 아니므로 절대로 물로 세척하는건 어리석은 일 입니다. 하물며 IP등급중 높은 등급을 받은 제품이라도 실제로 수영장에서 사용한다거나 일부러 물 속에서 사용하시는 분들은 없을 겁니다. 어디까지나 생활 방수 개념으로만 이용하셔야 한다는 것! 잊지 마세요. 전자제품은 물에 취약합니다. 이번에 키보드를 바꿨습니다. 이미 보신분도 계시겠지만 기어베스트에서 협찬받은 DURGOD K320..
개인적으로 앱코 제품에 대한 품질 만족도는 절반에 살짝 못 미치는 수준 입니다. 키보드때도 그랬고 이번 마우스 역시 실망을 안겨 줍니다. 싼맛에 사용하는 제품이라고는 하지만, 차라리 가격을 좀 더 내더라도 품질 좋은 제품을 사용하는게 정신건강에 더 이로울 듯 합니다. 소비자들의 최종 목적은 만족을 하느냐, 못 하느냐 부분까지 이어지니까요. 요즘 게이밍 마우스는 DPI도 준수하고 포인터의 정확도도 좋아서 일반 사무용으로도 게이밍 마우스를 사용하시는 분들이 늘고 있습니다. 저 역시 게임을 자주하는건 아니지만 이러한 이유로 이번에 마우스를 과감히 변경했습니다. 마우스에도 칩이 들어가는데 그 중 PMW3360 시리즈는 훌륭한 감도를 자랑합니다. 이 녀석이 탑재된 마우스는 대부분 비싼 편 입니다. (현재 날짜 기..
아 이거 간만에 물건입니다. 음악을 엄청 좋아하는편은 아니지만, 그래도 이따금씩 이어폰으로 듣곤 합니다. 꼴에 좋은 음질로 듣고 싶어서 기어베스트에서 그동안 이어폰에 대해서 이것저것 많은 리뷰를 해오고 있습니다. 꾸준히 제 블로그를 구독하시는 분들은 아마 아실꺼에요. 유선 이어폰, 무선 이어폰, 헤드폰 등등을 리뷰해오고 있었다는 사실을 말입니다. 드디어 마음에 드는 완전 무선 이어폰을 찾았습니다. 제목에도 나와있듯 메이쥬 (MEIZU) 사에서 출시한 POP 이라고 하는 제품 입니다. 삼성의 아이콘X와 같이 완벽한 코드프리 TWS 방식의 이어폰 입니다. TWS에 대해서는 아래의 글을 참고하시면 도움이 될 것입니다. TWS 블루투스 무선 이어폰 뜻은? 참고글을 보시면 다른 중소기업에서도 TWS 타입의 무선이..
드디어 이 키보드를 써보게 되네요. 그동안 벼르고 벼뤄왔던 바로 그 키보드 입니다. 텐키리스 키보드를 소개합니다. 회사 브랜드냐고요? 아닙니다. 키배열에 따라 부르는 명칭 중 하나입니다. 아주 일반적으로 사무실이나 PC방에서 사용하는 키보드가 104키 혹은 108키 배열인 풀(Full) 배열 키보드 입니다. 그리고 오늘 소개해드릴 키보드는 텐키리스 (TenKeyless) 키보드로, 키 개수는 80~90개 전후로 왔다 갔다 하는 모델을 일컫습니다. 딱 보시면 아실 것입니다. 이번 상품 역시 기어베스트에서 후원을 받아서 사용했음을 밝힙니다. 좋으면 좋다고 하고, 별로면 별로라고 솔직하게 말씀드리고 있습니다. 이 글을 보시고 누군가는 구매하실텐데 해당 구매자가 어차피 써보면 다 알것을 제가 굳이 속일 이유가 ..
이 블로그에는 10대 여러분들도 재법 많이 들어오는걸로 알고 있습니다. 어제가 수능시험이었죠? 어려웠다는 기사를 접했습니다. 아무튼 대단히 수고가 많았습니다. 이제 조금이나마 스트레스를 풀어버리고 평소 해보고싶었던것들, 하나씩 해보시기를 바랍니다. 저 역시 고3 시절이 있었고 (까마득하네요) 수능시험을 본 경험이 있습니다. 하지만 여러분들에게 감히 말씀드리고 싶습니다. 절대로 인생의 기준에 있어서 수능의 영향은 생각보다 그리 크지 않다는 것을 말입니다. 물론 제가 수능을 겁나 잘 봤다면 또 모르겠지만 수능을 잘 본 친구들도 지금 살펴보면 크게 다를바가 없습니다. 저는 그냥 중간정도의 성적을 보유했던 학생입니다. 문과/이과 개념도 모르고 친구들이 다 이과가니까 그냥 무작정 따라간 케이스죠. 간혹 수능시험을..
html과 CSS에서 게시판 목록에 대해서 만들고자 할 때, table 태그 요소를 활용해서 만들곤 합니다. 그리고 ul, li 요소로도 얼마든지 꾸밀 수 있습니다. 여기에서는 li를 활용하여 테이블을 구성해 보겠습니다. 먼저 아래의 완성된 모습을 참고해 주시기 바랍니다. 이렇게 완성 됩니다. 그러면 본문 내용과 CSS 스타일 상태를 한번 살펴보겠습니다. 먼저 HTML body 영역 안의 마크업 상태입니다. 공지사항 내용날짜 아무거라도 좋으니 내용을 입력하세요!!!2018-10-24 아무거라도 좋으니 내용을 입력하세요!!!2018-10-24 아무거라도 좋으니 내용을 입력하세요!!!2018-10-24 아무거라도 좋으니 내용을 입력하세요!!!2018-10-24 아무거라도 좋으니 내용을 입력하세요!!!2018..
지난 시간에 이어서 오늘은 그 응용편으로 3단 메뉴를 구성해 보겠습니다. 2단 메뉴에서 한단계 더 깊은 형태이기 때문에 크게 어렵지는 않을 것 입니다. 3단 메뉴이므로 ul 태그가 총 3개 들어갑니다. 어떤 식으로 들어가는지 살펴보시겠습니다. 어떤 메뉴인지 잘 감이 안 오시면 아래의 예시를 먼저 살펴봅시다. 이것이 메인 메뉴가 가로형태인 3단 메뉴 구성의 예시 입니다. 어떤 형태인지 아시겠죠? 그러면 먼저 html 마크업 상태를 살펴보겠습니다. 메뉴1 소메뉴1 소메뉴2 2단소메뉴1 2단소메뉴2 2단소메뉴3 소메뉴3 2단소메뉴4 2단소메뉴5 2단소메뉴6 메뉴2 소메뉴1 2단소메뉴7 2단소메뉴8 2단소메뉴9 소메뉴2 2단소메뉴10 2단소메뉴11 2단소메뉴12 소메뉴3 2단소메뉴13 2단소메뉴14 2단소메뉴1..
안녕하세요! 오랜만에 현재 근황에 대해서 알려드리기 위해 글을 작성하려고 합니다. 먼저 여러분들의 관심과 사랑에 힘입어 책이 생각보다 많이 판매가 되고 있는 듯 합니다. 책을 검색해보면 꽤 많은 분들이 리뷰를 작성해 주셨네요. 정말 감사합니다. 몸둘바를 모르겠습니다! 이것을 발판삼아 앞으로 더욱 도약하는 그런 블로거가 되고 싶습니다. 현재 티스토리 반응형 스킨은 레이아웃 구상 중 입니다. 사실 레이아웃은 쉽게 하는데 문제는, 각 치환자마다 스타일을 만들어 주는 부분이 가장 걸립니다. 이 부분은 티스토리 공식 블로그에서도 제대로 설명이 되어 있지 않아서 좀 난감한 부분입니다. 아니면 제가 아직은 못알아먹는 것일수도 있으니, 열심히 틈나는대로 배우고 적용시킬 예정 입니다. 친절한효자손 반응형 스킨의 방향에 ..
기어베스트로부터 리뷰 후원을 받은 제품 입니다. 사실 전부터 원했던 제품인지라 더욱 기쁘기 그지없습니다. VR 헤드셋을 그동안 다운타운에 있는 멀티놀이터 같은 공간에서나 사용해봤지, 개인적으로 다룬적은 한번도 없었기 때문이죠. 이번 기회에 정말 제대로 즐겨봤습니다. 아~ 정말이지 이것은 진짜 신세계 입니다. 하지만 문제는 언어입니다. 일단 중국 직구 상품이기 때문에 모두 중국어로 나옵니다. 한문이 한가득이죠. 최소한 영어로 나올 줄 알았건만... 거기에 설정 부분에 언어변경이 없습니다. 이 부분은 차후에 어떤 능력자께서 아예 롬파일을 한국어 패치해서 배포하시지 않는한 어려울 듯 싶습니다. 다른 하나의 문제는 결제 입니다. 제가 가장 재밌어 보이는 게임이 하나 있는데, 이게 유료에요. 결제를 하려면 엔화로..
기어베스트에서 이번에는 정말 저렴한 블루투스 이어폰을 발견했습니다. 호기심이 발동한 저는 참지 못하고 리뷰 신청을 하고 말았습니다. 그리고 마침내 제품을 받고 바로 스마트폰과 연동 후 감상해봤습니다. 그리고 깨달았습니다. 그렇습니다! 절대로 싸구려는 구매해서는 안 된다는 것 입니다. 음질이 너무 구립니다. 그냥 딱 애들 갖고 놀기 좋은 장난감 수준 입니다. 그 어떤 제품이든지 비쌀수록 좋다는건 불변의 법칙 같습니다. 예외도 물론 있겠지만 이 녀석은 아닙니다. 이제 절대로 싼 이어폰은 제 인생에서 제외시키도록 하겠습니다. 이 포장 상태를 보세요. 네 그렇습니다. 어디서 꺼낸게 아닙니다. 이게 딱 처음 받아본 상태 그대로의 모습 입니다. 아무래도 벌크 형태로 나오는 것 같은데... 포장값까지 아껴서 가격을 ..
제가 머무는 방에서 사용하는 삼성 미니 핸드청소기의 수명이 다 된 것 같습니다. 흡입력도 떨어지고 무엇보다도 한번 완충해도 오래 가지 않습니다. 금방 시들시들 한 것이... 간신히 목숨만 유지하고 있는 것 같습니다. 그래서 청소기가 하나 필요했습니다. 이미 대륙의 다이슨 청소기라 불리우는 "디베아 청소기" 가 집에 있습니다만, 일단 길게 늘 고정된 형태이므로 가볍게 사용하기가 부적합 합니다. (한번 날 잡고 대청소를 해야 하는 용도로 쓰고 있음) 저는 자주 사용할 수 있는 작은 청소기를 원했고 마침 기어베스트에서 적당한 무선청소기를 발견해서 바로 리뷰를 신청했습니다. 그리고 마침내 지난달에 받았고 거의 한달정도 사용해본 소감을 간략하게 해보겠습니다. 가벼운 핸디형 무선청소기로 알고 신청한건데 막상 받아보..
오늘은 11월 11일 입니다. 한국에서는 롯데의 상술에 넘어가서 빼빼로데이라고 불리우는 날이죠. 빼빼로 매출이 급상승하는 날 입니다. 더구나 일요일인 주말과 겹쳤기 때문에 매출은 더욱 치솟을 전망입니다. 한국은 그렇다치고, 중국은 IT명절이라고 불리우는 날이 오늘입니다. 광군절(광군제) 이라고 하는 날 인데요, 처음 들어보시는 분들도 계실 것입니다. 블랙프라이데이(Black Friday) 라고 하시면 아하! 하고 한방에 이해가 되실 것입니다. 그렇습니다. IT할인이 대폭 있는 날 입니다. ▲기어베스트 11월 11일 광군제 할인 페이지 같이 운영하고 있는 기어베스트에서도 현재 다양한 제품들이 할인 진행 중 입니다. 최근에도 이 기어베스트 할인에 대해서 언급한 바 있는데, 평소랑 블랙프라이데이랑 가격차이가 ..
포토샵에서 자주 사용하는 클리핑 마스크에 대한 사용 방법 입니다. 복잡하지 않습니다. 포토샵에서는 자주 사용하는 기능에 대해서는 사용이 간편하게 되어 있는 편 입니다. 클리핑 마스크는 어떤 오브젝트의 형태 위에서만 두번째 이미지가 보여지도록 만드는 기능입니다. 말로는 설명이 어려우니까 직접 한번 보시겠습니다. 먼저 새 이미지를 만듭니다. 저는 A4 사이즈로 만들었습니다. 그리고 이미지를 하나 아무거나 불러옵니다. 저는 그냥 이렇게 드래그해서 불러오는 방식을 자주 사용합니다. 그리고 원하는만큼 이미지를 키워줍니다. 보통 클리핑 마스크를 사용함에 있어서, 쉐이프 툴을 많이 이용하는 편 입니다. 이번에는 모서리가 둥근 Rounded Rectangle Tool 을 사용해서 진행하겠습니다. 해당 툴을 선택해 주세..
지난 시간까지 드롭다운 메뉴 구성하는 방법에 대해 알아봤습니다. 오늘은 2단 메뉴가 한꺼번에 나오는 방법에 대해서 어떻게 진행하는지에 대해 알아볼 것입니다. 무슨 뜻이냐면, 1단 li 에 마우스를 오버하면 해당 li 의 메뉴에 대한 또 하나의 2단 ul li 가 나타나게 됩니다. 예를 들자면 아래와 같은 경우 입니다. 이해 되시나요? 이런 경우 입니다. 아마 이와같은 홈페이지 메뉴 구성은 심심찮게 보셨을 것입니다. 그러면 어떻게 구현되는지 살펴보도록 하겠습니다. 모바일에서 보시는 분들도 계실 수 있으니, 최대한 이미지가 선명하게 보일 수 있도록 세로로 배치하겠습니다. 참고로 이번 강좌를 이해하기 위해서는 먼저 1단 메뉴부터 구상하는 방법에 대해서 학습하시면 좋습니다. 해당 내용을 아래에 올려두겠으니 먼저..
지난 시간에 이어서 이번에는 2단계 메뉴를 만드는 방법입니다. 이전시간에 만들었던 메뉴를 그대로 활용해서 진행합니다. 따라서 이번 강좌를 이해하시는데 있어서 전 시간의 가로 형태의 1단 메뉴를 먼저 익히시고 이 글을 보시는것이 도움이 됩니다. 빠르게 참고하시라고 아래에 관련글을 남기도록 하겠습니다. CSS ul li 사용하여 가로형 1단 메뉴 리스트 만들기 형태는 이렇습니다. 먼저 1단 메뉴는 가로 형태이고, 마우스를 올렸을 때, 세로 형태로 2단 리스트가 나오게 만드는 방법입니다. 조금 복잡하겠지만 원리만 이해하면 크게 어려운 부분은 없습니다. 그럼 한번 살펴보겠습니다. 먼저 HTML 마크업 상태 입니다. 보시면 li 안쪽에 다시한번 ul이 자리잡고 있는 것을 알 수 있습니다. 그리고 1단 ul 과 2..