웹 코딩/HTML + 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. 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. 업로드 허용 확장자 지정하기 파일 올리기 할 때 이미지만 받는다던지, 엑셀만 받는다던지... 확장자를 지정해서 미리 차단할 수 있음 Show .xls, .xlsx, .csv files... Only show Excel (.xlsx) files... Only show Excel (.xls) files... Only show image files... Only show text files... Only show html files... Only show video files... Only show audio files... Only show .WAV files... Only show .PDF files... 2020. 8. 10. 라디오 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 다음
