728x90
반응형
.column col6 편집
html 마크업
css 편집_col6-gallery
h4 , btn 편집하기
hover 시 이미지 색상 변경
gallery_img 편집하기
이미지 width 100%로 하여 박스안에 비율 맞추기
이미지 li의 레이어 순서를 정해주기 위해 position: absolute 하고 z-index로 레이어 순서를 정해준다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="author" content="조반짝 팀프로젝트 이름(제작자)">
<meta name="description" content="웹표준에 의한 웹페이지 샘플링입니다.(내용)">
<meta name="keywords" content="웹표준, 조반짝, 하이미디어, 샘플사이트(키워드)">
<meta name="generator" content="Visual Studio Code(작성도구)">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹표준_header-contents</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/slick.css">
<link rel="stylesheet" href="./css/style.css">
<!-- 웹폰트 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">
</head>
<body>
<!-- 스킵 네비게이션 -->
<div id="skip">
<a href="#cont_nav">전체 메뉴 바로가기</a>
<a href="#cont_ban">배너 영역 바로가기</a>
<a href="#cont_cont">컨텐츠 영역 바로가기</a>
</div>
<div id="wrap">
<div id="header">
<div class="container">
<div class="header">
<div class="header_menu">
<a href="#">로그인 가입</a>
<a href="#">CONTACT US</a>
<a href="#">ENGLISH</a>
</div>
<div class="header_tit mt50">
<h1>하이미디어 구로캠퍼스</h1><br>
<a href="https://www.himedia.co.kr/">자바기반 풀스택 웹개발자3</a>
</div>
<div class="header_icon mt30">
<a href="#" class="icon1"><span>icon1</span class="ir_pm"></a>
<a href="#" class="icon2"><span>icon2</span class="ir_pm"></a>
<a href="#" class="icon3"><span>icon3</span class="ir_pm"></a>
<a href="#" class="icon4"><span>icon4</span class="ir_pm"></a>
</div>
</div>
</div>
</div>
<section id="contents">
<article id="cont_nav"> <!--cont_nav-->
<div class="container">
<h2 class="ir_su">전체메뉴</h2>
<div class="nav clearfix">
<div>
<h3 class="h3">HTML5</h3>
<ol class="clearfix">
<li><a href="#">html1</a></li>
<li><a href="#">html2</a></li>
<li><a href="#">html3</a></li>
<li><a href="#">html4</a></li>
<li><a href="#">html5</a></li>
<li><a href="#">html6</a></li>
<li><a href="#">html7</a></li>
<li><a href="#">html8</a></li>
<li><a href="#">html9</a></li>
<li><a href="#">html10</a></li>
</ol>
</div>
<div>
<h3 class="h3">CSS3</h3>
<ol class="clearfix">
<li><a href="#">css1</a></li>
<li><a href="#">css2</a></li>
<li><a href="#">css3</a></li>
<li><a href="#">css4</a></li>
<li><a href="#">css5</a></li>
<li><a href="#">css6</a></li>
<li><a href="#">css7</a></li>
<li><a href="#">css8</a></li>
<li><a href="#">css9</a></li>
<li><a href="#">css10</a></li>
<li><a href="#">css11</a></li>
<li><a href="#">css12</a></li>
</ol>
</div>
<div>
<h3 class="h3">웹표준</h3>
<ol class="clearfix">
<li><a href="#">웹표준1</a></li>
<li><a href="#">웹표준2</a></li>
<li><a href="#">웹표준3</a></li>
<li><a href="#">웹표준4</a></li>
<li><a href="#">웹표준5</a></li>
<li><a href="#">웹표준6</a></li>
<li><a href="#">웹표준7</a></li>
<li><a href="#">웹표준8</a></li>
</ol>
</div>
</div>
</div>
</article>
<article id="cont_tit"> <!--cont_tit-->
<div class="container">
<div class="tit">
<h2> “ 프론트 엔드는 너무 쉬워서 금방 끝난다.” </h2>
<a href="#" class="btn"><span class="ir_pm">전체메뉴</span></a>
</div>
</div>
</article>
<article id="cont_ban"> <!--cont_ban-->
<div class="container">
<div class="ban">
<div><a href="#"><img src="./image/ban1.png" alt="구이미지"></a></div>
<div><a href="#"><img src="./image/ban2.png" alt="나무이미지"></a></div>
<div><a href="#"><img src="./image/ban3.png" alt="추상이미지"></a></div>
<div><a href="#"><img src="./image/ban1.png" alt="구이미지"></a></div>
<div><a href="#"><img src="./image/ban2.png" alt="나무이미지"></a></div>
<div><a href="#"><img src="./image/ban3.png" alt="추상이미지"></a></div>
<div><a href="#"><img src="./image/ban1.png" alt="구이미지"></a></div>
<div><a href="#"><img src="./image/ban2.png" alt="나무이미지"></a></div>
<div><a href="#"><img src="./image/ban3.png" alt="추상이미지"></a></div>
</div>
</article>
<article id="cont_cont"> <!--cont_cont-->
<div class="container">
<div class="cont">
<div class="column col1">
<h3>
<span class="icon_img ir_pm">아이콘1</span>
<em class="icon_tit">Notice1</em>
</h3>
<p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
<div class="notice1 noti">
<h4 class="h4">공지사항1</h4>
<ul>
<li><a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a></li>
<li><a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a></li>
<li><a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a></li>
<li><a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a></li>
<li><a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a></li>
</ul>
<a href="#" class="more ir_pm">더보기</a>
</div>
<div class="notice2 noti">
<h4 class="h4">공지사항2</h4>
<ul>
<li>
<a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a>
<span>2023-06-23</span>
</li>
<li>
<a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a>
<span>2023-06-23</span>
</li>
<li>
<a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a>
<span>2023-06-23</span>
</li>
<li>
<a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a>
<span>2023-06-23</span>
</li>
<li>
<a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a>
<span>2023-06-23</span>
</li>
</ul>
<a href="#" class="more ir_pm">더보기</a>
</div>
</div><!--col1-->
<div class="column col2">
<h3>
<span class="icon_img ir_pm">아이콘2</span>
<em class="icon_tit">Notice2</em>
</h3>
<p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
<!-- 게시판 3 -->
<div class="notice3">
<h4 class="h4">HTML Reference</h4>
<ul>
<li>
<a href="#">
<img src="./image/hover1.png" alt="식물">
<strong>[HTML]<table ></strong>
<span><table>태그는 표를 만들 때 사용합니다.</span>
</a>
</li>
<li>
<a href="#">
<img src="./image/hover2.png" alt="커피잔">
<strong>[HTML]<table ></strong>
<span><table>태그는 표를 만들 때 사용합니다.</span>
</a>
</li>
<li>
<a href="#">
<img src="./image/hover3.png" alt="바다">
<strong>[HTML]<table ></strong>
<span><table>태그는 표를 만들 때 사용합니다.</span>
</a>
</li>
<li>
<a href="#">
<img src="./image/hover4.png" alt="반원">
<strong>[HTML]<table ></strong>
<span><table>태그는 표를 만들 때 사용합니다.</span>
</a>
</li>
</ul>
<a href="#" class="more ir_pm">더보기</a>
</div>
</div><!--col2-->
<div class="column col3">
<h3>
<span class="icon_img ir_pm">아이콘3</span>
<em class="icon_tit">Notice3</em>
</h3>
<p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
</div><!--col3-->
<div class="column col4">
<h3>
<span class="icon_img ir_pm">아이콘4</span>
<em class="icon_tit">Notice4</em>
</h3>
<p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
<div class="hover1">
<h4 class="h4">Mouse Hover1</h4>
<ul class="clearfix">
<li>
<a href="#">
<span>
<img src="./image/hover1.png" alt="풀">
<em>바로가기</em>
</span>
<strong>풀</strong>
</a>
</li>
<li>
<a href="#">
<span>
<img src="./image/hover2.png" alt="커피잔">
<em>바로가기</em>
</span>
<strong>커피잔</strong>
</a>
</li>
<li>
<a href="#">
<span>
<img src="./image/hover3.png" alt="바다">
<em>바로가기</em>
</span>
<strong>바다</strong>
</a>
</li>
</ul>
</div>
<div class="hover2">
<h4 class="ir_su">Mouse Hover2</h4>
<ul class="clearfix">
<li>
<a href="#">
<span>
<img src="./image/hover4.png" alt="반원">
<em>바로가기</em>
</span>
<strong>반원</strong>
</a>
</li>
<li>
<a href="#">
<span>
<img src="./image/hover5.png" alt="책상">
<em>바로가기</em>
</span>
<strong>책상</strong>
</a>
</li>
<li>
<a href="#">
<span>
<img src="./image/hover6.png" alt="식물">
<em>바로가기</em>
</span>
<strong>식물</strong>
</a>
</li>
</ul>
</div>
</div><!--col4-->
<div class="column col5">
<h3>
<span class="icon_img ir_pm">아이콘5</span>
<em class="icon_tit">Notice5</em>
</h3>
<p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
<div class="tab_menu">
<!-- 웹표준 상 필요한 탭메뉴라는 것을 알려줌 -->
<h4 class="ir_su">tab_menu</h4>
<ul>
<li class="active"><a href="#">공지사항1</a>
<ul>
<li>
<a href="#">첫번째 공지사항 탭메뉴입니다.첫번째 공지사항 탭메뉴입니다.첫번째 공지사항 탭메뉴입니다.첫번쨰 공지사항 탭메뉴입니다.</a>
</li>
<li>
<a href="#">첫번째 공지사항 탭메뉴입니다.첫번째 공지사항 탭메뉴입니다.첫번째 공지사항 탭메뉴입니다.첫번째 공지사항 탭메뉴입니다.</a>
</li>
<li>
<a href="#">첫번째 공지사항 탭메뉴입니다.첫번째 공지사항 탭메뉴입니다.첫번째 공지사항 탭메뉴입니다.첫번째 공지사항 탭메뉴입니다.</a>
</li>
</ul>
</li>
<li><a href="#">공지사항2</a>
<ul>
<li>
<a href="#">두번째 공지사항 탭메뉴입니다.두번째 공지사항 탭메뉴입니다.두번째 공지사항 탭메뉴입니다.</a>
</li>
<li>
<a href="#">두번째 공지사항 탭메뉴입니다.두번째 공지사항 탭메뉴입니다.두번째 공지사항 탭메뉴입니다.</a>
</li>
<li>
<a href="#">두번째 공지사항 탭메뉴입니다.두번째 공지사항 탭메뉴입니다.두번째 공지사항 탭메뉴입니다.</a>
</li>
</ul>
</li>
<li><a href="#">공지사항3</a>
<ul>
<li>
<a href="#">세번째 공지사항 탭메뉴입니다.세번째 공지사항 탭메뉴입니다.세번째 공지사항 탭메뉴입니다.</a>
</li>
<li>
<a href="#">세번째 공지사항 탭메뉴입니다.세번째 공지사항 탭메뉴입니다.세번째 공지사항 탭메뉴입니다.</a>
</li>
<li>
<a href="#">세번째 공지사항 탭메뉴입니다.세번째 공지사항 탭메뉴입니다.세번째 공지사항 탭메뉴입니다.</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="notice4">
<h4 class="h4">최신 <span>공지사항</span></h4>
<ul>
<li>
<a href="#">웹디자이너와 웹 퍼블리싱을 알아봅시다.웹디자이너와 웹 퍼블리싱을 알아봅시다.웹디자이너와 웹 퍼블리싱을 알아봅시다.</a>
<span>2018.11.19</span>
</li>
<li>
<a href="#">웹디자이너와 웹 퍼블리싱을 알아봅시다.웹디자이너와 웹 퍼블리싱을 알아봅시다.웹디자이너와 웹 퍼블리싱을 알아봅시다.</a>
<span>2018.11.19</span>
</li>
<li>
<a href="#">웹디자이너와 웹 퍼블리싱을 알아봅시다.웹디자이너와 웹 퍼블리싱을 알아봅시다.웹디자이너와 웹 퍼블리싱을 알아봅시다.</a>
<span>2018.11.19</span>
</li>
</ul>
<a href="#" class="more">더보기</a>
</div>
</div><!--col5-->
<div class="column col6">
<h3>
<span class="icon_img ir_pm">아이콘6</span>
<em class="icon_tit">Notice6</em>
</h3>
<p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
<div class="gallery">
<h4 class="h4">포트폴리오</h4>
<div class="gallery_btn">
<ul>
<li class="gb_icon1"><a href="#"><span class="ir_pm">시작</span></a></li>
<li class="gb_icon2"><a href="#"><span class="ir_pm">정지</span></a></li>
<li class="gb_icon3"><a href="#"><span class="ir_pm">이전이미지</span></a></li>
<li class="gb_icon4"><a href="#"><span class="ir_pm">다음이미지</span></a></li>
</ul>
</div>
<div class="gallery_img">
<ul>
<li><a href="#"><img src="./img/gall1.png" alt=""></a></li>
<li><a href="#"><img src="./img/gall2.png" alt=""></a></li>
<li><a href="#"><img src="./img/gall3.png" alt=""></a></li>
<li><a href="#"><img src="./img/gall4.png" alt=""></a></li>
<li><a href="#"><img src="./img/gall5.png" alt=""></a></li>
</ul>
</div>
</div>
</div><!--col6-->
</div>
</div>
</article>
</section>
<div id="footer">
<div class="container"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="./js/slick.js"></script>
<script>
// 탭메뉴
const tab_list = $(".tab_menu");
tab_list.find("ul ul").hide();
// 공지사항 컨텐츠를 모두 감추는 명령어
tab_list.find("li.active>ul").show();
// 버튼 중 active 가지고 있는 li의 자식 중 ul을 찾아서 보여주라는 명령어
// 함수
function tabMenu(e){
e.preventDefault();
let th = $(this);
// 무엇을 클릭할 지 모르기 때문에 const 대신 let 사용
th.next("ul").show().parent("li").addClass("active").siblings
// 부모중에서 li를 찾고 active값을 넣어주겠다.
("li").removeClass("active").find(">ul").hide();
}
// e.preventDefault(); : 기본적인 명령어를 취소시키는 명령어
// let th = $(this); : 선택한 버튼 값을 th 변수에 대입
// th.next("ul").show() : 선택한 요소의 다음 ul을 찾아서 보여주는 명령어
// parent("li") : ul의 부모인 li 선택하는 명령어
// .addClass("active") : 선택한 요소에 active라는 클래스를 추가하는 명령어
// .sibling("li") : 선택한 요소의 형제 li를 선택하라는 명령어
tab_list.find("ul>li>a").click(tabMenu).focus(tabMenu);
// 탭리스트 안에 있는 a를 찾아서 클릭했을 때 이벤트 발생
// 이벤트는 함수 tabMenu를 불러오라는 이벤트임
// .focus(tabMenu) : 선택되었을 때 이벤트 발생(tab메뉴로)
// 배너이미지(슬릭)
$('.ban').slick({
infinite: true, //무한반복
slidesToShow: 3, //한번에 보여주는 이미지 갯수
slidesToScroll: 1, //버튼을 눌렀을 때 넘어가는 이미지 갯수
autoplay: true, //자동이로 이미지 이동
autoplaySpeed: 3000, //3초마다 자동으로 이미지 이동
dots: true, //닷버튼 생성
});
$(".tit .btn").click(function(){
// $(".nav").show();
// $(".nav").fadeIn(500);
// $(".nav").slideDown(500);
// $(".nav").css("display","block"); // block은 보여주는 기능도 있다.
// $(".nav").toggle();
$(".nav").slideToggle();
$(this).toggleClass("on");
});
</script>
</body>
</html>@charset "utf-8";
#wrap{
width: 100%;
}
#header{
width: 100%;
height: 325px;
/* 헤더 이미지 높이 고려 */
background: url(../image/header_bg.jpg) no-repeat top center;
/* 이미지를 고정하기 위해 no-repeat을 해주고 위치를 잡아주어야하고 repeat으로 변경*/
}
#contents{}
#cont_nav{
width: 100%;
/* height: 200px; */
/* background-color: lightcoral; */
}
#cont_tit{
width: 100%;
/* height: 200px; */
background-color: lightcyan;
}
#cont_ban{
width: 100%;
/* height: 200px; */
/* background-color: lightgray; */
}
#cont_cont{
width: 100%;
/* height: 200px;
background-color: lightgreen; */
}
#footer{
width: 100%;
height: 220px;
background-color: lightseagreen;
}
/* container */
.container{
width: 990px;
margin: 0 auto;
height: inherit;
background-color: rgba(255,255,255,0.3);
}
/* skip */
#skip{
/* 기준점 잡아주기 */
position: relative;
}
#skip a{
position: absolute;
width: 140px;
background-color: #333;
color: #fff;
height: 30px;
text-align: center;
line-height: 30px;
/* 탭 위치 설정 */
left:0;
top: -40px;
}
/* 스킵 네비게이션 활성화 */
#skip a:active,
#skip a:focus{
top: 0;
}
/* header */
.header{
/* height: 325px; */
}
.header .header_menu{
/* background-color: aqua; */
/* 메뉴 오른쪽으로 정렬하기 */
text-align: right;
}
.header .header_menu a{
color: #fff;
/* top,left,bottom 여백주기 */
padding: 10px 0 10px 20px;
/* 윗쪽여백이 안 먹힘 > inline-block 을 사용함 */
display: inline-block;
/* 마우스 오버 속도 넣기 */
transition: all 0.5s;
}
.header .header_menu a:hover{
/* 마우스 오버시 글자색 바뀔수 있도록 한다. */
color: #333;
}
.header .header_tit{
/* background-color: red; */
text-align: center;
}
.header .header_tit h1{
color: #fff;
background-color: #4aa8d4;
font-size: 28px;
/* 글자에만 색칠해주기 문제는 a태그에 붙게됨 */
display: inline-block;
padding: 5px 20px;
transition: all 0.5s;
text-shadow: 0 2px 2px darkblue;
}
.header .header_tit h1:hover{
background-color: darkblue;
cursor: pointer;
}
.header .header_tit a{
font-size: 18px;
background-color: #2698cb;
display: inline-block;
/* 위아래 박스 여백이 없어짐 */
padding: 5px 20px;
color: #fff;
/* 위아래 박스 겹쳐지게하기 */
margin-top: -7px;
}
.header .header_icon{
text-align: center;
}
.header .header_icon a{
width: 60px;
height: 60px;
background-color: #333;
/* 인라인 구조이기 때문에 display: inline-block 적용*/
display: inline-block;
/* 양옆 여백주기 */
margin: 0 5px;
/* 아이콘 이미지 넣어주기 */
background: url(../image/icon.png);
}
.header .header_icon a.icon1{
background-position: 0px 0px;
/* 백그라운드 포지션으로 이미지의 위치(X,Y)를 지정해준다. */
}
.header .header_icon a.icon2{
background-position: 0px -60px;
}
.header .header_icon a.icon3{
background-position: 0px -120px;
}
.header .header_icon a.icon4{
background-position: 0px -180px;
}
.header .header_icon a.icon1:hover{
background-position: -60px 0px;
}
.header .header_icon a.icon2:hover{
background-position: -60px -60px;
}
.header .header_icon a.icon3:hover{
background-position: -60px -120px;
}
.header .header_icon a.icon4:hover{
background-position: -60px -180px;
}
.header .header_icon a span{
font-size: 0;
/* lineheight 값이 먹기 때문에 매번 주기가 번거롭다. */
}
/* nav */
.nav{
padding: 30px 0;
/* background-color: #4aa8d4; */
display: none;
}
.nav > div{
float: left;
width: 40%;
/* 전체너비의 40%사용 */
}
.nav > div:nth-of-type(3){
width: 20%;
/* 마지막 div 전체너비의 20%사용 */
}
/* .nav > div > h3{
font-size: 18px;
font-weight: bold;
color: #25a2d0;
하단 여백 띄워주기
margin-bottom: 4px;
} */
.nav > div > ol{}
.nav > div > ol > li{
width: 50%;
float: left;
}
.nav > div:nth-of-type(3) li{
width: 100%;
}
.nav > div > ol > li > a{}
.nav > div > ol > li > a:hover{
text-decoration: underline;
}
/* .tit */
.tit{
position: relative;
}
.tit h2{
font-size: 40px;
/* 아이콘 사이여백 넣기 위해 10px 추가 */
height: 70px;
line-height: 70px;
text-align: center;
font-family: 'Black Han Sans', sans-serif;
}
.tit a.btn{
width: 60px;
height: 60px;
background: url(../image/icon.png) 0px -600px;
display: block;
position: absolute;
right: 0;
top: 5px;
}
.tit a.btn:hover{
background-position: -60px -600px;
}
.tit a.btn.on{
background-position: 0px -660px;
}
.tit a.btn.on:hover{
background-position: -60px -660px;
}
/* ban */
.ban{
padding: 30px 0px 30px 20px;
position: relative;
}
.slick-prev{
/* 이전아이콘 위치잡아주기 */
position: absolute;
top: 65px;
left: -80px;
/* 아이콘이미지 불러오기 */
width: 43px;
height: 43px;
background: url(../image/icon.png) -150px 0;
/* 글씨없애주기 */
font-size: 0;
line-height: 0;
text-indent: -99999px;
}
.slick-prev:hover{
background-position: -193px 0;
cursor: pointer;
}
.slick-next{
position: absolute;
top: 65px;
right: -80px;
width: 43px;
height: 43px;
background: url(../image/icon.png) -150px -43px;
font-size: 0;
line-height: 0;
text-indent: 99999px;
}
.slick-next:hover{
background-position: -193px -43px;
cursor: pointer;
}
.ban img{
/* border: 4px solid #dcdcdc; */
border: 4px solid transparent;
/* 마우스오버시 이미지크기가 변경되지 않도록 고정하는 역할 */
}
.ban img:hover{
border: 4px solid red;
}
.ban .slick-dots{
/* background-color: #2698cb; */
text-align: center;
/* 위치 잡아주기 위해 포지션을 띄움 */
position: absolute;
bottom: 0px;
/* position을 띄우면서 너비값을 잃음 다시 너비값 넣어줌 */
width: 100%;
margin-left: -22px;
}
.ban .slick-dots li{
/* 위치 잡아주기 */
display: inline-block;
margin: 10px;
}
.ban .slick-dots li button{
/* 닷 만들어주기 */
width: 10px;
height: 10px;
background-color: aqua;
border-radius: 50%;
cursor: pointer;
font-size: 0;
line-height: 0;
text-indent: -99999px;
}
.ban .slick-dots li.slick-active button{
background-color: #2698cb;
}
/* cont */
.cont{
/* 위쪽 여백주기 */
padding-top: 30px;
overflow: hidden;
}
/* 여섯개의 박스를 동시에 편집할 수 있음 */
.cont .column{
width: 289px;
height: 363px;
/* border 오른쪽 선 넣어주기 */
border-right: 1px solid #2698cb;
/* 박스 안쪽여백 */
padding-right: 30px;
/* 박스 바깥 쪽 여백 */
margin: 0 30px 30px 0;
/* 박스 옆으로 나열 */
float: left;
/* 아이콘의 기준점 */
position: relative;
}
/* 행의 마지막 박스는 border, padding=right, margin-right 삭제해야 위로 올라가 배치됨 */
.cont .col1{}
.cont .col2{}
.cont .col3{
border: 0;
margin-right: 0;
padding-right: 0;
}
.cont .col4{}
.cont .col5{}
.cont .col6{
border: 0;
margin-right: 0;
padding-right: 0;
}
.cont .column .icon_img{
/* span 태그이기 때문에 넓이값 가지기 위해 block구조로 변경 */
display: block;
width: 60px;
height: 60px;
/* 배경을 복합적으로 사용할 때 background 사용 */
background: url(../image/icon.png);
/* 아이콘 배치 */
position: absolute;
top:0;
left: 0;
}
/* 아이콘 이미지를 각 각 변경하기 위해 col1 -6 을 따로 편집 */
.cont .col1 .icon_img{background-position: 0px -240px;}
.cont .col2 .icon_img{background-position: 0px -300px;}
.cont .col3 .icon_img{background-position: 0px -360px;}
.cont .col4 .icon_img{background-position: 0px -420px;}
.cont .col5 .icon_img{background-position: 0px -480px;}
.cont .col6 .icon_img{background-position: 0px -540px;}
/* 마우스 오버시 아이콘 변경되게하기 */
.cont .col1 .icon_img:hover{background-position: -60px -240px;}
.cont .col2 .icon_img:hover{background-position: -60px -300px;}
.cont .col3 .icon_img:hover{background-position: -60px -360px;}
.cont .col4 .icon_img:hover{background-position: -60px -420px;}
.cont .col5 .icon_img:hover{background-position: -60px -480px;}
.cont .col6 .icon_img:hover{background-position: -60px -540px;}
.cont .column .icon_tit{
font-size: 18px;
color: #2698cb;
/* 타이틀 위치배치 */
padding-left: 70px;
/* padding 과 margin의 차이점 */
font-weight: bold;
}
.cont .column .icon_desc{
/* 설명 위치배치 */
padding-left: 70px;
/* 아랫선 배치 */
border-bottom: 1px solid #2698cb;
/* 선 위아래 여백 */
padding-bottom: 15px; /*선 위 여백*/
margin-bottom: 15px; /*선 아래 여백*/
}
.cont .col1 .noti{
/* a.more의 기준점 */
position: relative;
}
.cont .col1 .noti a.more{
display: block;
width: 17px;
height: 17px;
background: url(../image/icon.png) -150px -90px;
/* 아이콘 배치하기 */
position: absolute;
right: 0;
top: 0;
}
.cont .col1 .notice1{}
.cont .col1 .notice1 ul{}
.cont .col1 .notice1 ul li{
position: relative;
}
.cont .col1 .noti ul li::before{
position: absolute;
content: "";
width: 2px;
height: 9px;
background-color: #aaa;
left: 5px;
top: 5px;
border-radius: 5px;
}
.cont .col1 .notice1 ul li a{
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding-left: 10px;
}
.cont .col1 .notice2{
margin-top: 15px;
}
.cont .col1 .notice2 ul{}
.cont .col1 .notice2 ul li{
overflow: hidden;
position: relative;
}
.cont .col1 .notice2 ul li a{
display: block;
width: 65%;
float: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 10px;
/* box-sizing 이 있어야 글자가 밀리지 않음 */
box-sizing: border-box;
}
.cont .col1 .notice2 ul li span{
display: block;
width: 30%;
float: right;
}
/* col4 */
.col4{}
.col4 .hover1{}
.col4 .hover1 h4{}
.col4 .hover1 ul{
/* overflow: hidden을 사용하면 93px 이상으로 잘라버린다. >> clearfix사용해서 하는 방법이 좋다.*/
/* overflow: hidden; */
}
.col4 .hover1 ul li{
/* strong이 보일 수 있도록 높이값을 높인다. */
/* 위치잡아주기 */
float: left;
margin-right: 5px;
/* em의 기준점 */
position: relative;
}
.col4 .hover1 ul li:nth-of-type(3){
margin-right: 0;
}
.col4 .hover1 ul li a{}
.col4 .hover1 ul li a span{
position: relative;
width: 93px;
height: 93px;
overflow: hidden;
display: block;
}
.col4 .hover1 ul li a span img{
/* 사이즈 100%로 맞춰줘야 비율이 맞게 나온다. */
width: 100%;
}
.col4 .hover1 ul li a span em{
display: block;
width: 93px;
height: 93px;
background-color: rgba(0,255,255,0.3);
text-align: center;
line-height: 93px;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s;
}
.col4 .hover1 ul li:hover a span em{
top: 100px;
}
.col4 .hover1 ul li a strong{
/* strong 가운데정렬하기 */
display: block;
width: 100%;
text-align: center;
}
.col4 .hover2{
margin-top: 15px;
}
.col4 .hover2 ul{}
.col4 .hover2 ul li{
float: left;
margin-right: 5px;
}
.col4 .hover2 ul li:nth-of-type(3){
margin-right: 0;
}
.col4 .hover2 ul li a{}
.col4 .hover2 ul li a strong{
text-align: center;
display: block;
}
.col4 .hover2 ul li a span{
display: block;
overflow: hidden;
position: relative;
width: 93px;
height: 93px;
}
.col4 .hover2 ul li a span img{
width: 100%;
}
.col4 .hover2 ul li a span em{
background-color: rgba(0,255,255,0.3);
display: block;
position: absolute;
width: 100%;
text-align: center;
line-height: 50px;
bottom: -50px;
left: 0;
color: #fff;
transition: all 0.5s;
width: 93px;
height: 50px;
}
.col4 .hover2 ul li a span:hover em{
bottom: 0;
}
/* col2_notice3 */
.notice3{
position: relative;
}
.notice3 ul{}
.notice3 ul li{
/* a는 인라인구조라서 기준이 안 잡힐 수 있음, li에 기준점 잡아줌 */
position: relative;
/* 패딩값으로 좌표값을 계산해서 위치를 잡아주어야한다. */
padding: 8px 0 14px 60px;
}
.notice3 ul li a{}
.notice3 ul li a img{
/* 이미지 사이즈 줄이기(너비값만 넣어주어야 비율이 맞게 들어감) */
width: 50px;
/* 이미지 띄워주어야함 */
position: absolute;
left: 0;
top: 0;
border: 1px solid #0093bd;
}
.notice3 ul li a strong{
/* 블럭구조로 바꾸어서 행이 바뀌도록한다. */
display: block;
}
.notice3 ul li a span{
/* 블럭구조로 바꾸어서 행이 바뀌도록한다. */
display: block;
}
.notice3 a.more{
position: absolute;
top: 0;
right: 0;
display: block;
width: 17px;
height: 17px;
background: url(../image/icon.png) -150px -90px;}
/* col5_tab_menu */
.tab_menu{
border: 1px solid #ccc;
padding: 8px;
height: 105px;
/* ul의 기준점 */
position: relative;
}
.tab_menu ul{
overflow: hidden;
/* 아랫선 넣어주기 */
border-bottom: 1px solid #ddd;
}
.tab_menu ul li{
/* ul이 꽉차있기 때문에 float을 해도 옆으로 안간다.
그래서 ul에 position: absolute로 움직여주어야함 */
float: left;
border: 1px solid #ccc;
margin-right : -1px;
/* 아랫선 겹쳐지는 부분 없애기 */
margin-bottom: -1px;
}
.tab_menu ul li a{
display: block;
padding: 5px 10px;
}
.tab_menu ul li ul{
position: absolute;
width: 270px;
left: 0;
top: 48px;
border: 0;
}
.tab_menu ul li ul li{
/* 첫번째 li 에만 border, float을 넣어야하는데 > 표시가 없어서
두번째 li에도 적용되어서 border, float 해지해주어야함 */
border: 0;
float: none;
/* 공지사항 내용 안으로 들여쓰기 */
padding-left: 20px;
background: url(../image/KakaoTalk_20230627_102643215.gif) no-repeat 8px 8px;
}
.tab_menu ul li ul li a{
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 20px;
/* 공지사항 내용 위치잡기 */
padding: 0 0 3px 0;
}
.tab_menu ul li.active{
background-color: #2c94c4;
}
.tab_menu ul li.active a{
/* 첫번째 공지사항내용이 흰색이라 안보임 */
color: #fff;
}
.tab_menu ul li.active ul li a{
/* 첫번쨰 공지사항 내용 글자색 변경해주면 보인다. */
color: #333;
}
/* col5_tab_menu notice4 */
.notice4{
border: 1px solid #ccc;
margin-top: 15px;
position: relative;
}
.notice4 h4{
border-bottom: 1px solid #ccc;
padding: 8px 10px;
}
.notice4 h4 span{
color: hotpink;
font-weight: bold;
}
.notice4 ul{
/* ul 안쪽 여백 */
padding: 10px;
}
.notice4 ul li{
overflow: hidden;
background: url(../image/KakaoTalk_20230627_102643215.gif) no-repeat 1px 10px;
padding: 2px 0px 0px 13px;
}
.notice4 ul li a{
/* 인라인구조 블럭구조로 변경!! */
display: block;
width: 65%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
float: left;
padding-left: 1px;
box-sizing: border-box;
}
.notice4 ul li span{
/* 인라인구조 블럭구조로 변경!! */
display: block;
width: 30%;
float: right;
/* 글씨 오른쪽 정렬 */
text-align: right;
}
.notice4 a.more {
position: absolute;
right: 10px;
top: 10px;
}
/* col6_gallery_편집만 */
.gallery{
/* 박스 만들기 */
border: 1px solid #aaa;
height: 255px;
overflow: hidden;
position: relative;
}
.gallery h4{
/* 아랫선 만들기 */
border-bottom: 1px solid #aaa;
padding: 10px 0 8px 10px;
/* 상 10 우 0 하8 좌 10 */
margin-bottom: 0px;
}
.gallery .gallery_btn{
position: absolute;
right: 10px;
top: 8px;
}
.gallery .gallery_btn ul{
overflow: hidden;
}
.gallery .gallery_btn ul li{
float: left;
margin: 1px 2px;
}
.gallery .gallery_btn ul li a{
/* 너비 높이 주기 위해 인라인에서 블럭구조로 변경 */
display: block;
/* 아이콘이미지 넣기 */
width: 23px;
height: 23px;
background: url(../image/icon.png);
}
.gallery .gallery_btn ul li.gb_icon1 a{background-position: -150px -120px;}
.gallery .gallery_btn ul li.gb_icon2 a{background-position: -150px -143px;}
.gallery .gallery_btn ul li.gb_icon3 a{background-position: -150px -166px;}
.gallery .gallery_btn ul li.gb_icon4 a{background-position: -150px -189px;}
.gallery .gallery_btn ul li.gb_icon1 a:hover{background-position: -173px -120px;}
.gallery .gallery_btn ul li.gb_icon2 a:hover{background-position: -173px -143px;}
.gallery .gallery_btn ul li.gb_icon3 a:hover{background-position: -173px -166px;}
.gallery .gallery_btn ul li.gb_icon4 a:hover{background-position: -173px -189px;}
.gallery .gallery_img{
position: relative;
}
.gallery .gallery_img ul{}
.gallery .gallery_img ul li{
position: absolute;
top: 0;
left: 0;
}
.gallery .gallery_img img{
width: 100%;
}
/* 레이어 순서 정하기 */
.gallery .gallery_img ul li:nth-child(1){z-index: 14;}
.gallery .gallery_img ul li:nth-child(2){z-index: 13;}
.gallery .gallery_img ul li:nth-child(3){z-index: 12;}
.gallery .gallery_img ul li:nth-child(4){z-index: 11;}
.gallery .gallery_img ul li:nth-child(5){z-index: 10;}slick 이용해서 만들기
html 마크업
.gallery_btn
.gallery_img
css 편집
버튼 이미지 넣기
slick 넣어주기
●pauseOnHover: false
마우스 올렸을 때 일시정지 해지
슬릭 기능을 이용하여 버튼을 누르면 기능이 되도록한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="author" content="조반짝 팀프로젝트 이름(제작자)">
<meta name="description" content="웹표준에 의한 웹페이지 샘플링입니다.(내용)">
<meta name="keywords" content="웹표준, 조반짝, 하이미디어, 샘플사이트(키워드)">
<meta name="generator" content="Visual Studio Code(작성도구)">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹표준_header-contents</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/slick.css">
<link rel="stylesheet" href="./css/style.css">
<!-- 웹폰트 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">
</head>
<body>
<!-- 스킵 네비게이션 -->
<div id="skip">
<a href="#cont_nav">전체 메뉴 바로가기</a>
<a href="#cont_ban">배너 영역 바로가기</a>
<a href="#cont_cont">컨텐츠 영역 바로가기</a>
</div>
<div id="wrap">
<div id="header">
<div class="container">
<div class="header">
<div class="header_menu">
<a href="#">로그인 가입</a>
<a href="#">CONTACT US</a>
<a href="#">ENGLISH</a>
</div>
<div class="header_tit mt50">
<h1>하이미디어 구로캠퍼스</h1><br>
<a href="https://www.himedia.co.kr/">자바기반 풀스택 웹개발자3</a>
</div>
<div class="header_icon mt30">
<a href="#" class="icon1"><span>icon1</span class="ir_pm"></a>
<a href="#" class="icon2"><span>icon2</span class="ir_pm"></a>
<a href="#" class="icon3"><span>icon3</span class="ir_pm"></a>
<a href="#" class="icon4"><span>icon4</span class="ir_pm"></a>
</div>
</div>
</div>
</div>
<section id="contents">
<article id="cont_nav"> <!--cont_nav-->
<div class="container">
<h2 class="ir_su">전체메뉴</h2>
<div class="nav clearfix">
<div>
<h3 class="h3">HTML5</h3>
<ol class="clearfix">
<li><a href="#">html1</a></li>
<li><a href="#">html2</a></li>
<li><a href="#">html3</a></li>
<li><a href="#">html4</a></li>
<li><a href="#">html5</a></li>
<li><a href="#">html6</a></li>
<li><a href="#">html7</a></li>
<li><a href="#">html8</a></li>
<li><a href="#">html9</a></li>
<li><a href="#">html10</a></li>
</ol>
</div>
<div>
<h3 class="h3">CSS3</h3>
<ol class="clearfix">
<li><a href="#">css1</a></li>
<li><a href="#">css2</a></li>
<li><a href="#">css3</a></li>
<li><a href="#">css4</a></li>
<li><a href="#">css5</a></li>
<li><a href="#">css6</a></li>
<li><a href="#">css7</a></li>
<li><a href="#">css8</a></li>
<li><a href="#">css9</a></li>
<li><a href="#">css10</a></li>
<li><a href="#">css11</a></li>
<li><a href="#">css12</a></li>
</ol>
</div>
<div>
<h3 class="h3">웹표준</h3>
<ol class="clearfix">
<li><a href="#">웹표준1</a></li>
<li><a href="#">웹표준2</a></li>
<li><a href="#">웹표준3</a></li>
<li><a href="#">웹표준4</a></li>
<li><a href="#">웹표준5</a></li>
<li><a href="#">웹표준6</a></li>
<li><a href="#">웹표준7</a></li>
<li><a href="#">웹표준8</a></li>
</ol>
</div>
</div>
</div>
</article>
<article id="cont_tit"> <!--cont_tit-->
<div class="container">
<div class="tit">
<h2> “ 프론트 엔드는 너무 쉬워서 금방 끝난다.” </h2>
<a href="#" class="btn"><span class="ir_pm">전체메뉴</span></a>
</div>
</div>
</article>
<article id="cont_ban"> <!--cont_ban-->
<div class="container">
<div class="ban">
<div><a href="#"><img src="./image/ban1.png" alt="구이미지"></a></div>
<div><a href="#"><img src="./image/ban2.png" alt="나무이미지"></a></div>
<div><a href="#"><img src="./image/ban3.png" alt="추상이미지"></a></div>
<div><a href="#"><img src="./image/ban1.png" alt="구이미지"></a></div>
<div><a href="#"><img src="./image/ban2.png" alt="나무이미지"></a></div>
<div><a href="#"><img src="./image/ban3.png" alt="추상이미지"></a></div>
<div><a href="#"><img src="./image/ban1.png" alt="구이미지"></a></div>
<div><a href="#"><img src="./image/ban2.png" alt="나무이미지"></a></div>
<div><a href="#"><img src="./image/ban3.png" alt="추상이미지"></a></div>
</div>
</article>
<article id="cont_cont"> <!--cont_cont-->
<div class="container">
<div class="cont">
<div class="column col1">
<h3>
<span class="icon_img ir_pm">아이콘1</span>
<em class="icon_tit">Notice1</em>
</h3>
<p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
<div class="notice1 noti">
<h4 class="h4">공지사항1</h4>
<ul>
<li><a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a></li>
<li><a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a></li>
<li><a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a></li>
<li><a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a></li>
<li><a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a></li>
</ul>
<a href="#" class="more ir_pm">더보기</a>
</div>
<div class="notice2 noti">
<h4 class="h4">공지사항2</h4>
<ul>
<li>
<a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a>
<span>2023-06-23</span>
</li>
<li>
<a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a>
<span>2023-06-23</span>
</li>
<li>
<a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a>
<span>2023-06-23</span>
</li>
<li>
<a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a>
<span>2023-06-23</span>
</li>
<li>
<a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a>
<span>2023-06-23</span>
</li>
</ul>
<a href="#" class="more ir_pm">더보기</a>
</div>
</div><!--col1-->
<div class="column col2">
<h3>
<span class="icon_img ir_pm">아이콘2</span>
<em class="icon_tit">Notice2</em>
</h3>
<p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
<!-- 게시판 3 -->
<div class="notice3">
<h4 class="h4">HTML Reference</h4>
<ul>
<li>
<a href="#">
<img src="./image/hover1.png" alt="식물">
<strong>[HTML]<table ></strong>
<span><table>태그는 표를 만들 때 사용합니다.</span>
</a>
</li>
<li>
<a href="#">
<img src="./image/hover2.png" alt="커피잔">
<strong>[HTML]<table ></strong>
<span><table>태그는 표를 만들 때 사용합니다.</span>
</a>
</li>
<li>
<a href="#">
<img src="./image/hover3.png" alt="바다">
<strong>[HTML]<table ></strong>
<span><table>태그는 표를 만들 때 사용합니다.</span>
</a>
</li>
<li>
<a href="#">
<img src="./image/hover4.png" alt="반원">
<strong>[HTML]<table ></strong>
<span><table>태그는 표를 만들 때 사용합니다.</span>
</a>
</li>
</ul>
<a href="#" class="more ir_pm">더보기</a>
</div>
</div><!--col2-->
<div class="column col3">
<h3>
<span class="icon_img ir_pm">아이콘3</span>
<em class="icon_tit">Notice3</em>
</h3>
<p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
</div><!--col3-->
<div class="column col4">
<h3>
<span class="icon_img ir_pm">아이콘4</span>
<em class="icon_tit">Notice4</em>
</h3>
<p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
<div class="hover1">
<h4 class="h4">Mouse Hover1</h4>
<ul class="clearfix">
<li>
<a href="#">
<span>
<img src="./image/hover1.png" alt="풀">
<em>바로가기</em>
</span>
<strong>풀</strong>
</a>
</li>
<li>
<a href="#">
<span>
<img src="./image/hover2.png" alt="커피잔">
<em>바로가기</em>
</span>
<strong>커피잔</strong>
</a>
</li>
<li>
<a href="#">
<span>
<img src="./image/hover3.png" alt="바다">
<em>바로가기</em>
</span>
<strong>바다</strong>
</a>
</li>
</ul>
</div>
<div class="hover2">
<h4 class="ir_su">Mouse Hover2</h4>
<ul class="clearfix">
<li>
<a href="#">
<span>
<img src="./image/hover4.png" alt="반원">
<em>바로가기</em>
</span>
<strong>반원</strong>
</a>
</li>
<li>
<a href="#">
<span>
<img src="./image/hover5.png" alt="책상">
<em>바로가기</em>
</span>
<strong>책상</strong>
</a>
</li>
<li>
<a href="#">
<span>
<img src="./image/hover6.png" alt="식물">
<em>바로가기</em>
</span>
<strong>식물</strong>
</a>
</li>
</ul>
</div>
</div><!--col4-->
<div class="column col5">
<h3>
<span class="icon_img ir_pm">아이콘5</span>
<em class="icon_tit">Notice5</em>
</h3>
<p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
<div class="tab_menu">
<!-- 웹표준 상 필요한 탭메뉴라는 것을 알려줌 -->
<h4 class="ir_su">tab_menu</h4>
<ul>
<li class="active"><a href="#">공지사항1</a>
<ul>
<li>
<a href="#">첫번째 공지사항 탭메뉴입니다.첫번째 공지사항 탭메뉴입니다.첫번째 공지사항 탭메뉴입니다.첫번쨰 공지사항 탭메뉴입니다.</a>
</li>
<li>
<a href="#">첫번째 공지사항 탭메뉴입니다.첫번째 공지사항 탭메뉴입니다.첫번째 공지사항 탭메뉴입니다.첫번째 공지사항 탭메뉴입니다.</a>
</li>
<li>
<a href="#">첫번째 공지사항 탭메뉴입니다.첫번째 공지사항 탭메뉴입니다.첫번째 공지사항 탭메뉴입니다.첫번째 공지사항 탭메뉴입니다.</a>
</li>
</ul>
</li>
<li><a href="#">공지사항2</a>
<ul>
<li>
<a href="#">두번째 공지사항 탭메뉴입니다.두번째 공지사항 탭메뉴입니다.두번째 공지사항 탭메뉴입니다.</a>
</li>
<li>
<a href="#">두번째 공지사항 탭메뉴입니다.두번째 공지사항 탭메뉴입니다.두번째 공지사항 탭메뉴입니다.</a>
</li>
<li>
<a href="#">두번째 공지사항 탭메뉴입니다.두번째 공지사항 탭메뉴입니다.두번째 공지사항 탭메뉴입니다.</a>
</li>
</ul>
</li>
<li><a href="#">공지사항3</a>
<ul>
<li>
<a href="#">세번째 공지사항 탭메뉴입니다.세번째 공지사항 탭메뉴입니다.세번째 공지사항 탭메뉴입니다.</a>
</li>
<li>
<a href="#">세번째 공지사항 탭메뉴입니다.세번째 공지사항 탭메뉴입니다.세번째 공지사항 탭메뉴입니다.</a>
</li>
<li>
<a href="#">세번째 공지사항 탭메뉴입니다.세번째 공지사항 탭메뉴입니다.세번째 공지사항 탭메뉴입니다.</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="notice4">
<h4 class="h4">최신 <span>공지사항</span></h4>
<ul>
<li>
<a href="#">웹디자이너와 웹 퍼블리싱을 알아봅시다.웹디자이너와 웹 퍼블리싱을 알아봅시다.웹디자이너와 웹 퍼블리싱을 알아봅시다.</a>
<span>2018.11.19</span>
</li>
<li>
<a href="#">웹디자이너와 웹 퍼블리싱을 알아봅시다.웹디자이너와 웹 퍼블리싱을 알아봅시다.웹디자이너와 웹 퍼블리싱을 알아봅시다.</a>
<span>2018.11.19</span>
</li>
<li>
<a href="#">웹디자이너와 웹 퍼블리싱을 알아봅시다.웹디자이너와 웹 퍼블리싱을 알아봅시다.웹디자이너와 웹 퍼블리싱을 알아봅시다.</a>
<span>2018.11.19</span>
</li>
</ul>
<a href="#" class="more">더보기</a>
</div>
</div><!--col5-->
<div class="column col6">
<h3>
<span class="icon_img ir_pm">아이콘6</span>
<em class="icon_tit">Notice6</em>
</h3>
<p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
<div class="gallery">
<h4 class="h4">포트폴리오</h4>
<div class="gallery_btn">
<button class="gb_icon1 play"><span class="ir_pm">Play</span></button>
<button class="gb_icon2 pause"><span class="ir_pm">Pause</span></button>
<button class="gb_icon3 prev"><span class="ir_pm">Prev</span></button>
<button class="gb_icon4 next"><span class="ir_pm">Next</span></button>
</div>
<div class="gallery_img">
<div><a href="#"><img src="./img/gall1.png" alt="이미지1"></a></div>
<div><a href="#"><img src="./img/gall2.png" alt="이미지2"></a></div>
<div><a href="#"><img src="./img/gall3.png" alt="이미지3"></a></div>
<div><a href="#"><img src="./img/gall4.png" alt="이미지4"></a></div>
<div><a href="#"><img src="./img/gall5.png" alt="이미지5"></a></div>
</div>
<!-- <div class="gallery_btn">
<ul>
<li class="gb_icon1"><a href="#"><span class="ir_pm">시작</span></a></li>
<li class="gb_icon2"><a href="#"><span class="ir_pm">정지</span></a></li>
<li class="gb_icon3"><a href="#"><span class="ir_pm">이전이미지</span></a></li>
<li class="gb_icon4"><a href="#"><span class="ir_pm">다음이미지</span></a></li>
</ul>
</div>
<div class="gallery_img">
<ul>
<li><a href="#"><img src="./img/gall1.png" alt=""></a></li>
<li><a href="#"><img src="./img/gall2.png" alt=""></a></li>
<li><a href="#"><img src="./img/gall3.png" alt=""></a></li>
<li><a href="#"><img src="./img/gall4.png" alt=""></a></li>
<li><a href="#"><img src="./img/gall5.png" alt=""></a></li>
</ul>
</div>
</div> -->
</div><!--col6-->
</div>
</div>
</article>
</section>
<div id="footer">
<div class="container"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="./js/slick.js"></script>
<script>
// slick 갤러리 버튼 넣기
$(".play").on("click", function(){
$(".gallery_img").slick("slickPlay");
});
$(".pause").on("click", function(){
$(".gallery_img").slick("slickPause");
});
$(".prev").on("click", function(){
$(".gallery_img").slick("slickPrev");
});
$(".next").on("click", function(){
$(".gallery_img").slick("slickNext");
});
// 갤러리 이미지_slick
$('.gallery_img').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrow:false,
autoplay: true,
autoplaySpeed: 1000,
fade:true,
// 마우스 올렸을 때 일시정지 해지
pauseOnHover: false,
});
// 탭메뉴
const tab_list = $(".tab_menu");
tab_list.find("ul ul").hide();
// 공지사항 컨텐츠를 모두 감추는 명령어
tab_list.find("li.active>ul").show();
// 버튼 중 active 가지고 있는 li의 자식 중 ul을 찾아서 보여주라는 명령어
// 함수
function tabMenu(e){
e.preventDefault();
let th = $(this);
// 무엇을 클릭할 지 모르기 때문에 const 대신 let 사용
th.next("ul").show().parent("li").addClass("active").siblings
// 부모중에서 li를 찾고 active값을 넣어주겠다.
("li").removeClass("active").find(">ul").hide();
}
// e.preventDefault(); : 기본적인 명령어를 취소시키는 명령어
// let th = $(this); : 선택한 버튼 값을 th 변수에 대입
// th.next("ul").show() : 선택한 요소의 다음 ul을 찾아서 보여주는 명령어
// parent("li") : ul의 부모인 li 선택하는 명령어
// .addClass("active") : 선택한 요소에 active라는 클래스를 추가하는 명령어
// .sibling("li") : 선택한 요소의 형제 li를 선택하라는 명령어
tab_list.find("ul>li>a").click(tabMenu).focus(tabMenu);
// 탭리스트 안에 있는 a를 찾아서 클릭했을 때 이벤트 발생
// 이벤트는 함수 tabMenu를 불러오라는 이벤트임
// .focus(tabMenu) : 선택되었을 때 이벤트 발생(tab메뉴로)
// 배너이미지(슬릭)
$('.ban').slick({
infinite: true, //무한반복
slidesToShow: 3, //한번에 보여주는 이미지 갯수
slidesToScroll: 1, //버튼을 눌렀을 때 넘어가는 이미지 갯수
autoplay: true, //자동이로 이미지 이동
autoplaySpeed: 3000, //3초마다 자동으로 이미지 이동
dots: true, //닷버튼 생성
});
$(".tit .btn").click(function(){
// $(".nav").show();
// $(".nav").fadeIn(500);
// $(".nav").slideDown(500);
// $(".nav").css("display","block"); // block은 보여주는 기능도 있다.
// $(".nav").toggle();
$(".nav").slideToggle();
$(this).toggleClass("on");
});
</script>
</body>
</html>css
@charset "utf-8";
#wrap{
width: 100%;
}
#header{
width: 100%;
height: 325px;
/* 헤더 이미지 높이 고려 */
background: url(../image/header_bg.jpg) no-repeat top center;
/* 이미지를 고정하기 위해 no-repeat을 해주고 위치를 잡아주어야하고 repeat으로 변경*/
}
#contents{}
#cont_nav{
width: 100%;
/* height: 200px; */
/* background-color: lightcoral; */
}
#cont_tit{
width: 100%;
/* height: 200px; */
background-color: lightcyan;
}
#cont_ban{
width: 100%;
/* height: 200px; */
/* background-color: lightgray; */
}
#cont_cont{
width: 100%;
/* height: 200px;
background-color: lightgreen; */
}
#footer{
width: 100%;
height: 220px;
background-color: lightseagreen;
}
/* container */
.container{
width: 990px;
margin: 0 auto;
height: inherit;
background-color: rgba(255,255,255,0.3);
}
/* skip */
#skip{
/* 기준점 잡아주기 */
position: relative;
}
#skip a{
position: absolute;
width: 140px;
background-color: #333;
color: #fff;
height: 30px;
text-align: center;
line-height: 30px;
/* 탭 위치 설정 */
left:0;
top: -40px;
}
/* 스킵 네비게이션 활성화 */
#skip a:active,
#skip a:focus{
top: 0;
}
/* header */
.header{
/* height: 325px; */
}
.header .header_menu{
/* background-color: aqua; */
/* 메뉴 오른쪽으로 정렬하기 */
text-align: right;
}
.header .header_menu a{
color: #fff;
/* top,left,bottom 여백주기 */
padding: 10px 0 10px 20px;
/* 윗쪽여백이 안 먹힘 > inline-block 을 사용함 */
display: inline-block;
/* 마우스 오버 속도 넣기 */
transition: all 0.5s;
}
.header .header_menu a:hover{
/* 마우스 오버시 글자색 바뀔수 있도록 한다. */
color: #333;
}
.header .header_tit{
/* background-color: red; */
text-align: center;
}
.header .header_tit h1{
color: #fff;
background-color: #4aa8d4;
font-size: 28px;
/* 글자에만 색칠해주기 문제는 a태그에 붙게됨 */
display: inline-block;
padding: 5px 20px;
transition: all 0.5s;
text-shadow: 0 2px 2px darkblue;
}
.header .header_tit h1:hover{
background-color: darkblue;
cursor: pointer;
}
.header .header_tit a{
font-size: 18px;
background-color: #2698cb;
display: inline-block;
/* 위아래 박스 여백이 없어짐 */
padding: 5px 20px;
color: #fff;
/* 위아래 박스 겹쳐지게하기 */
margin-top: -7px;
}
.header .header_icon{
text-align: center;
}
.header .header_icon a{
width: 60px;
height: 60px;
background-color: #333;
/* 인라인 구조이기 때문에 display: inline-block 적용*/
display: inline-block;
/* 양옆 여백주기 */
margin: 0 5px;
/* 아이콘 이미지 넣어주기 */
background: url(../image/icon.png);
}
.header .header_icon a.icon1{
background-position: 0px 0px;
/* 백그라운드 포지션으로 이미지의 위치(X,Y)를 지정해준다. */
}
.header .header_icon a.icon2{
background-position: 0px -60px;
}
.header .header_icon a.icon3{
background-position: 0px -120px;
}
.header .header_icon a.icon4{
background-position: 0px -180px;
}
.header .header_icon a.icon1:hover{
background-position: -60px 0px;
}
.header .header_icon a.icon2:hover{
background-position: -60px -60px;
}
.header .header_icon a.icon3:hover{
background-position: -60px -120px;
}
.header .header_icon a.icon4:hover{
background-position: -60px -180px;
}
.header .header_icon a span{
font-size: 0;
/* lineheight 값이 먹기 때문에 매번 주기가 번거롭다. */
}
/* nav */
.nav{
padding: 30px 0;
/* background-color: #4aa8d4; */
display: none;
}
.nav > div{
float: left;
width: 40%;
/* 전체너비의 40%사용 */
}
.nav > div:nth-of-type(3){
width: 20%;
/* 마지막 div 전체너비의 20%사용 */
}
/* .nav > div > h3{
font-size: 18px;
font-weight: bold;
color: #25a2d0;
하단 여백 띄워주기
margin-bottom: 4px;
} */
.nav > div > ol{}
.nav > div > ol > li{
width: 50%;
float: left;
}
.nav > div:nth-of-type(3) li{
width: 100%;
}
.nav > div > ol > li > a{}
.nav > div > ol > li > a:hover{
text-decoration: underline;
}
/* .tit */
.tit{
position: relative;
}
.tit h2{
font-size: 40px;
/* 아이콘 사이여백 넣기 위해 10px 추가 */
height: 70px;
line-height: 70px;
text-align: center;
font-family: 'Black Han Sans', sans-serif;
}
.tit a.btn{
width: 60px;
height: 60px;
background: url(../image/icon.png) 0px -600px;
display: block;
position: absolute;
right: 0;
top: 5px;
}
.tit a.btn:hover{
background-position: -60px -600px;
}
.tit a.btn.on{
background-position: 0px -660px;
}
.tit a.btn.on:hover{
background-position: -60px -660px;
}
/* ban */
.ban{
padding: 30px 0px 30px 20px;
position: relative;
}
.slick-prev{
/* 이전아이콘 위치잡아주기 */
position: absolute;
top: 65px;
left: -80px;
/* 아이콘이미지 불러오기 */
width: 43px;
height: 43px;
background: url(../image/icon.png) -150px 0;
/* 글씨없애주기 */
font-size: 0;
line-height: 0;
text-indent: -99999px;
}
.slick-prev:hover{
background-position: -193px 0;
cursor: pointer;
}
.slick-next{
position: absolute;
top: 65px;
right: -80px;
width: 43px;
height: 43px;
background: url(../image/icon.png) -150px -43px;
font-size: 0;
line-height: 0;
text-indent: 99999px;
}
.slick-next:hover{
background-position: -193px -43px;
cursor: pointer;
}
.ban img{
/* border: 4px solid #dcdcdc; */
border: 4px solid transparent;
/* 마우스오버시 이미지크기가 변경되지 않도록 고정하는 역할 */
}
.ban img:hover{
border: 4px solid red;
}
.ban .slick-dots{
/* background-color: #2698cb; */
text-align: center;
/* 위치 잡아주기 위해 포지션을 띄움 */
position: absolute;
bottom: 0px;
/* position을 띄우면서 너비값을 잃음 다시 너비값 넣어줌 */
width: 100%;
margin-left: -22px;
}
.ban .slick-dots li{
/* 위치 잡아주기 */
display: inline-block;
margin: 10px;
}
.ban .slick-dots li button{
/* 닷 만들어주기 */
width: 10px;
height: 10px;
background-color: aqua;
border-radius: 50%;
cursor: pointer;
font-size: 0;
line-height: 0;
text-indent: -99999px;
}
.ban .slick-dots li.slick-active button{
background-color: #2698cb;
}
/* cont */
.cont{
/* 위쪽 여백주기 */
padding-top: 30px;
overflow: hidden;
}
/* 여섯개의 박스를 동시에 편집할 수 있음 */
.cont .column{
width: 289px;
height: 363px;
/* border 오른쪽 선 넣어주기 */
border-right: 1px solid #2698cb;
/* 박스 안쪽여백 */
padding-right: 30px;
/* 박스 바깥 쪽 여백 */
margin: 0 30px 30px 0;
/* 박스 옆으로 나열 */
float: left;
/* 아이콘의 기준점 */
position: relative;
}
/* 행의 마지막 박스는 border, padding=right, margin-right 삭제해야 위로 올라가 배치됨 */
.cont .col1{}
.cont .col2{}
.cont .col3{
border: 0;
margin-right: 0;
padding-right: 0;
}
.cont .col4{}
.cont .col5{}
.cont .col6{
border: 0;
margin-right: 0;
padding-right: 0;
}
.cont .column .icon_img{
/* span 태그이기 때문에 넓이값 가지기 위해 block구조로 변경 */
display: block;
width: 60px;
height: 60px;
/* 배경을 복합적으로 사용할 때 background 사용 */
background: url(../image/icon.png);
/* 아이콘 배치 */
position: absolute;
top:0;
left: 0;
}
/* 아이콘 이미지를 각 각 변경하기 위해 col1 -6 을 따로 편집 */
.cont .col1 .icon_img{background-position: 0px -240px;}
.cont .col2 .icon_img{background-position: 0px -300px;}
.cont .col3 .icon_img{background-position: 0px -360px;}
.cont .col4 .icon_img{background-position: 0px -420px;}
.cont .col5 .icon_img{background-position: 0px -480px;}
.cont .col6 .icon_img{background-position: 0px -540px;}
/* 마우스 오버시 아이콘 변경되게하기 */
.cont .col1 .icon_img:hover{background-position: -60px -240px;}
.cont .col2 .icon_img:hover{background-position: -60px -300px;}
.cont .col3 .icon_img:hover{background-position: -60px -360px;}
.cont .col4 .icon_img:hover{background-position: -60px -420px;}
.cont .col5 .icon_img:hover{background-position: -60px -480px;}
.cont .col6 .icon_img:hover{background-position: -60px -540px;}
.cont .column .icon_tit{
font-size: 18px;
color: #2698cb;
/* 타이틀 위치배치 */
padding-left: 70px;
/* padding 과 margin의 차이점 */
font-weight: bold;
}
.cont .column .icon_desc{
/* 설명 위치배치 */
padding-left: 70px;
/* 아랫선 배치 */
border-bottom: 1px solid #2698cb;
/* 선 위아래 여백 */
padding-bottom: 15px; /*선 위 여백*/
margin-bottom: 15px; /*선 아래 여백*/
}
.cont .col1 .noti{
/* a.more의 기준점 */
position: relative;
}
.cont .col1 .noti a.more{
display: block;
width: 17px;
height: 17px;
background: url(../image/icon.png) -150px -90px;
/* 아이콘 배치하기 */
position: absolute;
right: 0;
top: 0;
}
.cont .col1 .notice1{}
.cont .col1 .notice1 ul{}
.cont .col1 .notice1 ul li{
position: relative;
}
.cont .col1 .noti ul li::before{
position: absolute;
content: "";
width: 2px;
height: 9px;
background-color: #aaa;
left: 5px;
top: 5px;
border-radius: 5px;
}
.cont .col1 .notice1 ul li a{
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding-left: 10px;
}
.cont .col1 .notice2{
margin-top: 15px;
}
.cont .col1 .notice2 ul{}
.cont .col1 .notice2 ul li{
overflow: hidden;
position: relative;
}
.cont .col1 .notice2 ul li a{
display: block;
width: 65%;
float: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 10px;
/* box-sizing 이 있어야 글자가 밀리지 않음 */
box-sizing: border-box;
}
.cont .col1 .notice2 ul li span{
display: block;
width: 30%;
float: right;
}
/* col4 */
.col4{}
.col4 .hover1{}
.col4 .hover1 h4{}
.col4 .hover1 ul{
/* overflow: hidden을 사용하면 93px 이상으로 잘라버린다. >> clearfix사용해서 하는 방법이 좋다.*/
/* overflow: hidden; */
}
.col4 .hover1 ul li{
/* strong이 보일 수 있도록 높이값을 높인다. */
/* 위치잡아주기 */
float: left;
margin-right: 5px;
/* em의 기준점 */
position: relative;
}
.col4 .hover1 ul li:nth-of-type(3){
margin-right: 0;
}
.col4 .hover1 ul li a{}
.col4 .hover1 ul li a span{
position: relative;
width: 93px;
height: 93px;
overflow: hidden;
display: block;
}
.col4 .hover1 ul li a span img{
/* 사이즈 100%로 맞춰줘야 비율이 맞게 나온다. */
width: 100%;
}
.col4 .hover1 ul li a span em{
display: block;
width: 93px;
height: 93px;
background-color: rgba(0,255,255,0.3);
text-align: center;
line-height: 93px;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s;
}
.col4 .hover1 ul li:hover a span em{
top: 100px;
}
.col4 .hover1 ul li a strong{
/* strong 가운데정렬하기 */
display: block;
width: 100%;
text-align: center;
}
.col4 .hover2{
margin-top: 15px;
}
.col4 .hover2 ul{}
.col4 .hover2 ul li{
float: left;
margin-right: 5px;
}
.col4 .hover2 ul li:nth-of-type(3){
margin-right: 0;
}
.col4 .hover2 ul li a{}
.col4 .hover2 ul li a strong{
text-align: center;
display: block;
}
.col4 .hover2 ul li a span{
display: block;
overflow: hidden;
position: relative;
width: 93px;
height: 93px;
}
.col4 .hover2 ul li a span img{
width: 100%;
}
.col4 .hover2 ul li a span em{
background-color: rgba(0,255,255,0.3);
display: block;
position: absolute;
width: 100%;
text-align: center;
line-height: 50px;
bottom: -50px;
left: 0;
color: #fff;
transition: all 0.5s;
width: 93px;
height: 50px;
}
.col4 .hover2 ul li a span:hover em{
bottom: 0;
}
/* col2_notice3 */
.notice3{
position: relative;
}
.notice3 ul{}
.notice3 ul li{
/* a는 인라인구조라서 기준이 안 잡힐 수 있음, li에 기준점 잡아줌 */
position: relative;
/* 패딩값으로 좌표값을 계산해서 위치를 잡아주어야한다. */
padding: 8px 0 14px 60px;
}
.notice3 ul li a{}
.notice3 ul li a img{
/* 이미지 사이즈 줄이기(너비값만 넣어주어야 비율이 맞게 들어감) */
width: 50px;
/* 이미지 띄워주어야함 */
position: absolute;
left: 0;
top: 0;
border: 1px solid #0093bd;
}
.notice3 ul li a strong{
/* 블럭구조로 바꾸어서 행이 바뀌도록한다. */
display: block;
}
.notice3 ul li a span{
/* 블럭구조로 바꾸어서 행이 바뀌도록한다. */
display: block;
}
.notice3 a.more{
position: absolute;
top: 0;
right: 0;
display: block;
width: 17px;
height: 17px;
background: url(../image/icon.png) -150px -90px;}
/* col5_tab_menu */
.tab_menu{
border: 1px solid #ccc;
padding: 8px;
height: 105px;
/* ul의 기준점 */
position: relative;
}
.tab_menu ul{
overflow: hidden;
/* 아랫선 넣어주기 */
border-bottom: 1px solid #ddd;
}
.tab_menu ul li{
/* ul이 꽉차있기 때문에 float을 해도 옆으로 안간다.
그래서 ul에 position: absolute로 움직여주어야함 */
float: left;
border: 1px solid #ccc;
margin-right : -1px;
/* 아랫선 겹쳐지는 부분 없애기 */
margin-bottom: -1px;
}
.tab_menu ul li a{
display: block;
padding: 5px 10px;
}
.tab_menu ul li ul{
position: absolute;
width: 270px;
left: 0;
top: 48px;
border: 0;
}
.tab_menu ul li ul li{
/* 첫번째 li 에만 border, float을 넣어야하는데 > 표시가 없어서
두번째 li에도 적용되어서 border, float 해지해주어야함 */
border: 0;
float: none;
/* 공지사항 내용 안으로 들여쓰기 */
padding-left: 20px;
background: url(../image/KakaoTalk_20230627_102643215.gif) no-repeat 8px 8px;
}
.tab_menu ul li ul li a{
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 20px;
/* 공지사항 내용 위치잡기 */
padding: 0 0 3px 0;
}
.tab_menu ul li.active{
background-color: #2c94c4;
}
.tab_menu ul li.active a{
/* 첫번째 공지사항내용이 흰색이라 안보임 */
color: #fff;
}
.tab_menu ul li.active ul li a{
/* 첫번쨰 공지사항 내용 글자색 변경해주면 보인다. */
color: #333;
}
/* col5_tab_menu notice4 */
.notice4{
border: 1px solid #ccc;
margin-top: 15px;
position: relative;
}
.notice4 h4{
border-bottom: 1px solid #ccc;
padding: 8px 10px;
}
.notice4 h4 span{
color: hotpink;
font-weight: bold;
}
.notice4 ul{
/* ul 안쪽 여백 */
padding: 10px;
}
.notice4 ul li{
overflow: hidden;
background: url(../image/KakaoTalk_20230627_102643215.gif) no-repeat 1px 10px;
padding: 2px 0px 0px 13px;
}
.notice4 ul li a{
/* 인라인구조 블럭구조로 변경!! */
display: block;
width: 65%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
float: left;
padding-left: 1px;
box-sizing: border-box;
}
.notice4 ul li span{
/* 인라인구조 블럭구조로 변경!! */
display: block;
width: 30%;
float: right;
/* 글씨 오른쪽 정렬 */
text-align: right;
}
.notice4 a.more {
position: absolute;
right: 10px;
top: 10px;
}
/* col6_gallery_편집만 */
.gallery{
/* 박스 만들기 */
border: 1px solid #aaa;
height: 255px;
overflow: hidden;
position: relative;
}
.gallery h4{
/* 아랫선 만들기 */
border-bottom: 1px solid #aaa;
padding: 10px 0 8px 10px;
/* 상 10 우 0 하8 좌 10 */
margin-bottom: 0px;
}
.gallery .gallery_btn{
position: absolute;
right: 10px;
top: 8px;
}
.gallery .gallery_btn button{
background: url(../image/icon.png);
width: 23px;
height: 23px;
margin: 1px 2px;
cursor: pointer;
}
.gallery .gallery_btn button.gb_icon1{background-position: -150px -120px;}
.gallery .gallery_btn button.gb_icon2{background-position: -150px -143px;}
.gallery .gallery_btn button.gb_icon3{background-position: -150px -166px;}
.gallery .gallery_btn button.gb_icon4{background-position: -150px -189px;}
.gallery .gallery_btn button.gb_icon1:hover{background-position: -173px -120px;}
.gallery .gallery_btn button.gb_icon2:hover{background-position: -173px -143px;}
.gallery .gallery_btn button.gb_icon3:hover{background-position: -173px -166px;}
.gallery .gallery_btn button.gb_icon4:hover{background-position: -173px -189px;}
.gallery .gallery_img img{
width: 100%;
}
728x90
반응형
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| 비주얼 스튜디오 코드 54_자식 요소의 순서를 지정하자 (0) | 2023.06.29 |
|---|---|
| 비주얼 스튜디오 코드 53_parallax03 (2) | 2023.06.28 |
| 비주얼 스튜디오 코드 51_ 햄버거 메뉴 (0) | 2023.06.27 |
| 비주얼 스튜디오 코드 50 _ Parallax02 (0) | 2023.06.27 |
| 비주얼 스튜디오 코드 49_ 웹표준) 탭메뉴 (0) | 2023.06.27 |