float 해제 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. 그때 그때/CSS 2020.12.31
drap & drop #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 그때 그때/JQUERY 2020.12.22
selectbox 직접입력 $(function(){ //직접입력 인풋박스 기존에는 숨어있다가 $("#selboxDirect").hide(); $("#selbox").change(function() { //직접입력을 누를 때 나타남 if($("#selbox").val() == "direct") { $("#selboxDirect").show(); } else { $("#selboxDirect").hide(); } }) }); 선택 1 2 3 직접입력 //상단의 select box에서 '직접입력'을 선택하면 나타날 인풋박스 그때 그때/JQUERY 2020.12.17
Basic setting .container{ position: relative; width: 100%; min-width: rem(1280); .content-wrap{ width: rem(1280); margin: 0 auto; } } 그때 그때/CSS 2020.12.08
hover 컨텐츠 마우스오버 마우스오버시 보여지는 컨텐츠 .btn_tooltip {position: relative; display: block;} .tbl_tooltip {position: absolute; display: none; width: 0; height: 0; bottom: 0; left: 5px;} .tbl_tooltip .inner {position: relative; padding-top: 8px;} .tbl_tooltip .inner::before {position: absolute; display: block; width: 13px; height: 9px; top: 0; left: 20px; background: url(../images/front/ico/tbl_tooltip_arr.png) no-r.. 그때 그때/JQUERY 2020.12.07
ellipsis 한줄 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 여러줄 display:-webkit-box; word-wrap:break-word; //단어기준 줄바뀜 -webkit-line-clamp:3; //몇줄까지 나오게할지 -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; line-height:rem(30); height:rem(90);//line-height *3줄 font-size:rem(20); text-decoration:none; 그때 그때/CSS 2020.12.03
html 파일 분리하는법 kay0426.tistory.com/27 HTML 파일 분리하는 법. HTML에서 다른 HTML 포함시키는 법. 0. 들어가기 전 얼마 전 개인적으로 웹 프로젝트를 진행하던 중 'HTML파일을 분리할 수 없을까' 라는 궁금한 점이 한 가지 생겼다. 웹 프로젝트 경험이 풍부하지는 않지만 직감적으로 HTML파일을 kay0426.tistory.com https://kyung-a.tistory.com/18 일반 HTML 파일에 HTML include/imports 하는 방법 프론트엔드 개발자가 아닌 마크업을 위주로 하는 웹퍼블리셔들은 대부분 일반 html, css 파일로 작업을하게 됩니다 페이지가 많아지다보면 중복되는 내용이 많아지죠? 특히 header와 footer는 거의 kyung-a.tistory.com 그때 그때/HTML 2020.11.26
구글지도 api key설정 구글제공 기본 튜토리얼 (function(exports) { "use strict"; function initMap() { var myLatLng = { lat: 35.175185, lng: 129.124936 }; var map01 = new google.maps.Map(document.getElementById("map"), { zoom: 16, center: myLatLng }); var marker = new google.maps.Marker({ position: myLatLng, map: map01, title: "Hello World!" }); } exports.initMap = initMap; })((this.window = this.window || {})); 한페이지 지도 여러.. 그때 그때/JS 2020.11.18