기록저장소

참고) takeknowledge.tistory.com/34 CSS와 javascript는 눈보다 빠르다 슬라이드와 무한슬라이드 일정 시간이 지나면 가로로 넘어가는 슬라이드를 만들어보자. 준비물은 다음과 같다. div 하나, 가로로 쭉 이어붙인 li 다섯개, 그 li 다섯개의 총 너비와 같은 너비를 가진 ul 하나! 여기에 필자는 takeknowledge.tistory.com

참고) zinee-world.tistory.com/453 [CSS] Gradient Border "보더에는 그라디언트 못 넣어요?" 디자이너님의 말 한마디에서 시작되었다. 그라디언트는 당연히 배경색에나 넣는 건 줄 알았던 나는 (!!!) 부랴부랴 방법이 있는지 찾아봤다. 역.시.있.었.다 http zinee-world.tistory.com

text-decoration: none;//선x text-decoration: line-through;//글자 중간 선 text-decoration: overline;//글자 위 선 text-decoration: unverline;//글자 아래 선 text-decoration: double;//글자 아래 두줄 text-decoration: dotted;//글자 아래 점선 text-decoration: dashed;//글자 아래 긴 점선 text-decoration: wavy;//글자 아래 물결선 text-decoration: initial;//기본값 text-decoration: inherit;//부모값 상속 색지정 가능 text-decoration: underline red; text-decoratio..

모바일 터치 이벤트를 제한할 수 있는 속성 touch-action auto - 기본 none - 터치이벤트 안됨 pan-x - X축 터치 스크롤 허용 pan-y - Y축 터치 스크롤 허용 manipulation - 핀치줌, 터치스크롤 pan-left - 왼쪽방향 터치스크롤 pan-right - 오른쪽방향 터치스크롤 pan-down - 아래바향 터치스크롤 pan-top - 위쪽 방향 터치스크롤 pinch-zoom - 핀치줌허용 참고) gahyun-web-diary.tistory.com/129 [CSS]touch-action 속성을 이용해 터치 제한하기 모바일 터치 이벤트를 제한할 수 있는 속성 touch-action auto - 기본 none - 터치이벤트 안됨 pan-x - X축 터치 스크롤 허용 pan..

내부박스 동일간격유지, 정렬 .boxWrap{ display:table; table-layout:fixed; width:100%; } .box{ display:table-cell; vertical-align:middle; }

중앙정렬 display:flex; justify-content: center; align-item: center;

ex) 메인페이지 3장 슬라이드 / 하단 컨텐츠 10장 슬라이드가 동시에 필요할 경우 " 기존swiper class들은 그대로 두고 swiper-container만 구별을 위한 class (ex. first-swiper, second-swiper)를 추가한다 " Slide 1 Slide 2 Slide 3 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 Slide 10 script에서 swiper-container로 적용된 부분을 구별 class (ex. first-swiper, second-swiper)로 바꿔준다. //first-swiper //second-swiper

1. 부모요소에 가상요소 추가하기 .wrapper{} .wrapper::after{content:''; display:block; clear:both;} .left-box{float:left;} 2.overflow:hidden ->보여져야하는 컨텐츠가 있을 경우 비추 .wrapper{overflow:hidden;} .left-box{float:left;} 3. 4.

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #sortable li span { position: absolute; margin-left: -1.3em; }​ Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7

$(function(){ //직접입력 인풋박스 기존에는 숨어있다가 $("#selboxDirect").hide(); $("#selbox").change(function() { //직접입력을 누를 때 나타남 if($("#selbox").val() == "direct") { $("#selboxDirect").show(); } else { $("#selboxDirect").hide(); } }) });​ 선택 1 2 3 직접입력 //상단의 select box에서 '직접입력'을 선택하면 나타날 인풋박스