코딩하는라민

[웹디자인기능사 실기] 남도맛기행 축제 C-3 0. 이전 유형과 다른 점 ✅ 세로 메뉴 - 서브 메뉴가 세로로 펼쳐지는 것이 아닌 우측으로 펼쳐진다. 1. 헤더 1-1. mark-up 남도맛기행축제 협회소개 인사말 명인 오시는길 행사안내 요리경연대회 전시참가 참가신청 홍보마당 축제소식 보도자료 레시피 회원마당 Q&A 사진갤러리 공지사항 ✅ 헤더의 전체적인 구조는 이전과 모두 동일하다. ✅ 모든 요소에 a 태그가 있는지, a 태그에는 임시 링크 # 이 붙어있는지 확인하기 1-2. css .wrap{ width: 1000px; height: 650px; display: flex; } /* 헤더 */ header{ width: 200px; height: 650px; text-align: center; posi..

[웹디자인기능사 실기] 부여 가을연꽃축제 ✅ 콘텐츠는 왼쪽정렬 ✅ 세로메뉴 ✅ 슬라이드는 서서히 나타났다 서서히 사라지게 ✅ 탭 메뉴는 없음 ✅ 푸터에 패밀리 사이트 1. 헤더 - 세로 메뉴 1-1. mark-up 축제소개 초대의 글 축제개요 축제연혁 오시는길 행사안내 셔틀버스안내 행사안내 행사일정 소공연장 홍보마당 축제소식 보도자료 음식레시피 참여마당 참가후기 연꽃갤러리 포토갤러리 ... ✅ 로고 : 포토샵 이미지 or html 텍스트 ✅ ul 안에 ul : ul.gnb li 안에 ul.sub_list li 가 들어있는 구조. ✅ 다 a로 감쌌는지 확인, a태그의 링크는 #이 들어갔는지 확인 ✅ 텍스트 또는 이미지가 a태그 안에 있는지 확인(바깥으로 빠져나가면 안 됨) 1-2. css .wrap{ wi..

[웹디자인기능사 실기 독학] 그린복지재단 ※ 이번에는 지난번 형태와 비슷하므로 시간 절약을 위해서 중복되는 부분은 빼고, 차이가 있는 부분만 작성 제일 먼저 해야할 것 1. 컬러 가이드 2. 와이어프레임 0. 이전 유형(A-1)과 다른점 ✅ 메인 메뉴의 위치는 조금 아래로 ✅ 서브 메뉴에 배경이 있다. ✅ 이미지 슬라이드는 좌우로 전환 ✅ 탭 메뉴가 없이 공지사항, 갤러리, 배너로 구성 ✅ 패밀라 사이트 추가 1. 헤더 ✅ A-1에 비해 헤더의 높이가 좀 더 내려왔음 ✅ 서브메뉴 너비가 전체 너비와 같다.(배경이 있음) - 지난번 A-1 JUST 쇼핑몰에서는 이러한 형태였다. 1-1. 메뉴 바 mark-up 재단소개 설립취지 연혁 찾아오시는길 후원하기 국내후원 국외후원 맞춤후원 자료실 서식자료실 사진자료..

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..

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 되었을 때 이벤트를 각각 지정해줄 수 있음(연결해줌) - 조건문처럼 콤마로 구분한다. - 마우스 오버되면 슬라이드 다운, 아니면 슬라이드 업