전체 글10 css 모바일 버거 메뉴 버튼 만들기 이번엔 모바일 웹에서 감춰져 있는 사이드 메뉴를 열기 위해 주로 사용하는 메뉴 버튼(버거)을 만들어 보겠습니다. 위 이미지 처럼 모바일 웹에 자주 등장하는 이것을 이미지를 사용하지 않고 css만으로 만들 수 있습니다. HTML 먼저 html 코드 입니다. 저는 주로 메뉴 버튼의 몸체가 될 span.burgur 한개만 만들어 두고 가상 클래스 burgur:before, burgur:after 등 을 사용하여 코딩하는 편이지만 직관성을 위해 윗줄, 아랫줄을 추가했습니다. //예제를 위한 메뉴버튼을 담을 버튼 //버거메뉴 버튼 가운데 라인 //버거메뉴 버튼 윗 라인 //버거메뉴 버튼 아랫 라인 slide open CSS 예제 버튼의 css입니다. .slide-open{ position:relative; //메.. 2020. 9. 22. css 만으로 반응형 modal 팝업 간단하게 만들기 이번엔 display flex를 활용하여 간단하게 모달 컨펌 팝업을 만들어 볼까 합니다. 플러그인이나 라이브러리, 각종 js등을 사용하지 않고 간단하게 css만을 사용하여 만들 수 있습니다. jquery 가 일부 들어가는데 click 이벤트나 요소를 감추고, 보이게하는 fadeIn(), fadeOut()만 사용합니다. //컨테이너 //모달을 감쌀 박스 //실질적 모달팝업 //로고 영역 MuziMuzi //컨텐츠 영역 Confirm Modal 모달 내용칸 //푸터 버튼 영역 확인 창 닫기 위 코드가 모달 팝업의 전체 html 코드입니다. 기본 html 구성과 비슷하게 머리, 몸통, 다리 영역으로 나누었습니다. 작업 순서 1. 모달 팝업을 감쌀 박스의 css 작성 - display 속성은 팝업을 중앙에 위치.. 2020. 9. 21. jQuery checkbox 전체체크, 체크확인, 제어 작업하면서 기억안날 때 마다 일일히 찾아 보기 귀찮아 작성합니다. 사용 Method .is() - 선택 요소를 확인 후 Boolean(true, false) 반환 .attr(), .prop() - 태그의 속성 변경은 같지만 .attr()은 해당 태그의 속성값을 반환하고 .prop()은 true, false를 반환 .click() - 선택 요소를 클릭 할 경우 반응 .change() - 선택 요소의 값이 변하였을 때 반응 .each() - 복수의 요소 수 만큼 반복 함수 실행 1. 전체체크 //전체체크 클릭 시 $("#chkAll").click(function(){ if($(this).is(":checked")){ //대상이 체크 되어 있을 때 //모든 체크박스 체크 $(".chkSub").attr("ch.. 2020. 9. 18. CSS display flex 간단하게 박스 정렬 하기 html,css 코딩에서 그리드 정렬에는 여러가지 방법이 있지만 저는 display : flex 속성을 상당히 자주 쓰고 있습니다. flex를 모를 때는 float 이나 display : table 등으로 세로 정렬이나 가로 정렬등을 했었지만 flex 속성으로 쉽게 정렬 가능합니다. flex관련 속성은 정말 여러가지가 있지만 여기서는 기본적인 정렬을 위한 것만 사용하겠습니다. 테스트용으로 적당히 작성한 코드입니다. 컨테이너 박스가 있고 그 안에 각각 가로값과 세로값이 다른 박스 아이템이 있습니다. 위의 상태 그대로 라면 div의 기본속성은 display block이기 때문에 가로값과 관계없이 세로영역 만큼 한줄을 다 차지하기 때문에 div박스들은 아래와 같이 수직으로 떨어지게 됩니다. 여기서 float:.. 2020. 9. 17. PHP 날짜 계산하기(하루전, 한달전) php를 이용해 문자 형태의 날짜를 계산 합니다. 사용 내장 함수 date ( string $format [, int $timestamp = time() ] ) : string strtotime ( string $datetime [, int $now = time() ] ) : int 현재시간 $now = date('Y-m-d H:i:s',time()); echo $now; //2020-09-17 12:00:00 날짜 계산 echo date('Y-m-d H:i:s',strtotime($now."-90 day")); // -90일 echo date('Y-m-d H:i:s',strtotime($now."-3 month")); // -3달 echo date('Y-m-d H:i:s',strtotime($now.".. 2020. 9. 17. 이전 1 2 다음
