CSS9 CSS로 스크롤바 꾸미기 간혹 스크롤바가 생기는 고정된 크기의 Div를 써야 할 때 기본 스크롤바는 너무 크고 못생겼다는 생각이 들 때가 있습니다. 이럴때 사용할 수 있는 CSS 입니다. 스크롤바를 원하는대로 꾸밀 수 있게됩니다. See the Pen Custom Scrollbar styling by Alex Park (@alikong) on CodePen. 위에서 CSS 탭을 눌러 보시면 원하는 모양의 스타일 번호와 코드를 찾으실 수 있습니다. 그 외 비슷한 용도로 스크롤바를 만들어주는 여러 js 라이브러리들도 있지만 css로는 모양만 꾸며주고 기본 스크롤바를 쓰는게 좋은 것 같습니다. 이 외에도 검색해보시면 더~ 많은 소스들이 있겠지만.. 왠만해선 전 위 애들중 하나 골라서 색상좀 만져주고 끝냅니다. 2020. 10. 14. CSS Counter (카운터) 활용법 요즘처럼 블로그 포스팅을 할때 h 태그를 이용해서 체계적인 글을 쓰는게 대세인 상황에서, 누군가는 제목들에 자동으로 번호가 붙여지길 원할 수도 있겠죠? (전 글을 막 써서 전혀 안필요함..ㅋ) 아마도 그럴때 유용하게 쓰일 수 있는 CSS의 counter 라는 아이가 있습니다. 아래 예시(result)와 사용된 html 및 css를 참고해 보세요. See the Pen css counter by Alex Park (@alikong) on CodePen. 키 포인트는 counter-increment: - 이용할 카운터 정의 (1씩 늘어나는걸 기본으로 하지만 증가/감소 값 지정도 가능) counter-reset: - 카운터 값 초기화 content: counter('...') - 카운터 값 표시 이렇게 3가지.. 2020. 9. 6. 북클럽 스킨 - 포인트컬러 활용 '더' 하기 관리 > 스킨편집에 들어가서 우측의 스킨 설정 영역을 바닥으로 내려보면 포인트컬로 설정이 가능한 걸 볼 수 있습니다. 근데, 실제 이 포인트컬러가 적용된 곳을 찾아보면 몇군데 없네요. (댓글 등록 버튼, 글 내용중 링크 색상, 댓글 수 외 몇몇) 물론 북클럽 스킨이 기본적으로 워낙 모노톤이고 단정하기 때문에 이런 최소한의 사용이 더 마음에 들 수도 있습니다. 절대적으로 개인적인 취향에 따라 호불호가 갈릴 수 있는 부분이겠지만 저는 이 포인트컬러의 적용 폭을 조금 더 넓히고 싶었습니다. 이렇게 하면, 기분이나 시즌에 따라 스킨설정에서 간단하게 이 컬러만 한번 바꿔주면 내가 지정한 부분들의 색상도 한꺼번에 바뀌는 장점이 있다고 본거죠. 따라서, 필요하신 분만 적용하시면 되겠습니다. 아니면, 필요한 부분만 추.. 2020. 9. 6. CSS 로 내용 넣기 (+내용 선택 안되게 만들기) 제목 정하기가 너무 어렵...ㅡㅡ; 아무튼, 골자는 이렇습니다. 다들 알다시피 css로 html 태그에 뭔가 내용을 넣어 주는 방식으로는 ::before 나 ::after 가 있습니다. 이 때, 넣어줄 내용을 태그의 data 속성에서 읽어 오는 방법이 있네요. 위 예제를 보시면 div 태그 안에는 실제 아무 내용도 없습니다. 하지만 css가 attr(data-content); 를 통해서 data-content 에 있는 내용을 div 안에 뿌려줍니다. 여기서 재미있는 점은 ::before 나 ::after 로 생성된 내용은 드레그 선택이 되지 않는다는 겁니다. 드레그 시 선택이 되면 안되는 내용을 넣을 때 유용할 수 있겠습니다. 참고로 content: 는 ::before 나 ::after 에서만 쓸 수 있.. 2020. 9. 1. 움직이는 햄버거 메뉴 + 클릭하면 펼치기 요즘 많이 보이는 메뉴 버튼... (주로 모바일에서..) 대충 요런거... 눌르면 샤르륵 X 로 바뀌면서 뭔가 내용이 나오는.... 메뉴 펼침은 숨겨진 체크박스를 이용함 예제: (Result 클릭) https://jsfiddle.net/alikong/8r3g0czn/ 2020. 8. 14. 라디오 radio / 체크박스 checkbox - input 꾸미기 input의 type들 중 radio 나 checkbox 를 많이 쓰게 되는데.. 이 둘은 CSS로 꾸미기가 가능하고 선택되고 안되고 같은 상태가 감지되기 때문에 다양한 용도로 변형되어 사용됨 나도 하나 뚝딱 만들어 봄 예제와 소스는 아래 참고 https://jsfiddle.net/alikong/24t87bvu/ 핵심은 input은 숨기고 label을 마음껏 꾸미는 것 (필요하면 :before 나 :after 등으로 좀 더 확장해가면서...) 그리고 체크 상태일때와 아닐때에 따라 다른 스타일을 적용하는 것 잘 이해하고 응용하면 메뉴로 만들 수도 있고, 탭으로 쓸 수도 있고 각종 버튼으로 만들 수 있음 2020. 8. 6. CSS - 뚜껑 열리는 링크 (메뉴) 3D Rotate 알아보다 줏은 아이 원래는 less 버전으로 되어 있던걸 일반 CSS 로 풀어보았음 내용은 별거 없고, 그림자 색상 맞추는게 까다로울뿐! 아래는 소스와 예시: See the Pen plain CSS link - with 3D lid by Alex Park (@alikong) on CodePen. https://codepen.io/alikong/pen/zYqYEwR 2020. 8. 5. CSS - rotate 좌우/상하 뒤집기 (3D) CSS가 하도 좋아져서 다양한 애니메이션도 가능한데 항상 문제는 브라우저 호환! 마우스 올리면 휘릭 뒤집는건 rotateX 나 rotateY를 써서 쉽게 했는데.. 3D 로 보여지게 하려니 손이 좀 가고.. 특히 그냥 뒤집기만 하는게 아니라 뒤집으면서 뒷면에 있는게 앞으로 나오는 식으로 하려니 손이 더 가고.. 다 해놓고 보니 Edge 에선 뒷면이 안나오네! 그래서 알아보니 판을 통체로 하나만 돌리면 안되고 앞면 뒷면을 동시에 돌려줘야 한다니... 아래는 예시: (Result 탭을 눌러보자) https://jsfiddle.net/alikong/ac5ghs6p/ 암튼 해결! 2020. 8. 4. CSS로만 로딩 스피너 만들기 위 이미치처럼 뱅글 뱅글 로딩 이미지를 css로만으로도 만들 수 있음 검색하면 무지 많이 나옴 구글: https://www.google.com/search?q=css+only+spinner&rlz=1C1GCEA_enAU873AU873&oq=css+only+spinner&aqs=chrome.0.0l6j69i60.6351j0j7&sourceid=chrome&ie=UTF-8 아무튼, 복잡하게 만들면 매우 복잡해 질 수 있으나 기본 개념은 아래와 같다. html이 아래와 같다고 했을때, CSS는 아래처럼 된다. #loading { display: none; width: 100%; height: 100%; position: absolute; top:0; left:0; } @keyframes spinner { fr.. 2020. 8. 2. 이전 1 다음
