방법1) CSS body { -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; } 부분 영역만 설정하고 싶은 경우에는 class로 지정하여 해당 영역에 class를 부여하면 된다. 방법1의 경우 드래그가 안되는 것 처럼 보이지만 복사, 붙여넣기를 하면 복사가 된다. 방법2 )HTML, JS 내용내용 방법2의 경우 body에 넣으면 input, textarea등의 텍스트 박스에 입력이 되지 않으므로 드래그, 우클릭 방지를 원하는 영역에 넣어주어야 한다.

section { overflow-x: auto; } 예시는 모바일 사이에 넣은 이미지표이며 해당 영역만 좌우 스크롤이 되게 하였다 +)가로영역을 스크롤처럼 쓰되 스크롤바는 없애기 카테고리1 카테고리2 카테고리3 카테고리4 div { white-space: nowrap; overflow-x: auto; -ms-overflow-style: none; /* IE, Edge */ scrollbar-width: none; /* Firefox */ } div::-webkit-scrollbar { display: none; } div p{ display: inline-block; } 1) white-space:nowrap;을 주어 자식요소가 가로정렬이 되게 한다. 2) overflow-x: auto;을 주어 가로스..

background-color 태그 (형광펜 두께 조절 가능) cSS로 형광펜 효과내는 법 p { font-size: 26px; position: relative; display: inline-block; } span { position: relative; display: inline-block; background-color: linear-gradient(to top, #FFD84B 40%, transparent 40%); } mark 태그 (텍스트높이 100% 두께 / 색상 변경 가능) cSS로 형광펜 효과내는 법 p { font-size: 26px; } mark { background-color: #ffe6b6; }

*HTML 메뉴1 메뉴2 메뉴3 video, iframe 등 동영상을 링크하는 태그를 부모요소로 감싸준 마크업을 준비 *CSS /* 헤더 기본 css */ header { height: 90px; width: 100%; position: fixed; top: 0; background-color: #fff; opacity: .8; transition: all .3s; z-index: 100; /* 반응형 동영상 */ #video { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; } #video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 헤더메뉴..

HTML swiper Fade In 효과 스와이프 페이드인 및 시간차 효과 주는 법 CSS /* 기본 css */ .swiper-slide .contents .text h4 { font-size: 40px; font-weight: 700; } .swiper-slide .contents .text > p { font-size: 20px; line-height: 27px; margin: 50px 0; } /* .swiper-slide-active 에 애니메이션 설정 적용 */ .swiper-slide.swiper-slide-active .contents .text h4 { animation: text 1s 0.2s both; /* name duration delay fill-mode */ } .swiper-..

HTML 강아지 고양이 토끼 제목 제작처 강아지1 강아지2 고양이1 고양이2 토끼 CSS .contents { display: flex; flex-wrap: wrap; } /* 기본 display는 none이며 버튼필터링 js로 출력유무를 지정함 */ .contentsBox { display: none; } .show { display: block; } .hide { display: none; } JS // 버튼필터링 js filterSelection("radio") function filterSelection(c) { var x, i; x = document.getElementsByClassName("contentsBox_js"); // All button이 있을 경우 "radio"를 "all"등의 a..