코딩하는라민

Jquery 탭 메뉴 만들기 1. 탭의 기본 구조 - tab1, tab2 는 활성화되기 위한 클래스를 따로 줘야한다. ex) ‘on’, ‘active’, ‘current’ ... - tab 에 a를 주지 않았으면 cursor: pointer; 속성을 부여해준다. - tab의 ‘on’ 클래스에는 활성화되었을 때 색상을 따로 지정. - contents 에도 활성화되기 위한 클래스를 지정해준다. ex) ‘on’, ‘active’, ‘current’ ... - contents 는 tab 이 on 이 아닐 때에는 보이지 않게 하기 위해서 display: none;을 줘야한다. - contents의 ‘on’ 클래스에 display: block; 과 너비, 높이 등등 보여질 부분의 속성을 지정. tab1 tab2 c..

CSS Jquery 화면 가운데에 모달창 띄우기 1. 모달창 VS 팝업창 - 모달(Modal) : 화면 위에 하나의 작은 화면을 더 만들어 부가적인 일들을 처리할 수 있게 만드는 기능 - 팝업(Popup) : 현재 화면에 다른 화면을 하나의 창(Browser)으로 보여주는 기능 2. 모달창 만들기 - 1단계 - 모달창을 열 버튼 만들기 (본문 영역에 button) - 모달창 안에 내용과 닫기 버튼 만들기 (modal_box 안의 button) - 모달창 바깥 영역을 어둡게 dim 처리 해주기 (modal_bg) Hello Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis quod velit numquam impedit laboriosam fug..

CSS border 여러줄 겹치는 경우 겹침 현상 없애기 1. position과 border로 겹친부분 배경색으로 처리해서 안보이게 만들기 ① position 을 주고 top 마이너스 값으로 위치를 조정하여 완전히 겹쳐 한줄처럼 보이게 만들어준다. ② border-bottom 을 배경색과 동일한 색으로 지정한 후 ③ z-index 로 밑의 div 보다 앞에 보이게 만들어준다. z-index → position 을 준 경우 겹친 요소에 대해 수직 위치를 지정할 수 있다. 숫자가 클 수록 제일 위에 오게 되며, 숫자가 작을수록 숫자가 큰 것보다 아래에 보이기 때문에 가려져서 보이지 않을 수도 있다. 기본값은 auto이며, 속성이 주어지지 않았다면 0으로 취급함. 레이어같은 느낌 hello Laudantium..

2. 이미지 좌우 슬라이딩 .wrap{ width: 500px; height: 250px; margin: 0 auto; position: relative; overflow: hidden; } .img_list{ width: 1500px; height: 250px; position: absolute; top: 0; left: 0; } .img_list li{ float: left; } .img_list img{ width: 500px; height: 250px; } - li 의 ②부모의 너비(ul)가 이미지의 w의 길이만큼, 개수만큼 넓어야한다. ex) li 하나의 너비가 500px 이고, li가 총 3개이면, ul의 너비는 1500px이 되는 것 - li 는 flow: left; 를 해워야 옆으로 흐를 ..

CSS, Jquery 이미지 슬라이드_이미지 순서대로 서서히 나타나게 1. 이미지 서서히 나타나게 하기 - 맨 위 이미지 하나만 보이게 하기 메인 이미지 너비를 100%로 맞추고, 부모 박스에 overflow: hidden; - 이미지 2초동안 나타나고 사라지게 만들기(순차적으로 등장) .img_list{ width: 500px; height: 250px; margin: 0 auto; overflow: hidden; } .img_list img{ width: 100%; height: 250px; } $(document).ready(function(){ var count=0; $('.img_list li').eq(count).fadeIn(); setInterval(function(){ $('.img_lis..

CSS, Jquery 세로 메뉴 만들기(서브 메뉴) 1. hover 이벤트 이용해서 세로 메뉴 만들기 $(this).find(".sub_menu") → 내가 뭘 클릭할지 모르기 때문에 find로 찾아준다. → this : 위에서 언급한 것(.header_menu>li) Home 홈 바로가기 Blog 일상 공부 Contact 네이버 티스토리 #quickmenu{ width: 200px; } #quickmenu>li{ width: 200px; line-height: 30px; text-align: center; background-color: pink; margin-right: 5px; } .sub_menu_list{ display: none; } .sub_menu_list li{ background-col..

css, js 메인메뉴, 서브메뉴 만들기 0. 서브메뉴 만들기 - 메인 메뉴는 보이게, 서브 메뉴는 안 보이게 숨기기(display: none;) - 서브 메뉴는 마우스를 오버했을 경우에만 나타나게 1. 서브 메뉴 전체 떨어지게 만들기 → header_menu_list 박스와 sub 메뉴 박스를 따로 만들어서 style에서 sub 메뉴의 크기 등의 속성을 따로 줌 Home Blog Contact 홈 바로가기 일상 공부 네이버 티스토리 #quickmenu, .sub_menu{ width: 610px; } #quickmenu li, .sub_menu ul{ width: 200px; height: 30px; line-height: 30px; float: left; text-align: center; backg..

Jquery mouseover, mouseleave VS hover 차이점 1. mouseover, mouseleave - 자식 요소에도 영향(자식 요소에도 마우스 포인터가 올라가면 이벤트 동일하게 발생) 2. mouseenter - 자신에게만 마우스 포인터가 올라갈 경우만 이벤트 발생 3. hover - mouseenter 되었을 때, , mouseleave 되었을 때 이벤트를 각각 지정해줄 수 있음(연결해줌) - 조건문처럼 콤마로 구분한다. - 마우스 오버되면 슬라이드 다운, 아니면 슬라이드 업

제이쿼리 라이브러리 다운로드 및 사용하기 1. 제이쿼리 라이브러리 다운로드해서 넣기 Download jQuery | jQuery link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download jquery.com - head 태그 안 title 태그 아래 또는 body 태그 바로 위 에 넣기 2. 제이쿼리 CDN 넣기

퀵메뉴 만들기 margin 을 이용한 퀵메뉴 만들기 Home Blog Contact #quickmenu{ width: 100px; position: fixed; right: 0; top: 50%; transform: translateY(-50%); } #quickmenu a{ width: 150%; height: 20px; line-height: 20px; margin-bottom: 5px; padding: 15px; transform: 1s; display: block; font-weight: bold; } #quickmenu li:hover{ margin-left: -50%; } #quickmenu li:first-child{ background-color: pink; } #quickmenu li:n..