제목이 좀 매끄럽지 못한데, 이렇게 검색들을 많이 하실까봐서 정해봤습니다. 저 역시 이 방법을 찾으려고 무수히 많은 검색들을 했었습니다. 결국 답을 찾았고 저처럼 고생하시지 마시라고 깔끔하게 정리해서 올려보겠습니다. 구글 메인화면을 가보시면 구글 로고와 함께 바로 아래에 검색창이 있습니다. 그리고 검색창에는 "Google 검색 또는 URL 입력" 이라고 글씨가 표시되어 있습니다. 여기를 클릭하면 이 글씨가 사라집니다. 그리고 검색창을 제외한 바탕 아무곳에나 클릭을 하면 다시 이 글씨가 생성됩니다. 어떻게 처리를 하는 걸까요? 자바스크립트에서 처리를 하기도 하지만, 일단 저는 스크립트와 별로 친하지 않아서 이 방법까지는 모르구요, HTML5에서 새로 추가된 기능만으로도 구현할 수 있습니다. 먼저 아래의 예..
스크립트 중 하나인 제이쿼리의 이벤트 중에 마우스와 관련된 내용입니다. 보통 마우스를 올리고 뺄 때 마우스오버(mouseover), 마우스아웃(mouseout)을 사용한다고 배웠습니다. 이와 비슷한 메서드 중에서 마우스엔터(mouseenter)와 마우스리브(mouseleave)가 있는데, 이 두가지의 차이점을 알아보도록 하겠습니다. 먼저 결론부터 말씀드리자면, 자식 요소들까지 영향을 주느냐 안 주느냐의 차이 입니다. 깊이의 차이라고 할 수 있습니다. 마우스가 올라가지는 영역이 지정된 요소 혹은 자신에게만 한정되게 할 것인지, 아니면 자식요소들까지 영역을 확장할 것인지에 대한 차이라고 이해하시면 좋을 것 같습니다. MouseOver/Out : 지정된 태그 요소(혹은 자신)는 물론이며, 자식 요소가 있다면 ..
가끔 티스토리 본문을 작성하다가 꼭 중요한 내용을 작성할때가 있습니다. 가령 주의사항이 대표적인 텍스트라고 할 수 있습니다. 가독성을 올리고 좀 더 강조하고자 할 때, 티스토리에 있는 글상자 기능을 활용해서 작성하곤 합니다. 하지만 너무 밋밋한데다 많은 사람들이 쉽게 사용하는 방법입니다. 그래서 저만의 친효팁박스를 만들어 봤습니다. 아래는 그 예시 입니다. TIP 한줄일 경우에도 텍스트가 세로 상태로 중앙정렬이 됩니다. TIP 계속 텍스트를 작성하셔도 세로 중앙정렬이 지속됩니다. 텍스트를 채워갈수록 중앙에서부터 계속해서 세로 중앙정렬이 진행됩니다. TIP 계속 텍스트를 작성하셔도 세로 중앙정렬이 지속됩니다. 텍스트를 채워갈수록 중앙에서부터 계속해서 세로 중앙정렬이 진행됩니다. 이렇게 계속해서 본문을 채워..
브라우저의 창 크기와 상관 없이, 정 가운데 div를 위치하는 방법에 대해서는 지난시간에 말씀드린바 있습니다. 오늘은 div를 하나 생성하고, 그 안에 div를 하나 더 만들어서 정가운데로 위치하는 방법을 알아보겠습니다. 제가 사용하는 방법은 position 요소를 이용하는 것 입니다. 여기에 transform 요소까지 사용하면 가장 밖에 있는 div의 가로 세로 크기에 상관 없이, 또한 가운데 배치되는 div의 가로 세로 크기에 상관 없이 무조건 정중앙에 위치하도록 만들 수 있습니다. 그 예시가 아래에 있습니다. See the Pen CSS3: DIV in DIV Center (Middle) Align by rgy0409 (@rgy0409) on CodePen. 스크롤해서 하나하나 살펴보시기 바랍니다...
이번에 기어베스트로부터 후원을 받은 노트북임을 밝합니다. 허나 사용 후기는 매우 솔직하게 작성하는 바 입니다. 이 노트북은 한마디로 딱! 레포트 제출용 입니다. 그 이상은 힘듭니다. 웹서핑은 차라리 스마트폰으로 하시는게 정신건강에 이로울 것 입니다. 최대 장점은 가볍다는 것! 아무래도 크기가 작으니까요. 무게가 그만큼 덜 나갈 수 밖에 없습니다. 그 외의 장점은 솔직히 찾아보기가 힘듭니다. 조금 기대했었는데... 생각보다 너무 느리네요. 아톰 프로세서가 아무리 발달해봐야 역시 아톰은 아톰인 듯 합니다. 여기에서는 뭐 파이어 스트라이크 점수가 어쩌구, 내부 하드웨어 점수가 어쩌니 저쩌니... 이런건 무의미하다고 봅니다. 제가 테스트해본건 정말 단순합니다. 완전 순정 상태에서의 인터넷 체감속도, 여러 문서열..
이전에 전체메뉴에 대해서 한번 글을 작성한 바 있습니다. 그것보다 좀 더 간단하게 꾸밀 수 있는 방식 입니다. 스크립트 필요없이 CSS만으로도 아코디언 스타일의 메뉴를 구현할 수 있습니다. 선택자만 조금 주의해서 생각하면 생각보다 코딩을 짜는데 큰 어려움은 없습니다. MENU-1 MENU-2 MENU-3 MENU-4 MENU-5 SubMENU-1 SubMENU-2 SubMENU-3 SubMENU-4 SubMENU-5 SubMENU-6 SubMENU-7 SubMENU-8 SubMENU-9 SubMENU-10 SubMENU-11 SubMENU-12 SubMENU-13 SubMENU-14 SubMENU-15 SubMENU-16 SubMENU-17 SubMENU-18 SubMENU-19 SubMENU-20 HT..
앱코 A660을 완전 저렴한 가격에 팔아버리고 로지텍 G Pro 게이밍 마우스로 환승한지 어언 한달이 훌쩍 넘어갑니다. 만족스럽냐고요? 너무요! 역시 마우스의 명가다운 제품 퀄리티를 자랑합니다. 고주파음도 들리지 않습니다. 아니 대체 앱코는 마우스를 어떻게 만들었길래 고주파음을 하나 못 잡니?! 이제 앱코 제품도 제 블랙리스트에 넣도록 하겠습니다. 기가바이트 다음으로 입력된 두번째 회사가 되었습니다. 클릭감도도 좋고, 무엇보다도 고주파음이 들리지 않아서 좋습니다. 그립감은 말할것도 없습니다. 훌륭 그 자체입니다. 특히나 G pro에 들어간 PMW3366 센서는 로지텍사에서 제대로 살린 센서라고 할 수 있습니다. 커뮤니티에서는 PMW3360의 튜닝 버전이라고 하는데 그 말이 딱 맞는 듯 합니다. 이 영롱한..
제 블로그를 살펴보시면, 관련글 부분이 어느 순간부터 다른 디자인으로 이루어져 있다는걸 확인하실 수 있습니다. 아직 잘 모르시겠으면 여기를 방문하셔서 관련글들의 디자인을 살펴보실 수 있습니다. 다른 블로그와의 차별성을 두기 위해, 혹은 좀 더 개성넘치지만 과하지 않은 디자인을 생각하다보니 이렇게 구성을 해 봤습니다. 관련글 마크1 사용방법 1. 먼저 본 페이지에서 제공하는 첨부파일을 다운로드 받습니다. 2. 첨부파일 안에 있는 CSS 내용을 자신의 티스토리 스킨의 CSS에 붙여넣기를 합니다. 3. 글 작성시, 수동으로 div로 감싸줍니다. 크게 이 세가지로 진행됩니다. 2번까지는 쉽습니다. 3번에서는 좀 더 추가설명을 드리도록 하겠습니다. HTML 안쪽에 폰트어썸 CDN 세팅하기 아이콘 세팅을 위한 단계..
현재 일부 스타일을 변경해서 적용하고 있습니다. 스킨은 현재 순조롭게 완성되어가고 있습니다. 그 중에서 당장 사용 가능한 몇가지들을 공유하려고 합니다. 현재 친효스킨은 부분별로 업그레이드가 가능한 파츠형 스킨으로 개발 중 입니다. 누구라도 쉽게 커스터마이징 해서 사용하기 편리한 그런 스킨으로 완성하는데 목표를 두고 있습니다. 티스토리에서 기본적으로 제공하는 첨부파일 스타일이 뭔지 아시죠? 상당히 촌스럽습니다. 그리고 눈에 잘 띄지도 않습니다. 개인적으로 두번째 문제가 가장 심각하다고 생각합니다. 첨부파일이 어디에있나 한참을 찾을 이유가 없습니다. 누가봐도 "아, 이게 첨부파일이군!" 싶어야 합니다. 이게 기존 티스토리 첨부파일 디자인 입니다. 눈에 잘 안띕니다. 이것을 수정하려면 CSS 내부에서 클래스값..
이번 시간에는 다양한 백그라운드 그라데이션 속성에 대해 알아보겠습니다. 백그라운드는 절대컬러값을 사용하거나 16진수를 사용하여 단색으로 표현하는것이 흔하지만, HTML과 CSS의 버전이 올라가면서 다양한 그라데이션 방법이 적용되고 있습니다. 하지만 아직은 브라우저마다 서로 엔진이 약간씩은 차이가 있어서 호환성을 위해서 밴딩 프리픽스를 사용해서 표현해야 하는 부분도 있습니다. 절대적으로 사용해야 하는건 아니지만, 그래도 사용자가 어떤 브라우저로 접속하는지를 모르기에 다양한 브라우저에서 오류 없이 표현되게 하기 위해서는 꼭 필요합니다. 이와 관련된 내용은 본문 아래에 있는 참고글을 활용하시기를 바랍니다. -webkit- linear -webkit- radial To Right To Bottom To Righ..
CSS3를 배우면서 또 하나 알게된 사실이 있습니다. 바로 "호환성"에 대한 부분입니다. 컴퓨터 하드웨어도 소위 말하는 궁합이라는게 있습니다. 어떤 제품끼리는 잘 맞고, 또 어떤 제품끼리는 극과 극이라는 평가가 있지요. 웹 언어의 세계도 비슷한 상황이 존재합니다. 아시다시피 브라우저의 종류가 생각보다 많습니다. 현재 국내에서는 마이크로소프트 인터넷 익스플로러를 가장 많이 사용하는 브라우저이며 그 뒤를 구글 크롬이 바짝 추격하고 있습니다. 이밖에도 오페라, 파이어폭스, 사파리 등등이 있습니다. 웹언어란 말 그대로 웹페이지를 구성할 때 사용되어지는 프로그래밍 언어입니다. 브라우저 또한 이 웹언어의 영향을 많이 받는데, 버전에 따라서 또는 위에서 언급한 브라우저 프로그램에 따라서 약간씩 차이가 있습니다. 지금..
엊그제죠? 티스토리 업데이트가 또 한차례 있었습니다. 로그인이 안 되길래 뭔일인가 싶더니 알고보니 업데이트 하려고 잠시 서버를 막아둔 것이었습니다. 꾸준히 노력하는 티스토리여서 더욱 보기 좋습니다. 그런데 업데이트 이후에 많은 분들이 통계가 이상하다고 여기저기서 피드백의 목소리가 흘러나오고 있습니다. 우선 첫번째로 방문자수가 잘 맞지 않는다는 것 입니다. 그래서 이게 정확한건지에 대한 의문이 듭니다. 저 역시 평소 방문자수 대비 소폭 늘어났습니다. 이게 과연 제대로 된 수치가 맞는건지 의구심이 듭니다. 가장 많은 불만을 표한것은 바로 유입경로 부분입니다. 단순 유입경로가 아닙니다. 어떤 키워드를 통해서 어떤 사이트에서 들어왔는지 꽤 정확하게 표시가 되는 유입경로여서 현재 내 블로그는 어떤 키워드가 인기있..
지금도 여전히 블로그 댓글이라던지 메일로 문의를 주시는 분들이 계십니다. 근데 하나같이 공통된 부분이 바로 애드센스 수익 부분입니다. 어떻게 해야 수익을 올리는지, 방문자가 왜 안오르는지, 광고가 왜 안나오냐라던지요. 우선 광고가 안나오는 문제는 저보다는 애드센스팀에 메일로 문의를 넣으시는게 훨씬 정확합니다. 제가 여러분들의 블로그를 뜯어볼수도 없을뿐더러, 원인은 저도 잘 모르기 때문입니다. 저도 어느날 광고가 안 나오면 애드센스팀에 문의를 넣습니다. 그러니 혹시라도 앞으로 광고 문의를 하신다면 꼭 구글 애드센스팀에 문의를 하시기를 바랍니다. 잠시 딴얘기를 했는데, 오늘의 블로그 썰은 이걸 이야기하고 싶습니다. "내 블로그는 다른 사람들이 공유를 할 만한 가치가 있는 블로그인가?" 라는 것 입니다. 저 ..
오늘은 정말로 유익한 내용을 배웠습니다. CSS 스타일에서 사용할 수 있는 transition 애니메이션에 대한 사용 방법입니다. 전부터 궁금했던 부분이기도했고, 알아두면 분명 멋진 메뉴를 구성할 수 있을 듯 합니다. 참고로 모든 브라우저 버전에서 지원하는 기능은 아닙니다. 익스플로러는 최소 10 버전 이상이어야 하며 기타 크롬이라던지 파이어폭스, 사파리, 오페라의 경우도 일정 버전 이상이어야 합니다. 최신 버전으로 유지하신다면 적용은 항상 됩니다. 우선 간단한 예시를 통해서 알아보도록 하겠습니다. 먼저 html 마크업 상태를 살펴보겠습니다. DIV1DIV2DIV3DIV4DIV5DIV6 div를 총 6개 만들었습니다. 그러면 CSS 스타일 부분도 살펴보겠습니다. /*RESET*/* { margin: 30..
윈도우10 레드스톤4 부터였던가요? 잘 쓰던 시작버튼 오른쪽 마우스 클릭시 나타나는 메뉴중에 "제어판"이 사라졌습니다. 마이크로소프트에서 제어판 기능을 서서히 윈도우의 톱니바퀴 모양인 설정 기능으로 옮겨놓겠다고 발표한 것이 원인 같습니다. 윈도우 95 시절부터 제어판으로 모든것을 통제하던 저로서는 상당히 불편하기 그지 없었습니다. 다시 시작버튼 오른쪽 클릭 메뉴에 제어판을 복원하는 방법이 없을까를 검색해보니, 역시 있었습니다. 방법은 어렵지 않았습니다. 그 옛날 윈도우7 시절에 시작버튼에 여러가지 프로그램을 등록하는 방법과 비슷한 원리였습니다. 바로 한번 적용해 보겠습니다. 키보드의 + R 을 누릅니다. 그러면 위와같은 실행창이 뜹니다. 여기에서 아래의 주소를 입력해 주세요. %LocalAppData%\..
텐키리스를 잘 사용하고 있습니다. 잘 쓰는데 가끔씩 불편할때가 있습니다. 그 옛날 101키 시절에는 키보드에 숫자키패드가 오른쪽에 배치가 되어 있었기 때문에 숫자 입력하기가 참 편리했었습니다. 하지만 텐키리스 키보드를 사용하는 한 이 문제는 영원히 해결될 수 없습니다. 텐키리스 키보드는 숫자키보드 부분이 빠진 작고 아담한 사이즈 입니다. 때문에 숫자키보드만 따로 구매해서 사용하면 이 문제는 해결됩니다. 요전에 다이소에서 구매한 TG 브랜드의 숫자키패드를 간단히 리뷰했던적이 있습니다. 잘 눌리는건 좋은데 너무 가벼웠다는 단점이 있지만 가격이 저렴해서 좋다는 내용을 담았었죠. 이번 22key 기계식 숫자 키보드는 거의 반대라고 보시면 됩니다. 가격이 조금은 비싸서 단점이어도 키감도 훌륭한데다 무게감이 있어서..
이번달은 지출이 장난 아닙니다. 게이밍 모니터도 샀지요, 로지텍 마우스도 7만원짜리 샀지요, 숫자키보드도 구매했고요, USB 확장 브라켓도 구매했고요~ 어림잡아 60~70만원은 나간 것 같습니다. 하지만 IT 장비를 위해서라면 아깝지 않습니다! 앞으로도 사고싶은것들은 다 구매할 예정입니다. 그리고 열심히 리뷰해야죠. 오늘은 정말 득탬이라고 할 수 있는 드라칸 (DRAKAN) 사의 GB-2 라고 하는 마우스 번지대를 소개하려고 합니다. 마우스 번지대에 대해 간략하게 설명부터 드리겠습니다. 무선 마우스가 아닌 유선 마우스에 사용하는 마우스 보조장비로서, 유선 마우스는 무선과 다르게 선이 있습니다. 이 선이 은근히 걸리적 거립니다. 요즘 꼬임 방지다 뭐다, 튼튼하게 만든 선이다 뭐다해서 줄에 의한 마찰이 상당..
올 겨울도 유난히 추울것으로 예상됩니다. 빌라가 옛날에 지어진거라 화장실이 외벽에 붙어있어서 겨울에는 완전 춥습니다. 샤워하려면 큰맘먹고 도전해야 합니다. 너무 추우니까요. 그래서 이번에 화장실용 난방기! 라디에이터를 구매해서 설치했습니다. 라디에이터도 종류가 많고 가격대도 다양합니다. 방식도 두가지 타입입니다. 빨갛게 달아오르는 적외선 방식과 뜨거운 바람이 나오는 히터 방식 이렇게 두가지가 대표적인데, 아무래도 화장실이고 습기들도 많고 해서 적외선 보다는 바람이 낫지 않나 싶어서 히터 방식으로 구매했습니다. 이것저것 알아보고 동생도 찾아보고해서 바툼 BT-3000PHF 라고 하는 제품을 선택하게 되었습니다. 이렇게 생긴 제품입니다. 어제 도착했고 바로 설치 후 하루가 지난 오늘, 바로 후기를 작성하고 ..
수업 시간에 이미지를 활용해서 스플릿 이미지 메뉴 만드는 방법에 대해 배웠습니다. 이 메뉴 구현의 최대 단점은 이미지를 써야 한다는 것이죠. 꼭 이미지를 써야 할까요? 아닙니다. CSS3 스타일로도 얼마든지 구현이 가능합니다. 이미지 없이 태그 요소만으로도 스플릿 메뉴를 만들 수 있습니다. See the Pen CSS3 : Split Menu by rgy0409 (@rgy0409) on CodePen. 먼저 완성된 nav 메뉴 형태를 살펴보시기 바랍니다. 저 메뉴 위에 마우스를 올려다 놓으면 새로운 메뉴2가 위로 올라오는것을 확인하실 수 있습니다. 그러면 HTML 부터 살펴보시겠습니다. MENU1 MENU2 MENU1 MENU2 MENU1 MENU2 MENU1 MENU2 구조는 간단합니다. 다만 li 태..
USB 3.0포트를 더 사용해야해서 추가적으로 별도 브라켓을 구매했습니다. 근데 생각보다 물건이 얼마 없더군요. 끈질긴 검색 끝에 결국 11번가에서 판매하는 OT847 이라고 하는 USB 3.0 전용 20핀 확장가이드를 찾았습니다. 대부분의 메인보드에는 USB3.0 확장핀이 있습니다. 총 20개로 이루어진 이 핀에 맞는 USB 확장가이드를 장착하게되면 총 두개의 USB 3.0 단자를 만들 수 있습니다. 조금 고급진 케이스의 경우는 알아서 두개의 USB 3.0 단자를 제공하지만 저가형 케이스에는 단자가 하나도 없는 경우가 허다합니다. 저의 경우는 딱 1개만 있어서 하나를 사용하면 다른 USB 3.0 장치를 추가 사용할 수 없습니다. 그래서 이번에 확장 브라켓을 구매하기로 마음 먹은 것입니다. 그래야 동시에..
지금은 개인이 온라인으로 활동영역을 넓혀가는 세상입니다. 누구라도 인기 BJ가 되어 수익을 올릴 수 있으며 이렇게 블로그를 운영해서 개인 커리어를 만들수도 있습니다. 자신의 주특기 분야만 있다면 얼마든지 개인기를 발산하여 그에 합당한 수익으로 바꿀 수 있는 샘 입니다. 콘텐츠는 청소년에게 악영향을 미치는 것, 법을 어기는 것만 아니라면 그 어떤것을 해도 상관 없을 것 입니다. 먹방이든, 게임방송이든, 노래든, 웃기는 것이든 뭐든 상관이 없지요. 이제 틀에 얽메인 시대는 갔습니다. 직업이라는 개념이 어느덧 허물어져가고 있습니다. 마찬가지로 교육 부문에서도 활달한 움직임을 보이고 있습니다. 가령 선생님들께서도 온라인으로 활동을 많이 진행하려고 하십니다. 유튜브나 기타 무료 플랫폼을 활용해서 온라인 강사가 되..
오늘 국제공인시험 중 하나인 GTQ (지티큐) 1급 합격자를 발표하는 날 입니다. 학원에 도착 후 오전 10시 이후에 발표가 나온다는것을 확인하고, 10시 이후에 바로 KPC 사이트에 들어가서 확인을 했습니다. 결과는요?! 당연히(?) 합격입니다. 원래 자신있던 시험이기도 해서 당연히 붙겠지라는 안일한 생각을 갖고 있었지면 혹시나가 역시나였나 봅니다. 떡하니 합격했습니다. 그래서 이 글을 지금 기분좋게 작성하고 있습니다. 이 기쁜마음을 만천하에 알리고, GTQ 1급 시험을 보시는 분들에게 조금이나마 도움이 되고자 이렇게 노하우를 공유하려고 합니다. 방금 로그인해서 확인해보니 이렇게 합격처리가 되어 있었습니다. 또한 성적분석 서비스도 제공하고 있습니다. 들어가보겠습니다. 100점 만점 중 84점을 받았군요..
2018년도 11월 24일에 진행한 제 11회 GTQ 1급 시험에 합격했습니다. 직업전문학교 다니면서 뭔가 하나는 기록으로 남기고 싶어서 한번 시험을 봤는데 다행히 잘 붙었습니다. 선생님이 잘 가르쳐주신 덕 입니다. 합격한 노하우라면 노하우겠지만 이 부분은 아래의 글에서 다시 한 번 자세히 다루었으니 관심이 있으시면 한번 읽어보시기 바랍니다. 포토샵 GTQ 1급 자격증 시험 합격 방법 노하우 포토샵 GTQ 1급 자격증 시험 합격 방법 노하우 오늘 국제공인시험 중 하나인 GTQ (지티큐) 1급 합격자를 발표하는 날 입니다. 학원에 도착 후 오전 10시 이후에 발표가 나온다는것을 확인하고, 10시 이후에 바로 KPC 사이트에 들어가서 확인을 했 rgy0409.tistory.com 그러면 본격적으로 GTQ 연..
간만에 또 좋은 리뷰 상품을 얻었습니다. 샤오미는 진짜 사람 빼고는 다 만들 생각인 것 같아요. 이번에는 백팩입니다. 마침 가방이 하나 필요했는데 너무 잘된거죠. 이 가방은 무척이나 간지납니다. 아무나 가지고 다니지 않기 때문에 유니크하죠. 여성 남성 할 것 없이 다 잘 어울릴 것입니다. 정장에도 잘 어울리고 당연히 캐쥬얼 복장에도 굿입니다. 메고 다녀도 좋고, 들고 다녀도 이쁩니다. 말로 설명해서 뭐하겠습니까? 직접 보시겠습니다. 외관 및 내부 살펴보기가방은 이렇게 생겼습니다. 여기가 당연히 앞 부분입니다. 여기는 메는 부분입니다. 가방끈이 무척 두터워서 장시간 착용해도 크게 아프지는 않았습니다. 제가 기존에 사용하는 가방은 30분만 지나면 어깨가 빠질 것 같은 고통을 선사합니다. 이것저것 많이 넣고 ..
드디어 게이밍 모니터를 구매했습니다. 듀얼모니터 중 하나가 이제 수명이 다 했는지 오락가락해서 어쩔 수 없이 바꾸게 되었습니다. 이제 나도 144프레임으로 게임을 즐길 수 있는 것인가! 라는 기대를 안고 수소문하여 엄선한 제품! 알파스캔 AOC CQ32G1 게이밍 모니터로 선택하게 되었습니다. 일단 모니터에는 주사율이라는게 있습니다. 보통 60Hz 짜리가 대부분 입니다. 이 뜻은 1초에 60장을 뿌린다는 뜻 입니다. 결국 게이밍 모니터의 표준인 144Hz는 1초에 144장을 보여준다는 뜻 입니다. 기존 모니터보다 두배 이상이 부드럽겠죠? 실제로 그렇습니다. 마우스만 움직여봐도 압니다. 144Hz 모니터에서의 움직임과 일반 60Hz 모니터에서의 움직임은 분명한 차이가 있습니다. 이런 디스플레이 전용 제품을..
새롭게 선보이는 카테고리 입니다. 여기에는 티스토리 스타일을 꾸며주고 사용 편의성을 높이는 모듈들을 만들어 올리는 콘텐츠 입니다. 어떤 스킨에서든지 다 통합니다. 단! 티스토리 전용 어플리케이션에서는 비정상으로 보여집니다. 하지만 상관 없습니다. 티스토리 앱을 이용하시는 분들은 거의 적을 뿐더러 원래 기존에 사용하던 표도 정상적으로 보여지진 않았으니까요. 적용 방법은 간단합니다. CSS 스타일에 코드를 추가해주시고, 사용하실 때, HTML 태그 요소들만 조금씩 수정해서 사용하시면 됩니다. 이름하야, "친절한효자손 애드온" 이라고 명명 합니다. 오늘은 그 첫번째로 티스토리에서 취약하기로 소문난(?) 표 만들기에 대한 방법입니다. TIP 알림 : 친효애드온의 저작권은 저에게 있습니다. 코딩에 마크업된 태그 ..
오늘은 산술연산자에 대해서 배웠습니다. 이항 연산자라고도 하는데, 쉽게 말씀드리면 수학의 덧샘, 뺄샘, 곱샘, 나눗샘 이라고 생각하시면 됩니다. 다만 수학적 기호가 자바스크립트에서는 일부 다르게 사용됩니다. 한번 알아보겠습니다. 보시는 것 처럼 각 산술 연산자에 의해서 정의된 변수의 값이 계산되어 출력됩니다. 위의 코딩 중 다음에 나오는 숫자들이 현재의 결과값 입니다. 각 산술 연산자에 대한 뜻은 아래와 같습니다. 산술 연산자 설명 + 더하기 - 빼기 * 곱하기 / 나누기 % 나머지 그리고 브라우저에서의 결과 화면 입니다. 이렇게 출력이 됩니다. 차후에는 산술 연산자를 이용해서 다양한 응용을 할 수가 있습니다. 끝. 브라우저 유효성 검사 오류를 막는 CDATA 선언 방법CSS3 transform 사용법 ..
자바스크립트에서 사용하는 산술 연산자라던지 기타 선언에 대한 결과화면이 정상적으로 나와도 오류를 띄우는 경우가 간혹 있습니다. 보통 유효성 검사 오류를 출력하는데, 원인은 스크립트 안에 포함된 HTML 태그 때문인 경우가 가장 흔합니다. 그래서 이와 같은 경우에는 CDATA (C데이터) 선언을 해줘야 합니다. 참고로 내부 스타일에서만 해당되는 방법이며, 만약 js 파일을 별도로 만들어서 외부 스타일로 불러들이는 경우는 유효성 검사는 정상적으로 출력이 됩니다. 또한 브라우저에 따라서 유효성 검사 오류가 생길수도, 안 생길수도 있습니다. 요즘 나와있는 각 브라우저의 최신 버전에서는 오류를 띄우지는 않습니다. 여기 보시면 // 와 //]]> 가 스크립트의 내용을 감싸고 있는것을 살펴보실 수 있습니다. 이렇게 ..
요즘 재밌게 플레이하고 있는 데스티니 가디언즈 게임 입니다. 데스티니 가디언즈는 번지(Bungi) 라고 하는 회사에서 만들고 액티비전에서 발매, 이 배급을 블리자드가 하고 있죠. 아무튼 데스티니 가디언즈가 재미있는 개인적인 이유는, 콘텐츠가 간단하지만 어려우면서도 쉽다(?) 라고 말씀 드릴 수 있습니다. 앞뒤가 안 맞는 말이긴 한데, 어렵지만, 이 퀘스트를 깨는 방법은 생각보다 단순하기 때문에 이 단순함이 곧 쉽다라는 뜻이 될 수 있겠습니다. 데스티니 가디언즈의 장비 시스템은 크게 전설과 경이로 나뉩니다. 장비는 무기와 방어구로 나뉘며, 이 무기와 방어구 각 하나의 경이 아이템을 착용할 수 있습니다. 대부분 유저분들이 이 경이아이템을 획득하기 위해 무수히 많은 적들과 교전 중 이며, 놀랍게도 데스티니 가..
티스토리 강좌를 운영하면서 이따금씩 html 혹은 CSS와 관련된 코딩을 올리곤 합니다. 그동안 사용해왔던 방법은 그냥 스크린샷해서 이미지로 올리는 방식을 사용했습니다. 가장 빠르고 확실한 방법이긴 하지만 가독성이 떨어집니다. 특히나 저해상도의 모바일에서는 이 방법은 치명적입니다. 이미지가 극도로 작아져서 코딩을 보이지 않거나, 티스토리 오류 발생 시 이미지가 깨지면 낭패를 겪게 됩니다. 그래서 이 방법을 알게 되었습니다. 코딩 그대로를 가독성을 높인채로 올릴 수 있으며, 이미지로 올리지 않기 때문에 검색엔진 노출에도 효율적입니다. 무엇보다도 깔끔해서 마음에 듭니다. Synax Highlighter 라고 하는 툴을 활용하시면 됩니다. 바로 사용할수는 없고, 티스토리에서 사용하시려면 초반 세팅이 필요합니다..