전체 글79 [ CSS ] scrollbar - 스크롤 바 스타일링 꾸미기 scrollbar는 mCustomScrollbar 플러그인으로도 변경이 가능하지만 스크롤 속도가 느려질 수도 있고 제어하기 어려운 부분이 발생하는 이유가 있지만 ie, firefox, edge, chrome 등 호환성이 좋다. scroll bar는 css로 디자인을 할 수 있습니다. 하지만 ie, firefox는 지원하지 않는다. firefox는 지원하는 방식이 따로 있는 것 같기는 하지만 현재로서는 firefox, ie를 제외 하고 스크롤 바 스타일링을 할 수 있는 방법을 작성 해보았습니다. ::-webkit-scrollbar { /* 스크롤바 전체 영역 */ width: 10px; } ::-webkit-scrollbar-track { /* 스크롤이 움직이는 영역 */ background-color: .. 2022. 1. 3. [ html ] IE 호환성 보기 무시하기 (무조건 최신버전 적용) 익스플로러는 호환성보기 설정을 한다고 해서 무조건 설정 대로 적용되지 않고, 소스코드 설정 값을 우선으로 한다. html태그에서 안에 아래와 같은 메타 태그를 넣으면, 호환성보기 설정 값을 무시하고 무조건 최신버전을 적용한다. 방법1 모든 HTML페이지의 태그 내에 다음 코드를 추가한다. 방법2 서버 측 코드에 아래와 같은 코드를 추가한다.(Servlet Filet등을 이용하여 공통 코드로 적용가능) if(userAgent.contains("MISE")){ response.addHeader("X-UA-Compatible", "IE=edge"); } 방법3 아파치 웹서버를 사용중이라면 웹서버 설정에 아래코드를 response header로 설정 Header set X-UA-Compatible "IE=edg.. 2021. 3. 26. [ CSS ] animation @keyframes 기본 이해하기 animation 속성 애니메이션에 이름을 지어하거나 지속시간, 속도 조절 등을 지정할 수 있는 속성을 가지고 있습니다. @keyframes 키프레임 사이에 화면 이동이 자연스럽게 생성되록 합니다. 변화값 작동 스스로 작동 반복 가능 순방향진행, 역방향진행, 양방향진행 가능 @keyframes 이름 { from { } /* 시작 */ to { } /* 끝 */ } @keyframes 이름 { 0% { } /* 시작 */ ... 100% { }/* 끝 */ } @keyframes text-animation { 0% { margin-left: 0; } 100% { margin-left: 100px; } } animation-속성 animationName 이라는 키프레임을 만들고 @keyframes anima.. 2021. 3. 26. [vsCode ] Visual Studio Code 코드 정리, 자동 줄 바꿈 코드작성 시, 코드가 길어지면 자동 줄바꿈이 필요할 경우 Setting (ctrl + ,) 로 설정화면으로 이동합니다. word wrap으로 검색하여 사용자설정을 on으로 설정합니다. Word Wrap Column에서 정해진 수만큼 줄바꿈을 합니다. 80으로 설정되어있다면 80글자 기준으로 줄바꿈 한다는 의미입니다. 2021. 3. 24. 이전 1 ··· 6 7 8 9 10 11 12 ··· 20 다음
