Youtor
웹디자인 기능사 실기 21강 2장 최다빈출 모형 공지사항갤러리 합석부분
>> YOUR LINK HERE: ___ http://youtube.com/watch?v=9bLMc3ddANo
웹디자인 기능사 실기편입니다 (html, css, javascript) • 책은 영진닷컴(이기적) 웹디자인기능사 실기 24년 버전이며 • 블로그에 책자료는 따로 올려놓겠습니다 • 〈div class= contents 〉 • 〈ul class= tabmenu 〉 • 〈li class= active 〉 • 〈a href= # 〉공지사항〈/a〉 • 〈div class=notice〉 • 〈ul〉 • 〈li〉〈a href= # 〉 대한은행 홈페이지 개편 안내 • 〈span〉2024.07.12〈/span〉 • 〈/a〉〈/li〉 • 〈li〉〈a href= # 〉 종합생활금융 플랫폼 코리아은행 • 〈span〉2024.07.12〈/span〉 • 〈/a〉〈/li〉 • 〈li〉〈a href= # 〉 시스템 정기 점검 안내 • 〈span〉2024.07.12〈/span〉 • 〈/a〉〈/li〉 • 〈li〉〈a href= # 〉 오픈뱅킹 앱 사용법 안내 • 〈span〉2024.07.12〈/span〉 • 〈/a〉〈/li〉 • 〈/ul〉 • 〈/div〉 • 〈/li〉 • 〈li〉〈a href= # 〉갤러리〈/a〉 • 〈div class=gallery〉 • 〈ul〉 • 〈li〉〈a href= # 〉 • 〈img src= images/gallery1.jpg alt= 1 〉 • 〈/a〉〈/li〉 • 〈li〉〈a href= # 〉 • 〈img src= images/gallery2.jpg alt= 2 〉 • 〈/a〉〈/li〉 • 〈li〉〈a href= # 〉 • 〈img src= images/gallery3.jpg alt= 3 〉 • 〈/a〉〈/li〉 • 〈/ul〉 • 〈/div〉 • 〈/li〉 • 〈li〉〈a href= # 〉게시판〈/a〉 • 〈div class= bord 〉 • 〈ul〉 • 〈li〉〈a href= # 〉 우리의 자랑을 만들어보세요〈/a〉〈/li〉 • 〈li〉〈a href= # 〉 우리가족을 소개하세요〈/a〉〈/li〉 • 〈li〉〈a href= # 〉 우리 상품을 맛보세요〈/a〉〈/li〉 • 〈/ul〉 • 〈/div〉 • 〈/li〉 • 〈/ul〉 • • .contents{ • float: left; • width: 1200px; • height: 200px; • position: absolute; • } • .tabmenu{ • float: left; • width: 395px; • height: 180px; • margin-top: 10px; • margin-bottom: 10px; • } • .tabmenu〉li{ • float: left; • width: 100px; • line-height: 30px; • } • .tabmenu〉li〉a{ • display: block; • font-size: 16px; • text-align: center; • background-color: #cccccc; /*기본 색은 어두운 회색*/ • border: 1px solid #dddddd; /*테두리를 만들어줌 단, 공지사항과 • 갤러리 사이는 2픽셀 두께*/ • • } • .tabmenu〉li〉a:hover{ • background-color: #eeeeee; /*마우스 가져다 대면 밝은 회색*/ • } • .tabmenu〉li:first-child a{ • border-right: none; /*공지사항 오른쪽 테두리를 지움*/ • } • .tabmenu〉li.active〉a{ • background-color: #ffffff; • } • .tabmenu〉li div{ • position: absolute; • left: 0px; • height: 0; /*텝 콘텐츠 영역의 높이는 0으로 지정하여 보이지 않도록 함*/ • overflow: hidden; • } • .tabmenu〉li.active div{ • width: 393px; • height: 148px; • border: 1px solid #dddddd; • z-index: 1; • } • .notice ul{ • float: left; • width: 393px; • margin-top: 12px; • margin-bottom: 12px; • } • .notice li{ • height: 32px; • line-height: 32px; • font-size: 15px; • margin-left: 10px; • margin-right: 10px; • } • .notice li:nth-child(2n){ /* 공지사항 중 2배수 리스트 스타일 */ • background-color:#cccccc; • } • .notice li span{ • float: right; • } • .notice li:hover{ • font-weight: bold; • } • .gallery li{ • float: left; • margin-top: 15px; • margin-left: 5px; • } • .gallery img{ • width: 100px; • height: 100px; • padding: 10px; • } • .gallery li:hover{ • opacity: 0.5; • } • • $(function(){ • $('.tabmenu〉li〉a').click(function(){ • $(this).parent().addClass('active') //공지사항과 갤러리 클릭한다면 활성화 된다 • .siblings() // 형제자매를 부렀음 • .removeClass('active') // 제거 • return false; //반환 --〉 맨위로 올라가지 않음 (새로고침 안됨) • }); • }); • • #웹디자인기능사실기, #웹디자인, #html, #css, #javascript, • #와이어프레임, #와이어프레임틀, #contents, #notice, #gallery, • • 링크 • https://blog.naver.com/bong9tv/223554...
#############################
