HTML / CSS
페이지 만들기 JQuery입문 (2편)
결과
HTML 구성
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
</head>
<body>
<ul id="skip">
<li><a href="#header">헤더 영역 바로가기</a></li>
<li><a href="#nav">메뉴 영역 바로가기</a></li>
<li><a href="#contents">본문 영역 바로가기</a></li>
</ul>
<div id="wrap">
<div id="header">
<div class="container">
<div class="header-menu">
<a href="#">Desinger</a>
<a href="#">Publisher</a>
<a href="#">front-end</a>
</div>
<div class="header-tit">
<h1>Publisher & Desinger & front-end</h1><br>
<a href="http://cjh7652.dothome.co.kr/sRoom/index.html">hyunroom</a>
</div>
</div>
</div>
<div id="contents">
<div class="cont_nav">
<div class="container">
<h2 class="ir_so">전체메뉴</h2>
<div class="nav">
<div>
<h3>HTML Reference</h3>
<ol>
<li><a href="#">HTML 태그(Tag)</a></li>
<li><a href="#">블록요소/인라인 요소</a></li>
<li><a href="#">DTD 선언</a></li>
<li><a href="#">언어 속성 설정</a></li>
<li><a href="#">HTML < title ></a></li>
<li><a href="#">HTML < meta ></a></li>
<li><a href="#">특수문자</a></li>
<li><a href="#">하이퍼링크</a></li>
<li><a href="#">HTML < style ></a></li>
<li><a href="#">HTML < html ></a></li>
<li><a href="#">HTML < head ></a></li>
<li><a href="#">HTML < body ></a></li>
<li><a href="#">HTML < div ></a></li>
<li><a href="#">HTML < caption ></a></li>
</ol>
</div>
<div>
<h3>CSS Reference</h3>
<ol>
<li><a href="#">CSS 선택자</a></li>
<li><a href="#">CSS 색상</a></li>
<li><a href="#">CSS 단위</a></li>
<li><a href="#">CSS 선언 방법</a></li>
<li><a href="#">CSS float</a></li>
<li><a href="#">상대주소 절대주소</a></li>
<li><a href="#">IR 효과</a></li>
<li><a href="#">이미지 표현 방법</a></li>
<li><a href="#">이미지 스프라이트</a></li>
<li><a href="#">text-align</a></li>
<li><a href="#">border-style</a></li>
<li><a href="#">font-size</a></li>
<li><a href="#">background-color</a></li>
</ol>
</div>
<div>
<h3>Webstandard</h3>
<ol>
<li><a href="#">웹표준</a></li>
<li><a href="#">웹접근성</a></li>
<li><a href="#">W3C</a></li>
<li><a href="#">웹 접근성 연구소</a></li>
<li><a href="#">네이버 널리</a></li>
<li><a href="#">Webstandard</a></li>
<li><a href="#">클로스브라우징</a></li>
</ol>
</div>
</div>
</div>
</div>
<div class="cont_tit">
<div class="container">
<div class="tit">
<h2>퍼블리셔가 꼭 알아야 하는 팁!!!!</h2>
<a href="#" class="btn"><span class="ir_pm">전체메뉴</span></a>
</div>
</div>
</div>
<div class="cont_ban">
<div class="container">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href="#"><img src="./img/banner_link1.jpg" alt="웹표준 지침서 보기"></a></div>
<div class="swiper-slide"><a href="#"><img src="./img/banner_link2.jpg" alt="스킬"></a></div>
<div class="swiper-slide"><a href="#"><img src="./img/banner_link3.jpg" alt="브라우저"></a></div>
<div class="swiper-slide"><a href="#"><img src="./img/banner_link1.jpg" alt="웹표준 지침서 보기"></a></div>
<div class="swiper-slide"><a href="#"><img src="./img/banner_link2.jpg" alt="스킬"></a></div>
<div class="swiper-slide"><a href="#"><img src="./img/banner_link3.jpg" alt="브라우저"></a></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="cont_cont">
<div class="container">
<div class="cont">
<div class="column col1">
<h3><span class="ico_img ir_pm">아이콘1</span><em class="ico_tit">Notice</em></h3>
<p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형1</p>
<div class="notice1 notice">
<h4>웹퍼블리셔 면접 질문</h4>
<ul>
<li><a href="#">HTML 태그중에 dl, dt,dd,ul,ol,li의 차이점이 무엇인가요? 궁금하네요</a></li>
<li><a href="#">HTML 태그중에 strong과 em 태그의 차이점은 무엇인가요?</a></li>
<li><a href="#">인라인요소와 블록요소의 차이점?</a></li>
<li><a href="#">컨텐츠 요소를 가운데로 오게 하는 방법은 무엇입니까?</a></li>
</ul>
<a href="#" class="more ir_pm" title="더보기">더보기</a>
</div>
<div class="notice2 notice">
<h4>웹 디자이너 면접 질문</h4>
<ul>
<li><a href="#">jpg, png, gif, svg의 차이점이 무엇인가요?</a><span>2022.11.07</span></li>
<li><a href="#">UI디자인과 UX다지인의 차이점을 설명하세요</a><span>2022.11.07</span></li>
<li><a href="#">인터렉션 디자인의 핵심은 무엇이라고 생각하나요?</a><span>2022.11.07</span></li>
<li><a href="#">웹디자인과 모발일 디자인의 차이점은 무엇이라고 생각합니까?</a><span>2022.11.07</span></li>
</ul>
<a href="#" class="more ir_pm" title="더보기">더보기</a>
</div>
</div>
<div class="column col2">
<h3><span class="ico_img ir_pm">아이콘2</span><em class="ico_tit">Notice</em></h3>
<p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형2</p>
<div class="notice3 notice">
<h4>HTML Reference</h4>
<ul>
<li>
<a href="#">
<img src="./img/notice01.jpg" alt="이미지1">
<strong>[HTML] < table ></strong>
<span>< table > 태그는 표를 만들 떄 사용합니다.</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/notice02.jpg" alt="이미지2">
<strong>[HTML] < div ></strong>
<span>< div > 태그는 문서의 섹션을 만들거나 영역을 나눌때 사용합니다</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/notice03.jpg" alt="이미지3">
<strong>[HTML] < dl ></strong>
<span>< dl > 태그는 용어를 설명하는 목록형 태그입니다.</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/notice01.jpg" alt="이미지1">
<strong>[HTML] < em ></strong>
<span>< em > 태그는 텍스트를 강조할 때 사용합니다.</span>
</a>
</li>
</ul>
<a href="#" class="more ir_pm" title="더보기">더보기</a>
</div>
</div>
<div class="column col3">
<h3><span class="ico_img ir_pm">아이콘3</span><em class="ico_tit">Notice</em></h3>
<p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형3</p>
<div class="login-wrap notice">
<h4 class="ir_so">로그인정보</h4><!-- so이라서 정의할 필요 x -->
<form id="loginFrom" action="#" method="post" name="loginFrom">
<fieldset>
<legend class="ir_so">로그인 및 관련 설정</legend><!-- so정의x -->
<div class="login-header">
<h5 class="ir_so">로그인 보안</h5>
<div class="lh_check">
<input type="checkbox" id="inputCheck" class="input-check">
<label for="inputCheck">로그인 상태 유지</label>
</div>
<div class="lh_ip">
IP보안 <em>ON</em>
</div>
</div>
<div class="login-content">
<h5 class="ir_so">로그인 영역</h5>
<div class="lc_text">
<label for="uid" class="ir_so">아이디</label>
<input type="text" id="uid" placeholder="아이디" class="input-text">
<label for="upw" class="ir_so">비밀번호</label>
<input type="password" id="upw" class="input-text"
placeholder="비밀번호">
</div>
<button class="lc-btn" type="submit">로그인</button>
</div>
<div class="login-footer">
<h5 class="ir_so">로그인문제해결</h5>
<ul>
<li><a href="#"><strong>회원가입</strong></a></li>
<li><a href="#">아이디</a>· <a href="#">비밀번호 찾기</a></li>
</ul>
</div>
</fieldset>
</form>
</div>
<div class="popup notice">
<h4>Advertisement</h4>
<ul>
<li><a href="#"><img src="./img/sban07.jpg" alt="이미지"></a></li>
<li><a href="#"><img src="./img/sban08.jpg" alt="이미지"></a></li>
<li><a href="#"><img src="./img/sban09.jpg" alt="이미지"></a></li>
</ul>
</div>
</div>
<div class="column col4"></div>
<div class="column col5"></div>
<div class="column col6"></div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container"></div>
</div>
<script>
$('.tit .btn').click(function(){
$('.cont_nav').slideToggle();
$(this).toggleClass("on")
});
// 스와이퍼
var swiper = new Swiper(".mySwiper", {
slidesPerView: 3,
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
</script>
</div>
</body>추가된 CSS 구성
/* header영역 */
.header-menu{text-align: right;}
.header-menu a{color: #fff; display: inline-block; padding: 10px 0 10px 13px;}
.header-menu a:hover{color: #666}
.header-tit{text-align: center;}
.header-tit h1{background: #fff; font-size: 28px; padding: 5px 20px 6px 20px; display: inline-block; color: #333; margin-top: 60px; box-shadow: 5px 5px 10px #000; text-transform: uppercase; }
.header-tit a{display: inline-block; background: #fff; color: #9b9b8c; padding: 5px 20px 6px; box-shadow: 5px 5px 10px #000; margin-top: -8px; font-size: 18px;}
/* 본문내용 */
.cont_nav{background: #ddd; width: 100%; height: auto; display: none;}
.cont_nav .nav{overflow: hidden; padding: 30px 0}
.cont_nav .nav>div{float: left; width: 40%;}
.cont_nav .nav>div:last-child{width: 20%;}
.cont_nav .nav>div h3{color: #18bacb; font-size: 18px; margin-bottom: 5px; font-weight: bold;}
.cont_nav .nav>div ol{overflow: hidden;}
.cont_nav .nav>div ol li{float: left; width: 50%}
.cont_nav .nav>div:last-child ol li{ width: 100%}
.cont_tit{width: 100%; background: #fff;}
.cont_tit .tit{position: relative;}
.cont_tit .tit h2{ text-align: center; color: #8a8a7b; font-size: 40px; padding: 5px 0}
.cont_tit .tit .btn{position: absolute; width: 60px; height: 60px; background: url(../img/icon.png) no-repeat 0 -600px; right: 0; top: 5px}
.cont_tit .tit .btn.on{background-position: 0 -660px;}
.cont_ban{width: 100%; padding: 30px 0; background: #ccc;}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* 컨텐츠 */
.cont_cont{width: 100%; background: #eee;}
.cont{overflow: hidden;}
.cont .column{width: 32%; margin-right: 2%; height: 330px; /* background: #fff; */ float: left;margin-bottom: 20px; border-right: 1px solid #ccc; box-sizing: border-box; position: relative; padding-right: 20px; margin-top: 20px;}
.cont .column:nth-child(3n){margin-right: 0; padding-right: 0;border-right:none; }
.cont .column h3 .ico_img{background: url(../img/icon.png) no-repeat; width: 60px; height: 60px; display: block; position: absolute; top:0; left:0}
.cont .col1 h3 .ico_img{background-position: 0 -240px;}
.cont .col2 h3 .ico_img{background-position: 0 -300px;}
.cont .col3 h3 .ico_img{background-position: 0 -360px;}
.cont .col4 h3 .ico_img{background-position: 0 -420px;}
.cont .col5 h3 .ico_img{background-position: 0 -480px;}
.cont .col6 h3 .ico_img{background-position: 0 -540px;}
.cont .column h3 .ico_tit{ padding-left: 70px; font-size: 16px; color: #2c94c4; font-weight: bold; padding-bottom: 5px; display: block; padding-top: 10px;}
.cont .column .ico_desc{padding-left: 70px; padding-bottom: 10px; border-bottom: 1px solid #d0d0d0; letter-spacing: -1px; margin-bottom: 10px;}
.cont .column .notice{position: relative;}
.cont .column .notice h4{font-size: 14px; color: #0093bd; padding-bottom: 3px; font-weight: bold;}
.cont .column .notice ul li{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: url(../img/dot.gif) no-repeat 0 9px; padding-left: 8px;}
.cont .column .notice ul li> a{font-size: 12px;}
.cont .column .notice .more{position: absolute; right: 0; top: 0; display: block; width: 17px; height: 17px; background: url(../img/icon.png) no-repeat -150px -90px;}
/* 게시판2 */
.cont .column .notice2 h4{margin-top: 40px;}
.cont .column .notice2 ul li a{width: 65%; float: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.cont .column .notice2 ul li span{float: right; width: 30%; text-align: right;}
.cont .column .notice3 ul li{background: none; position: relative; padding: 9px 0 9px 60px}
.cont .column .notice3 ul li a img{width: 50px; border: 1px solid #0093bd; position: absolute; top:0; left: 0;}
.cont .column .notice3 ul li a strong{display: block;}
.cont .column .notice3 ul li a span:hover{text-decoration: underline;}
/* 로그인 */
.login-wrap{background: #f2f4f5; padding: 15px; }
.login-header{height: 30px; font-size: 12px;overflow: hidden;}
.login-header .lh_check{ float: left; width: 120px; }
.login-header .lh_check .input-check{vertical-align: middle;}
.login-header .lh_check .lh_ip{float: left;}
.login-header .lh_ip em{color: #0093dd; text-decoration: underline; font-weight: bold;}
.login-content{overflow: hidden;}
.login-content .lc_text{float: left; width: 70%}
.login-content .lc_text .input-text{width: 182px; height: 16px; border: 1px solid #bebebe; padding: 2px 5px; margin-bottom: 3px;}
.login-content .lc-btn{float: left; width: 86px; height: 47px; background: #fff; border: 1px solid #bebebe;}
.login-footer{clear: both; margin-top: 5px;}
.login-footer ul{overflow: hidden;}
.cont .column .login-footer ul li{float: left; background: none;}
.login-footer ul li a:hover{color: #0093bd;}
.login-footer ul li a strong{}
.popup h4{margin-top: 10px;}
.popup ul{overflow: hidden;}
.cont .column .popup ul li{float: left; width: 94px; background: none; margin-right: 15px; padding-left: 0; height: 70px;}
.cont .column .popup ul li:last-child{margin-right: 0;}
.popup ul li img{width: 100%;}
