본문 바로가기

7

css 모바일 슬라이드 메뉴 박스 만들기 이번엔 모바일 화면상에서 메뉴버튼을 클릭 시 좌측에서 우측으로 슬라이드하며 나오는 메뉴영역을 만들어 볼까 합니다. 슬라이드메뉴도 약간의 jQuery와 CSS만으로 만들 수 있습니다. 이전 글에 작성했던 모바일 메뉴의 burgur 메뉴버튼을 사용했습니다. muzi-muzi.tistory.com/7 css 모바일 버거 메뉴 버튼 만들기 이번엔 모바일 웹에서 감춰져 있는 사이드 메뉴를 열기 위해 주로 사용하는 메뉴 버튼(버거)을 만들어 보겠습니다. 위 이미지 처럼 모바일 웹에 자주 등장하는 이것을 이미지를 사용하지 않고 cs muzi-muzi.tistory.com 위 버튼을 클릭 시 모바일 메뉴가 나왔다가 사라지게 작성해봤습니다. 애니메이션에만 효과를 준 상태이기 때문에 슬라이드 메뉴리스트에 대한건 다음번에 .. 2020. 9. 28.
css 게시판 제목 말줄임 처리 ellipsis 이번엔 게시판의 제목이나 글의 내용을 일부 보여줄 때 내용이 영역보다 더 길어서 줄바꿈이 되거나 UI가 깨지지 않도록 css의 ellipsis를 사용하여 생략(...) 처리를 해보겠습니다. 한 줄 처리 기본 HTML 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 1. 아래는 가로폭 400px의 div에 내용을 길게 써놓았는데 박스의 사이즈보다 내용이 더 길기 때문에 줄바꿈이 이뤄져 보기 흉하게 되었습니다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다... 2020. 9. 24.
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.