여기 단 하나의 div 태그가 있습니다. 이 div 태그로 원형 오브젝트 표현은 아마 HTML과 CSS를 조금 이해하시는 분들이라면 그리 어렵지 않게 완성하실 수 있으실 겁니다. 가로 세로 값을 고정 후 border-radius 값을 50%로 적용시켜 백그라운드 색상만 입혀주면 끝입니다. 그렇게 div는 동그라미가 될 수 있는 것입니다. 문제는 div 1개당 원형 1개만 표현했다는 것입니다. 그럼 제목에서처럼 여러개의 동그라미를 만들려면 어떻게 해야 할까요? 가장 원초적인 방법은 당연히 여러개의 div를 사용하면 됩니다. 그리고 정렬만 대충 잘 해 놓으면 끝이죠. 하지만! 단 한 개의 div로 여러개의 동그라미를 표현하라고 한다면 해내실 수 있으시겠습니까? 물론 최대 3개까지는 표현 가능합니다. 가상 요..
코드펜을 구경하다가 정말 마음에 드는 레퍼런스 작업물을 하나 발견했습니다. 저는 당연히 백그라운드 배경을 이미지로 작업했다고 생각했습니다. 근데 이게 왠걸?! 이미지가 아니었습니다. HTML로만 만든 작업물이었습니다. 세상에... HTML 태그만으로도 이렇게 다양한 도형을 제작할 수 있다니? 놀라웠습니다. 그래서 바로 태그 구성을 살펴봤습니다. 일단 라는 태그가 보였습니다. 그리고 그 안에는 태그가 있었으며 또 그 안에는 , 등의 요소들도 보였습니다. 문제는 해당 태그 안에 작성된 엄청난 숫자들...! 대체 이 숫자들이 무엇을 정의하는지는 모르겠습니다. 바로 구글 검색을 해봤는데 솔직히 뭔 소린지 봐도 모르겠습니다. 일단 대충 알아들을 수 있는건 다름 아닌 일러스트레이터에서 사용되는 핸들과 커버같은 개념..
애드센스를 자주 들어가지 않다보니 이런 메세지가 뜨는걸 얼마전에 알았습니다. 그냥 내버려 두기에는 신경이 쓰여서 뭔가 조치를 취해야 할 것 같습니다. 검색해보니까 이미 많은 분들께서 조치 방법을 글로 작성하셨더군요. 좋습니다. 저도 많은 자료들을 참고해서 적용 완료했습니다. 최대한 쉽게 여러분들께 설명을 해드리겠습니다. 일단 왜 GDRP에 대해 설정을 해야 하는지부터 살짝 알아봅니다. GDRP는 GDPR은 General Data Protection Regulation의 약자입니다. EU(유럽연합)에서 2016년 5월 27일에 채택! 이후에 시행된 온라인 규제입니다. 한국도 꽤 예전부터 개인정보에 대한 경각심이 많이 상승했죠? 워낙 개인정보를 가지고 악용하는 사례도 많으니까요. 유럽쪽도 마찬가지인 모양입니..
CSS에서 색상을 표현하는 방법은 대표적으로 고유명사가 있습니다. 빨간색이면 red, 노란색이면 yellow, 파란색이면 blue 등등의 색 이름을 직접 사용하여 표현하는 방법이죠. 하지만 이 방법은 색상이 이미 정해져있으니 특별한 상황이 아니면 거의 사용하지 않는 방식입니다. 가장 많이 사용하는건 16진수 색상코드입니다. 16진수 색상코드 HTML에서 색상을 표현하는 16진수는 0부터 F까지의 숫자와 알파벳 조합으로 완성된 6자리 코드입니다. 보통 색상코드는 #(샵)을 붙이며 뒤에는 6자리 숫자와 A~F까지 알파벳을 조합하여 입력합니다. 빛의 3원색은 빨강, 초록, 파랑이라고 학창시절에 배웠던것이 기억나시는지요? 빛의 삼원색이 모두 중첩되면 흰색이 되죠. 이 빛의 3원색을 영어 앞글자를 따서 RGB 색..
최근 티스토리 댓글/방명록 태그 구조가 싹 다 물갈이 되면서 친효스킨도 그에 발 맞추어 업데이트를 해야만 했습니다. 신형 댓글/방명록 시스템에는 고정 기능이 있습니다. 즉 마음에 드는 댓글(방명록)을 제일 상단으로 끌어올려 고정을 할 수 있는 기능입니다. 이건 유튜브나 인스타그램에서도 이미 진행중인 기능이죠. 고정 댓글이라고 부르는 그것입니다. 이 시스템이 티스토리에도 도입된 것입니다. 하지만 티스토리 댓글/방명록 중에서 마음에 들지 않는 딱 하나가 있는데 바로 배치 순서입니다. 댓글을 남길 수 있는 대부분의 플랫폼이 그러하듯 최신 댓글이 아래로 쌓여가는 구조입니다. 티스토리도 그러했습니다. 허나 저는 최신 댓글일수록 위로 쌓여야 한다고 생각합니다. 그래야 열람도 더 빠를테니까요. 그래서 신형 댓글(방명..
만약 ul 태그 안에 5개의 li 태그가 있다고 가정해 봅시다. 이 태그의 순서를 HTML 수정 없이 사용자가 원하는대로 변경할 수 있다는 것을 알고 계십니까? 단지 CSS 조작 만으로 말입니다. 상당히 간단합니다. 우선 아래에 있는 예시를 살펴보시기 바랍니다. 미리보기 See the Pen CSS - order by rgy0409 (@rgy0409) on CodePen. HTML 태그 구조를 보시면 아시겠지만 분명 li 요소 안에 1번부터 5번까지 차례대로 마크업 되어있습니다. 그렇다면 1,2,3,4,5 순으로 세로 배치가 되어야 하는데 숫자가 좀 이상하죠? 3,5,1,2,4 라고 순서가 뭔가 뒤죽박죽이 되었습니다. 그 이유는 바로 li 태그에 적용되어있는 order 라는 CSS 속성 때문입니다. or..
티스토리 댓글 시스템이 최근에 업데이트가 되면서 친효스킨도 최신 버전으로 업데이트를 할 수 밖에 없는 상황이었습니다. 문제는 댓글 리스트가 요소로 되어있는데 고정댓글이며 이전글 더보기 항목이 모두 동일한 태그에 포함되어 있는 것이었습니다. 이렇게되면 서로 구별지어 CSS 스타일을 만들기가 상당히 애매합니다. 특히나 저는 최신 댓글을 가장 위로 오게 만들고 싶은데 그렇게되면 고정 댓글이 맨 하단으로 내려가버리는 불상사가 벌어지는 것이었습니다. 따라서 저는 이것을 다시 위로 올리고 싶었습니다. 그러려면 역시 제이쿼리로 할 수 밖에 없겠다는 생각이 들었죠. 제이쿼리에서 태그 순서를 변경하는 매소드로는 제목에도 언급했듯 다음의 옵션들이 있습니다. 사용 방법 $('타겟').after$(('선택자')) : 타겟을 ..
제이쿼리가 무조건 최신 버전이 좋은것은 아닙니다. 하지만 왜인지는 몰라도 최신 버전이라고 하면 뭔가 모든게 다 해결될 것 같은 그런 기분이 들잖아요? 「최신」이라는 키워드가 갖는 선입견이 엄청나게 작용하는 것이겠지요. 하지만 진짜로 최신 버전을 사용하면 왠만한 오류나 버그들은 대부분 해결이 되는것이 현실입니다. 제이쿼리(jQuery)도 마찬가지입니다. 참고로 현재까지 현역으로 쓰이는 가장 인기가 높은 구버전은 1.12.4 와 1.9.1이 있으며 3.6.X 버전이 있습니다. 아무튼 이런 버전 차이에 대해서는 신경쓰고 싶지 않고 그저 최신 버전을 늘 사용하고 싶다면 다음의 제이쿼리 CDN 주소를 적용하고자 하는 HTML 문서의 안에 넣어주시기 바랍니다. 이거 하나면 끝! 이것입니다. 어렵지 않습니다. 기존 ..
친효스킨 신형 댓글 방명록 시스템을 한창 세팅중일 때 한 가지 문제에 봉착하게 됩니다. 가상 선택자 중 하나인 first-child와 last-child가 원하는대로 동작하지 않는 문제였습니다. 예를 들어 이런 경우입니다. 증상 확인 See the Pen Untitled by rgy0409 (@rgy0409) on CodePen. 위의 예시에서 알 수 있듯 원래대로라면 li 태그 안의 첫번째 숫자와 마지막 숫자가 CSS에 의해 빨간색으로 바뀌어야 합니다. 그런데 변함이 없어요. 원인은 바로 li 전/후에 존재하는 p태그 때문입니다. 즉 first-child와 last-child를 정상적으로 사용하기 위해서는 지정하고자 하는 자식 요소에 해당 태그들만 존재해야 합니다. 만약 전혀 다른 태그가 지정한 위치의..
Clip이라는 단어는 익숙했습니다. 포토샵에서 영역을 나눠 따로 저장하고자 할 때 클립이라는 기능을 써왔기 때문입니다. 근데 이런 클립이 CSS에서도 활용 가능하다는걸 알게 되었습니다. 실제로 친효스킨의 댓글 레이아웃 중에서도 이 클립 기능이 적용되어 있습니다. 어디에 적용되어 있냐고요? 친효스킨에서는 이런 식으로 응용함 바로 빨간색으로 표시된 저 부분입니다. 대화창의 끝 부분입니다. 말꼬리 부분은 폰트어썸을 사용했고 clip을 적용시켜서 꼬다리(?) 부분만 나오도록 표현했습니다. 크롬 개발자툴로 살펴보면 fa-affiliatethem 이라는 클래스명의 폰트어썸 아이콘이 사용되었고 clip 속성이 적용되어 있음을 알 수 있습니다. 폰트어썸 홈페이지에서 affiliatetheme 이라는 아이템을 검색해보면..
온라인으로 티스토리 교육을 진행하고 있습니다. 주로 디스코드를 사용해 왔습니다. 하지만 불편한게 몇 가지 있습니다. 사연은 다음과 같습니다. 1. 디스코드 회원가입이 필요함 2. 디스코드 프로그램을 추가 설치해야 함 3. 화면 공유가 제대로 되지 않는 경우가 많음 평소 디스코드와 친한 제 입장에서는 이따금씩 제대로 작동하지 않는 화면 공유 빼고는 딱히 불편한 사항은 없습니다. 그러나 이제 막 교육을 받으시는 분들에게는 이 세가지가 매우 불편한 상황이 될 것입니다. 번거롭기도 하고요. 그래서 좀 더 편리한 화면공유 플랫폼이 있는지 찾아보았고 마침내 웨얼바이(Whereby) 라는 플랫폼을 발견했습니다. 줌도 자주 썼었는데 코로나 팬데믹 사태 이후로 줌은 유료화 전환이 본격 가속화 되면서 1:1 사용 시 30..
홈페이지나 티스토리같은 HTML이 수정 가능한 오픈형 플랫폼에서는 텍스트 폰트 수정이 가능합니다. 글꼴 변경은 CSS에서 간단하게 제어할 수 있는데 font-family라는 옵션을 사용하여 원하는 글꼴을 적용시킬 수 있습니다. font-family에는 다음의 속성이 적용됩니다. 속성 1. font-family : 폰트명 2. font-family : initial 3. font-family : inherit 1번은 가장 기본 형태로 원하는 글꼴명을 입력하는 것입니다. 글꼴명에 띄어쓰기가 있는 경우에는 따옴표를 사용하여 하나로 묶어줍니다. 큰 따옴표든 작은 따옴표든 상관 없습니다. 예를 들어서 noto sans kr 이라는 폰트를 적용시키고자 한다면 "noto sans kr" 이라고 입력하면 됩니다. 만약..
오브젝트의 투명도를 정의하는 Opacity라는 CSS 옵션이 있습니다. 단어의 뜻 그대로 투명도를 설정하는 옵션입니다. 사용 방법 또한 매우 간단하고 쉽습니다. 아래처럼 사용하면 됩니다. 예시 선택자 { opacity: 1; } 0부터 1까지 소수점을 사용하면 됩니다. 0은 0%를, 1은 100%를 의미합니다. 즉 0.3을 입력했다면 30%의 투명도를, 0.7을 입력했다면 70%의 투명도를 가집니다. 소수점 두 자리까지도 인식합니다. 만약 0.14라고 입력했다면 14%의 투명도를 적용시키겠다는 뜻으로 이해하시면 됩니다. 즉 백분율 값입니다. 다음은 소수점을 사용한 값을 입력하는 경우입니다. 만약 30%의 투명도를 적용시키려면 0.3을 입력해야 하지만 0을 뺀 나머지 부분은 .3만 입력해도 적용됩니다. 즉..
대전에서 HTML / CSS / JS 관련 모임도 하고 있는데 회원분들 중에서는 티스토리 스킨을 취미삼아 뜯어고치시는분이 한 분 계십니다. 이분께서 만드신 스킨이 넘나 맘에 들었기에 앞으로 제작될 세번재 친효스킨에 영감을 얻어서 레이아웃을 일부 반영해 사용해도 된다는 허락을 받았죠. 그리고 최근에는 그분께서 티스토리에 물리엔진까지 적용시키는 엄청난 모습을 보여주셨습니다. 정말이지 이런 분들이 대전에 계셔서 참 다행입니다. 그렇기에 당장 모임을 열어 그분께 적용 방법을 배웠습니다. 결과물은 다음과 같습니다. 예시 살펴보기 보시면 클릭하는 지점에 오브젝트가 생성되고 중력에 의해 아래로 떨어집니다. 게다가 물리엔진이 적용되기에 저의 캐릭터인 효자곰이 각 모서리에 따라 서로 부딫히면서 양옆으로 자연스럽게 굴러 ..
일반적으로 텍스트는 가로 방향으로 작성됩니다. 이는 전 세계 어딜 가든 대부분 통일되어있는 것입니다. 허나 이따금씩 세로로 작성되는 문서들이 있습니다. 보통 사극에 많이 나오죠. 네. 바로 그것입니다. 현재에서는 거의 쓰이지는 않으나 이따금씩 필요할때가 있습니다. 웹퍼블리싱 세계에서도 가끔씩 필요할때가 있습니다. 개인적으로는 친효스킨 두번째 버전을 만들 때 이 기능이 필요했습니다. 친효스킨 아트북 사이드바를 보시면 이렇게 텍스트가 세로로 입력되어 있는것을 확인할 수 있습니다. 보통 세로로 작성하는 방법은 부모 요소의 가로 사이즈를 텍스트 글자 하나가 들어갈 정도로 줄이면 되긴 합니다만, 만약 부모 요소의 가로 사이즈에 변동이 있는 경우에는 텍스트 정렬이 와르르 무너질 수 있습니다. 따라서 아예 처음부터 ..
티스토리에는 치환자라는 시스템이 있습니다. 티스토리에서만 사용하는 일종의 암구호같은 존재입니다. 치환자에는 값치환자와 그룹치환자가 있습니다. 이 치환자는 정해진 클래스명, 태그명, 텍스트가 있어서 일반적인 HTML에서는 수정이 불가합니다. 즉 이미 뿌려져 출력된 결과값을 다시 한 번 자바스크립트나 제이쿼리로 추적해 수정해야 합니다. 예를 들면 이런 경우입니다. 상황 살펴보기 티스토리 본문을 들어가보면 일반 방문자들은 보이지 않는 관리자 메뉴가 블로거 운영자에게는 보이게 됩니다. 그러면 위의 스크린샷 이미지처럼 비공개로 변경합니다. 라는 텍스트도 보이게 되지요. 개인적으로 좀 통일감이 있으면 좋겠는데 저게 너무 눈엣가시입니다. 잘 보세요. 다른 메뉴들은 모두 단어 하나로 표현되어 있는데 왜 저 녀석만 문장..
지금까지 저는 파파고나 구글 번역기를 이용해 왔습니다. 하지만! 이제는 이 번역기를 알아버린 이상 저 두 개의 번역 플랫폼은 방문할 일이 없을 것 같습니다. 현재 크롬 북마크바 바로가기에 등록되어있던 파파고 번역과 구글 번역 바로가기를 삭제했고 DeepL 번역을 새롭게 등록했습니다. 이 글을 작성하는 현재까지 최강의 언어 번역기가 아닐까 싶습니다. DeepL 번역기 https://www.deepl.com/ko/translator DeepL 번역: 세계에서 가장 정확한 번역기 텍스트 및 전체 문서 파일을 즉시 번역하세요. 개인과 팀을 위한 정확한 번역. 매일 수백만 명이 DeepL로 번역합니다. www.DeepL.com DeepL(딥엘) 번역기 공식 홈페이지는 위에 있습니다. 테스트 번역 개시 그러면 시험..
제목만 보면 무슨 뜻인지 이해가 잘 되지 않을 수 있으니 간단한 예를 들어보겠습니다. 홈페이지 제작 시 오른쪽 하단에는 보통 TOP 버튼이 만들어져 있습니다. 대부분의 브라우저에서는 이 TOP버튼을 누르면 페이지의 가장 위로 부드럽게 스크롤되며 이동됩니다. 바로 이것입니다. 부드럽게 스크롤이 이동되는 TOP버튼에는 아마 대부분 제이쿼리 스크립트가 심어져 있을 겁니다. 친효스킨만해도 아래의 코드가 스킨에 들어있습니다. $(".rgyTop").click(function () { $('html, body').animate({ scrollTop: 0 }, 500); return false; }); 때문에 스크립트를 사용하려면 당연히 해당 스크립트(제이쿼리-jQuery) CND 주소를 안에 넣어줘야만 동작합니다...
지난 시간에 알아보았던 perspective 및 preserve-3d를 활용해서 이번에는 3D 주사위를 만들었습니다. 따라서 본문의 내용을 완벽히 이해하시려면 이전 강좌를 반드시 필독하셔야 합니다. 어떤 글인지 찾기 어려우신 분들을 위해서 바로 아래에 좌표를 남겨두었으니 꼭 읽어주시기 바랍니다. CSS preserve-3d 사용하여 육면체 단순 2단계 입체 배너 만들기 다 읽으셨죠? 그러면 바로 시작하겠습니다. 미리보기 See the Pen CSS 3D Dice by rgy0409 (@rgy0409) on CodePen. 지난 시간의 업그레이드 버전입니다. 차이점이라고 한다면 자식 요소가 두개에서 6개로 늘어났으며 각 자식 요소의 div에 대한 위치값이 더 추가되었다는 부분입니다. 원리는 위의 관련글에서..
지난 시간에 소개해드렸던 3D 카드 방법을 응용해서 이번에는 입체형 오브젝트로 만들어 보았습니다. 핵심은 transform-style: preserve-3d; 을 사용하는 것입니다. 그래야 3D 효과가 물씬 느껴지거든요. 말이 필요없지요? 바로 미리보기로 살펴보시겠습니다. 미리보기 See the Pen CSS : preserve-3d (A simple two-dimensional representation) (단순 2단 입체 표현) by rgy0409 (@rgy0409) on CodePen. 마우스를 배너에 올려보시면 오른쪽으로 스윽 돌아가면서 가려져있던 왼쪽 배너 이미지가 출력되는 형태의 입체형 div를 구성해 보았습니다. 그러면 늘 그러했듯 그림으로 어떻게 이게 동작하는건지 원리를 살펴보도록 하겠습니..
친효스킨2 작업을 하면서 생각한게 아트북이니 엘범 컨샙이 물씬 느껴지면 좋겠다고 생각을 했습니다. 이제 커버 기능을 준비중인데 커버 스타일은 썸네일에 마우스를 올리면 뒤집히면서 제목과 내용, 글 작성 날짜 및 카테고리가 나왔으면 합니다. 그러기 위해서는 뭔가 3D같은 느낌을 주면 괜찮을 것 같았습니다. 그래서 만들었습니다. 3D 카드 느낌의 뒤집는 애니메이션 효과를 말입니다. 미리보기 See the Pen CSS3 : 3D Card by rgy0409 (@rgy0409) on CodePen. 카드에 마우스를 올려보세요. 그러면 Y축으로 180도 돌아가면서 뒤집히는 애니메이션 효과가 연출됩니다. 신기하죠? 놀라운건 자바스크립트를 전혀 사용하지 않고 오로지 CSS 만으로 구성되었다는 부분입니다. 따라서 스크..
이 방법은 눈속임입니다. 실제로 테두리가 회전하는것이 아닌, 백그라운드의 영역이 돌아가는 것입니다. 총 3단계의 레이어가 필요합니다. 백그라운드에는 overflow: hidden이 적용되고 중간이 회전하는 오브젝트이며 가장 최 상위 요소가 두번째의 백그라운드 요소를 가려서 실제로 테두리처럼 보이게 하는 효과인 것입니다. 말로는 설명이 어려우니까 바로 미리보기부터 살펴보시겠습니다. 미리보기 See the Pen CSS3 border rotate by rgy0409 (@rgy0409) on CodePen. 다양한 테두리가 div 박스를 회전하고 있습니다. 그러면 자세한 설명 들어갑니다. 원리 이해 먼저 그림으로 설명드리겠습니다. 총 3개의 요소가 필요합니다. 맨 아래는 전체 크기의 기준이 되는 요소가 사용됩..
가운데를 중심으로 회전하며 표현되는 백그라운드 그라이언트는 conic-gradient라는 옵션을 사용합니다. 이 옵션을 이용하면 다양한 백그라운드 표현이 가능해집니다. 말로설명하자니 어려운 부분이 있군요. 바로 예시를 살펴보시겠습니다. 미리보기 See the Pen CSS3 : How to Use conic-gradient? (BG) by rgy0409 (@rgy0409) on CodePen. 총 7개의 div 요소가 있고 각 요소에는 conic-gradient 가 적용되어 있습니다. CSS 살펴보기 먼저 test1의 div에 적용된 CSS를 살펴봅시다. div에 공통으로 적용된 가로, 세로 크기라던지 magin값은 언급하지 않겠습니다. .test1 { background: conic-gradient(#..
크롬 브라우저 실행 후 첫 화면을 기억하십니까? 지금은 버전이 많이 올라가서 스타일이 조금 바뀌었지만 그래도 기본 형태라는건 변함이 없습니다. HTML, CSS 연습도 해볼겸 한번 만들어 보았습니다. 사실 예전 직업전문학교에서 수업 과정중에서 한 번 만들어본 경험이 있었는데 오래된 기억인지라 다시 추억을 되새길 겸 작업을 해봤습니다. 완성된 모습은 아래의 코드펜에 있습니다. 미리보기 See the Pen Untitled by rgy0409 (@rgy0409) on CodePen. 그럴듯하게 만들었죠? 개인적으로도 흡족한 습작이라고 생각합니다. 참고로 크롬 새 탭에서 개발자툴을 열어서 HTML 구조를 살펴보고 만든게 아니라 그냥 화면만 보고 레이아웃은 순수하게 제가 보이는대로 느끼는대로 구성한 결과입니다...
여러개의 요소들이 있는 경우에 클래스명을 사용해서 원하는 리스트만 선택 후 CSS 스타일을 적용시킬 수 있지만 nth-child를 사용하면 규칙적이면서도 원하는 위치의 리스트를 꽤 손쉽게 선택할 수 있습니다. 굳이 클래스명을 부여하지 않아도 말이지요. 아래의 리스트가 있다고 가정해 보겠습니다. 예시 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 li 안에는 숫자를 마크업 했습니다. 이제부터 nht-child를 사용하여 다양하게 선택해 보겠습니다. :nth-child(숫자) 숫자는 양수를 입력합니다. 만약 괄호 안에 5를 입력하면 어떨까요? 그러면 nth-child(5)가 될 것입니다. 이 뜻은 다섯번째 li를 선택하겠다는 의미입니다. 다섯번째 li의 글씨 색상을 빨간색으로 변경하려면 이..
홈페이지를 가입하거나 온라인 약관 동의 시에 자주 나오는 체크박스! 이 체크박스는 보통 태그를 사용해서 만듭니다. 기본적인 형태는 이렇습니다. 이렇게하면 인풋 입력창이 체크박스 상태가 됩니다. 최근에 이 태그를 사용해서 새 해 할 일 목록을 만들어 보았습니다. 관련글은 아래에 있습니다. 친효애드온 - TO DO LIST (투두리스트) 새 해 맞이 목표 양식 모듈 생각만큼 멋지게 나와줬기에 마음에 들었습니다. 버튼도 만들고 누르면 켜지면서 목록 텍스트 색상도 진하게 바뀌는 연출! 아주 훌륭하게 완성 되었습니다. 하지만 문제는 이후입니다. 새로 고침을 하면 다시 처음 상태로 초기화가 되어버립니다. 이러면 안 되겠지요? 체크가 된 상태를 유지하고 싶었는데 티스토리에서는 구현이 매우 어렵습니다. 물론 방법은 있..
구글 크롬 고객센터 공식 페이지에서 단축키 정보를 정식으로 안내하고 있습니다. 다만 자주 사용하는 단축키에 대해서만 간단히 요약해놓은 페이지는 없기에 오늘은 제가 자주 사용하는 단축키만 따로 요약해서 글로 남겨두려고 합니다. 차후에 저도 까먹게되면 이 글을 보고 기억하기 위함입니다. 일종의 백업이지요. 크롬 공식 단축키의 모든 정보는 아래의 페이지에서 직접 확인하실 수 있습니다. 크롬 모든 단축키 정보 Chrome 고객센터 단축키 정보 Chrome 단축키 - 컴퓨터 - Google Chrome 고객센터 도움이 되었나요? 어떻게 하면 개선할 수 있을까요? 예아니요 support.google.com 위의 링크가 열리지 않거나 URL 주소가 변경되어 보이지 않는 경우를 대비해서 아래에 한번 더 텍스트로 옮겨두..
친효스킨2를 한창 만드는 중입니다. 사이드바 작업을 먼저 진행 중인데 사용자가 임의로 등록하는 모듈에 대해서는 별도로 스타일을 지정해줘야 합니다. 예를 들자면 티스토리에서 개인적으로 만든 배너 이미지를 사이드바에 등록 시 html의 구조는 아래처럼 들어가게 됩니다. div가 부모 요소가 되고 클래스명은 두 개가 쓰이게 되는데 각각 module과 module_plugin 입니다. 저는 여기에 제가 임의로 제작한 스타일 클래스명을 하나 더 추가를 하고 싶습니다. rgySideModule 이라고 하는 클래스명을 말입니다. 이 클래스명에는 사이드바 전용 스타일 시트가 들어있습니다. 클래스명을 별도로 추가하려면 스크립트를 써야 하고 대중적으로 많이 알려진 제이쿼리를 사용해서 클래스명을 추가해 보겠습니다. 클래스명..
지난 시간에는 스크롤 기능이 동작하게끔 만드는 방법에 대해 알아봤습니다. 이번 시간에는 스크롤 기능은 되도록 하는데 눈엣 가시같은 스크롤바를 화면에서 안 보이도록 할 것입니다. 디자인적으로 매우 추하기 때문입니다. 물론 스크롤바를 커스텀하는 방법이 있지만 지금은 아예 없애는 방법에 대해 언급할 것입니다. 혹시 스크롤바를 커스텀하는 방법이 궁금하시면 아래의 글을 참고하시기 바랍니다. 크롬 브라우저 사이드 스크롤바 CSS 커스텀 방법 크롬 브라우저 사이드 스크롤바 CSS 커스텀 방법 아니 대체 왜!? 일부 사이트는 브라우저의 세로 스크롤바 가로 크기를 꼬딱지만하게 줄여놓는 것일까요? 클릭도 잘 안 되고 현재 어디까지 내려왔는지 눈에 띄지도 않습니다. 그래서 매우 불편 rgy0409.tistory.com 예제..
친효스킨2를 개발하면서 사이드바 영역에만 스크롤바를 만들어야하는 일이 생겼습니다. 기본적으로 요소들은 쌓이는 성질이 있고 세로 해상도보다 콘텐츠양이 더 넘치면 자동으로 스크롤바가 생기죠. 대표적으로 브라우저가 이런 성격을 가지고 있습니다. 세로로 내용이 긴 콘텐츠의 경우 세로 스크롤바가 자동으로 생성됩니다. 콘텐츠가 길수록 스크롤 양도 상당해집니다. 흔히 스크롤의 압박이라 불리우는것이 이 경우입니다. 허나 친효스킨2의 경우는 사이드바가 고정 형태입니다. 즉 display: flexd;가 적용되어 다른 영역의 콘텐츠와는 무관하게 늘 고정된 위치에 노출되어 있습니다. 그러니 사이드바 내부의 콘텐츠가 길면 일부가 짤리는 문제가 발생합니다. 그러니 사이드바 영역에만 독립적으로 세로 스크롤바를 만들 필요가 있었습..