구글 블로거 커스텀 강좌입니다. 구글 블로그에는 티스토리와 마찬가지로 사이드바 개념이 있으며 사이드바에는 여러 가지 모듈이 들어있습니다. 보통 이것을 위젯이라고 부르죠. 네이버 블로그의 그 위젯 맞습니다. 구글 블로거도 오픈소스여서 HTML 커스텀이 가능한데 글보관함 목록 개수를 기본적으로 변경하는 옵션이 제공될 줄 알았는데 없더라고요. 따라서 이 부분을 수동으로 변경해 보고자 합니다. 블로거 글보관함이란? 글보관함은 말그대로 아카이브이며 월 또는 년 단위로 설정도 가능합니다. 보통은 월별로 분리하는 편입니다. 글보관함 위젯은 설정 화면에서 가젯 추가를 통해서 세팅 가능합니다. 블로그 보관함이라는 가젯을 추가하시면 됩니다. 하지만 애석하게도 글보관함 옵션에는 개수에 대한 설정이 없습니다. 수동 설정 방법..
원래는 알리익스프레스 메인 화면의 제품 리스트 스타일을 구현하려고 시도했는데 만들다보니 점점 스마트폰처럼 되어버려서 이대로 하나 저장해두고 나중에 필요해지면 써먹어야겠다고 생각해서 급하게 백업용 문서로 남기는 중입니다. 혹시라도 필요하신분이 계신다면 마음껏 퍼가시기 바랍니다. 잠깐! 여기에서 퍼가라는 의미는 Share의 개념입니다. 지금 이 글(콘텐츠)을 그냥 긁어 가져가 자신의 블로그에 옮기라는 뜻이 아닙니다! 스마트폰 모양의 레이아웃이 필요하신 분들은 HTML과 CSS 코드를 공유해 가져가도 좋다는 뜻입니다. 일러스트레이터로 만든 이미지가 아닙니다. 순수하게 웹퍼블리싱만으로 구현한 스마트폰 형태의 레이아웃입니다. HTML과 CSS만으로도 이런 간단한 형태의 이미지는 쉽게 구현 가능합니다. 이런걸 만들..
여기 단 하나의 div 태그가 있습니다. 이 div 태그로 원형 오브젝트 표현은 아마 HTML과 CSS를 조금 이해하시는 분들이라면 그리 어렵지 않게 완성하실 수 있으실 겁니다. 가로 세로 값을 고정 후 border-radius 값을 50%로 적용시켜 백그라운드 색상만 입혀주면 끝입니다. 그렇게 div는 동그라미가 될 수 있는 것입니다. 문제는 div 1개당 원형 1개만 표현했다는 것입니다. 그럼 제목에서처럼 여러개의 동그라미를 만들려면 어떻게 해야 할까요? 가장 원초적인 방법은 당연히 여러개의 div를 사용하면 됩니다. 그리고 정렬만 대충 잘 해 놓으면 끝이죠. 하지만! 단 한 개의 div로 여러개의 동그라미를 표현하라고 한다면 해내실 수 있으시겠습니까? 물론 최대 3개까지는 표현 가능합니다. 가상 요..
VS Code를 잘 사용해오다가 도저히 코드 정리하는게 마음에 들지 않아서 다시 브라켓(Bracket)을 설치했습니다. 앞으로 코드는 VSC로 작업하고 마무리인 코드 정리는 브라켓에서 진행해야 할 것 같습니다. 단순 코드 정리가 아닙니다. 실제로 VSC에서 친효스킨 HTML을 정리하면 스크립트를 끊는 구간이 아주 그냥 지 멋대로입니다. 그래서 오류가 발생하는 경우도 있어요. 브라켓에서 정리할때는 전혀 이런 문제가 없습니다. 비쥬얼 스튜디오에서는 태그 입력이 정말 쉽습니다. 각 프로그램별 장단점을 최대한 활용해볼 생각입니다. 과거글 중 하나가 바로 브라켓 추천 플러그인이었습니다. 해당 글에는 커스텀 워크(Custom Work)라는 플러그인을 추천하고 있는데 문제는 이게 간헐적 오작동을 합니다. 그래서 도저..
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..
친효스킨 신형 댓글 방명록 시스템을 한창 세팅중일 때 한 가지 문제에 봉착하게 됩니다. 가상 선택자 중 하나인 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 이라는 아이템을 검색해보면..
홈페이지나 티스토리같은 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만 입력해도 적용됩니다. 즉..
일반적으로 텍스트는 가로 방향으로 작성됩니다. 이는 전 세계 어딜 가든 대부분 통일되어있는 것입니다. 허나 이따금씩 세로로 작성되는 문서들이 있습니다. 보통 사극에 많이 나오죠. 네. 바로 그것입니다. 현재에서는 거의 쓰이지는 않으나 이따금씩 필요할때가 있습니다. 웹퍼블리싱 세계에서도 가끔씩 필요할때가 있습니다. 개인적으로는 친효스킨 두번째 버전을 만들 때 이 기능이 필요했습니다. 친효스킨 아트북 사이드바를 보시면 이렇게 텍스트가 세로로 입력되어 있는것을 확인할 수 있습니다. 보통 세로로 작성하는 방법은 부모 요소의 가로 사이즈를 텍스트 글자 하나가 들어갈 정도로 줄이면 되긴 합니다만, 만약 부모 요소의 가로 사이즈에 변동이 있는 경우에는 텍스트 정렬이 와르르 무너질 수 있습니다. 따라서 아예 처음부터 ..
브라켓을 버리고 VSC(Visual Studio Code)로 잘 넘어와 열심히 사용중입니다. 진작에 쓸걸하고 탄식을 할 정도로 매우 만족스럽게 쓰고 있는 프로그램이죠. 브라켓에서처럼 VSC에서도 다양한 확장 프로그램을 지원합니다. 브라켓보다 반응 속도가 빨라서 확장 유틸리티 설치 시간도 확실히 짧습니다. 저는 VSC로 티스토리 반응형 스킨을 제작하고 있습니다. 얼마전까지 두번째 스킨을 완성시켰으며 이제 세번째 스킨을 슬슬 준비하고 있습니다. 즉 HTML 웹퍼블리싱 쪽으로 작업을 하고 있는데 웹페이지를 만들 때 유용한 여러가지 확장 플러그인을 검색해 보았습니다. 정말 많은 플러그인이 있었고 개인마다 약간씩 추구하는 플러그인은 달랐습니다. 그중에서 많은 사람들이 공통으로 사용중인 대표 확장 프로그램을 모아봤..
안녕하십니까! 친절한효자손입니다. 2월까지 끝내려고했던 친효스킨 : 아트북 반응형 스킨의 제작은 또 한달 딜레이 되고 말았습니다. 의외로 잘 모르시는 분들이 계신데 제 성격이 굉장히 게으릅니다. 그래서 이런 결과가 나오는 것입니다. 솔직히 부지런하면 진작에 완성시켰을 스킨입니다. 이미 뼈대는 세팅이 끝났고 친효스킨을 만들어본 경험이 있으니 어디가 어떤 위치인지 파악도 끝났기에 바로 실천만 하면 되는데 이놈의 실천이 문제입니다. 겁나 게을러서... 자꾸 미뤄요. 특히 집에서는 더 안하죠. 그래서 대전에서 HTML 관련 모임도 만들어 운영하고 있습니다. 오늘은 저의 팬(?)분을 만났습니다. 사실 이분도 티스토리 스킨을 제작하고 계셔서 처음에 엄청 반가웠었죠. 그분께서 만드신 스킨이 하나 있는데 너무 마음에 ..
안녕하세요. 친절한효자손입니다. 친효스킨의 두번째 버전인 아트북의 완성이 코 앞 입니다. 이제 푸터 영역까지 만들었습니다. 나머지는 페이지 표현 부분과 커버 기능만 추가하면 끝입니다. 이후에는 좀 더 디테일한 스타일 수정만 진행하면 될 것 같습니다. 미리보기 푸터 영역은 위의 이미지와 같이 생겼습니다. 색상 및 글씨 크기, 스타일은 이후에도 바뀔 수 있는 점 미리 밝힙니다. 하지만 기본적인 레이아웃은 이대로 쭈욱 진행할 생각입니다. 푸터 영역 또한 당연히 반응형으로 대응하게 됩니다. 프로필 모듈을 푸터 영역으로 옮겼습니다. 원래는 왼쪽의 사이드바에 들어가 있었는데 굳이 프로필 내역을 사이드바에 넣어둘 필요는 없을 것 같았습니다. 이 스킨의 테마는 아트북이므로 뭔가 아티스트의 정보를 푸터 영역의 한 곳에 ..
제목만 보면 무슨 뜻인지 이해가 잘 되지 않을 수 있으니 간단한 예를 들어보겠습니다. 홈페이지 제작 시 오른쪽 하단에는 보통 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개의 요소가 필요합니다. 맨 아래는 전체 크기의 기준이 되는 요소가 사용됩..
안녕하세요. 친절한효자손입니다. 친효스킨2(아트북) 반응형 스킨의 본문 하단 부분을 꾸미는 중입니다. 본문 하단은 기존 친효스킨과 같은 구조입니다. CSS 부분만 편집해서 스타일을 바꾸는 중입니다. 초반에도 말씀드렸듯 스킨에 사용되는 소스를 왕창 줄여버리려고 공유하기 버튼에 사용되었던 아이콘 이미지도 아예 사용하지 않고 모두 텍스트로 처리했습니다. 미리보기 공유하기와 관련글 영역도 모두 반응형으로 대응합니다. flex 정렬을 사용했기 때문에 각 버튼이 브라우저의 가로 사이즈에 즉각 대응해 이쁘게 배치가 되고있는 모습입니다. 마우스를 올렸을 때 발행하는 이벤트도 역시 빼놓지 않고 적용시켰습니다. 이것만큼은 절대 빠뜨릴 수 없죠. 사실 이거 구현하려고 스킨을 만드는 것이라고 해도 과언이 아닐 정도거든요. (..
크롬 브라우저 실행 후 첫 화면을 기억하십니까? 지금은 버전이 많이 올라가서 스타일이 조금 바뀌었지만 그래도 기본 형태라는건 변함이 없습니다. HTML, CSS 연습도 해볼겸 한번 만들어 보았습니다. 사실 예전 직업전문학교에서 수업 과정중에서 한 번 만들어본 경험이 있었는데 오래된 기억인지라 다시 추억을 되새길 겸 작업을 해봤습니다. 완성된 모습은 아래의 코드펜에 있습니다. 미리보기 See the Pen Untitled by rgy0409 (@rgy0409) on CodePen. 그럴듯하게 만들었죠? 개인적으로도 흡족한 습작이라고 생각합니다. 참고로 크롬 새 탭에서 개발자툴을 열어서 HTML 구조를 살펴보고 만든게 아니라 그냥 화면만 보고 레이아웃은 순수하게 제가 보이는대로 느끼는대로 구성한 결과입니다...
안녕하세요. 친절한효자손입니다. 본문 소제목1에 대한 CSS 스타일 변경 안내입니다. 기존 2.6.SRA 버전에서 모바일 해상도에서 접속 시 제목1(h1)로 적용시킨 소제목이 오른쪽으로 텍스트가 너무 치우쳐 가독성이 좋지 못하다는 피드백이 있었습니다. 그래서 스타일을 수정했습니다. 안녕하세요. 친절한효자손입니다. 이렇게요. 이제 텍스트가 모바일에서 우측으로 치우칠일은 없을 것입니다. 갑자기 생각나서 만들어봤는데 만족스럽습니다. CSS 수정하기 친효스킨 2.6.SRA 버전을 사용하시는 분들은 스킨편집의 CSS 탭에서 다음의 코드를 찾습니다. #contents .article h2 { position: relative; padding: 10px 15px; margin-left: 40px; font-size:..
여러개의 요소들이 있는 경우에 클래스명을 사용해서 원하는 리스트만 선택 후 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의 글씨 색상을 빨간색으로 변경하려면 이..
지난 시간에는 스크롤 기능이 동작하게끔 만드는 방법에 대해 알아봤습니다. 이번 시간에는 스크롤 기능은 되도록 하는데 눈엣 가시같은 스크롤바를 화면에서 안 보이도록 할 것입니다. 디자인적으로 매우 추하기 때문입니다. 물론 스크롤바를 커스텀하는 방법이 있지만 지금은 아예 없애는 방법에 대해 언급할 것입니다. 혹시 스크롤바를 커스텀하는 방법이 궁금하시면 아래의 글을 참고하시기 바랍니다. 크롬 브라우저 사이드 스크롤바 CSS 커스텀 방법 크롬 브라우저 사이드 스크롤바 CSS 커스텀 방법 아니 대체 왜!? 일부 사이트는 브라우저의 세로 스크롤바 가로 크기를 꼬딱지만하게 줄여놓는 것일까요? 클릭도 잘 안 되고 현재 어디까지 내려왔는지 눈에 띄지도 않습니다. 그래서 매우 불편 rgy0409.tistory.com 예제..
친효스킨2를 개발하면서 사이드바 영역에만 스크롤바를 만들어야하는 일이 생겼습니다. 기본적으로 요소들은 쌓이는 성질이 있고 세로 해상도보다 콘텐츠양이 더 넘치면 자동으로 스크롤바가 생기죠. 대표적으로 브라우저가 이런 성격을 가지고 있습니다. 세로로 내용이 긴 콘텐츠의 경우 세로 스크롤바가 자동으로 생성됩니다. 콘텐츠가 길수록 스크롤 양도 상당해집니다. 흔히 스크롤의 압박이라 불리우는것이 이 경우입니다. 허나 친효스킨2의 경우는 사이드바가 고정 형태입니다. 즉 display: flexd;가 적용되어 다른 영역의 콘텐츠와는 무관하게 늘 고정된 위치에 노출되어 있습니다. 그러니 사이드바 내부의 콘텐츠가 길면 일부가 짤리는 문제가 발생합니다. 그러니 사이드바 영역에만 독립적으로 세로 스크롤바를 만들 필요가 있었습..
영진닷컴에서 출판한 「코딩은 처음이라 with 웹 퍼블리싱」 도서의 P216쪽을 참고한 내용을 바탕으로 「속성 선택자」에 대해서 알아보겠습니다. 사실 속성 선택자의 활용도는 그리 높지는 않습니다. 하지만 뭐든지 알아두면 언젠가는 요긴하게 쓰이는 법! 실제로 친효스킨에서도 속성 선택자를 사용해 스타일을 적용하는 부분도 있습니다. 그러니 무조건 알아둡시다! 아는것이 곧 힘입니다. 속성 선택자 문법 기본적으로 속성 선택자는 이렇게 사용합니다. [속성명] { 속성: 값; } 이것만으로는 이해가 잘 안 될 수 있으니 예시를 보면서 추가 설명 드리겠습니다. See the Pen CSS3 [속성선택자] by rgy0409 (@rgy0409) on CodePen. 추가 설명 태그 안에 5개의 자식 요소가 들어있습니다...
티스토리가 최근 카카오 서버 사고 이후로 살짝 엉망이 된 것 같습니다. 최근에 발견한 문제는 사이드바의 최근글, 최근댓글, 인기글 모듈에 대한 오류입니다. 아니 정확하게는 오류인건지, 아니면 업데이트가 새롭게 진행된건지는 몰라도 사고 이전과 이후가 달라졌습니다. 개인적으로는 오류라고 생각하고 있습니다. 왜냐하면 티스토리 사이드바의 방문자 그래프도 정상적으로 출력이 되지 않고 있기 때문입니다. 플러그인의 방문자 그래프를 클릭해보시면 치환자가 있습니다. 치환자는 특정 스크립트를 대신해서 간단히 태그 입력만으로 해당 기능이 작동되는 티스토리 생태계에서 자주 사용되는 기능입니다. 해당 치환자를 확실히 사용하고 있는 친효스킨인데 사고 이후에는 방문자 그래프가 정상적으로 출력되지 않고 있습니다. 따라서 이 부분만 ..
이번 이태원 사고로 인해 상심이 크실 유가족분들에게 먼저 심심한 위로의 말씀을 올립니다. 그 어떤 위로의 말도 크게 와닿지 않으시겠지만 그래도 힘 내셨으면 좋겠습니다. 그런데 이번 사고를 또 이용해 방문자수를 유도하는 아주 최악의 인간들이 또 기승을 부리는 모양입니다. 티스토리 블로거 중에서도요. 제정신인가 싶습니다. 하지 말라는건 곧죽어도 하죠. 대체 언제쯤 철이 들까요? 한심할 따름입니다. 그래서 스킨 전체에 노출이 되는 공지 칸을 하나 추가하면 어떨까 싶었고 곧바로 친효스킨에 적용을 시켜보았습니다. 현재 친효스킨의 최상단 애드센스 바로 아래에 긴급공지 모듈이 설치되어 있습니다. 사용 목적은 지금과 같이 애도의 글을 올릴때 또는 무언가 티스토리 블로거가 급하게 방문자분들에게 알리고 싶은 내용이 짤막하..