FRONTEND WITH THE
HIGHEST PRICE GOAL
Welcome to my
portfolio
portfolio
publisher & frontend
portfolio
about me
안녕하십니까. 하고싶다! 해야겠다! 라는 생각으로 개발자에 뛰어든 조운섭입니다. 새로운것에 도전한다는게 쉽지는 않았지만 생각만하면 아무것도 달라질게 없기에 5년째 다니던 회사를 뒤로하고 생각을 실천으로 바꾸려 시작하게 되었습니다. 물론 쉽지는 않았습니다. 하지만 포기라는 단어가 너무 마음에 들지 않았기에 계속 앞으로 나아가려 합니다. 아직 부족한 부분이 많지만 부족한 만큼 발전할 수 있는 부분이 많다고 생각합니다. 열심히 일하고 열심히 배우고 취업후에도 열심히 공부해서 열심히하는 조운섭에서 최고의 조운섭으로 변하는 모습 꼭! 보여드리겠습니다.
Click
- 1. Sincerity
- 2. Meticulous
- 3. patience
- 4. with a goal
- 5. learning attitude
- 6. sociability
- 7. Social Life
- 8. stress relief
- 9. make a plan
SITE CODING
01
WEBSTANDARD
사이트 코딩
사이트 코딩
웹표준형 사이트입니다. 웹접근성에 근거하여 모든 사용자가 사용함에 있어 불편함없이 설계된 사이트입니다.
02
responsive
사이트 코딩
사이트 코딩
반응형 웹 사이트입니다. 웹표준을 준수하며 스크립트요소들을 활용하여 반응형까지 지원하는 페이지입니다.
03
react blog
사이트 코딩
사이트 코딩
컴퍼넌트로 페이지를 작성하고 PROPS를 활용하여 데이터를 주고받는 흐름을 완벽하게 이해하고 응용하여 만든 React Blog 입니다.
04
php notice
사이트 코딩
사이트 코딩
PHP를 응용하여 MyAdmin을 활용한 PHP사이트 입니다. 게시판, 블로그, 회원가입, 로그인 기능을 구현하였습니다.
05
vue port
사이트 코딩
사이트 코딩
vue.js에서 제공하는 방복문, 리스트 렌더링 v-for구문을 활용하여 만든 사이트 입니다.
01.
webstandard
웹표준과 웹 접근성을 준수하여 작업한 웹표준 사이트입니다. IR 효과 대체 텍스트 등을 넣어 모든 사용자가 불편함 없이 사이트를 이용할 수 있도록 제작하였습니다. SLICK슬라이드와 LIGHT BOX 플러그인을 이용하여 동적인 효과를 주었습니다.
#웹표준 #웹접근성 #웹지침서
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="author" content="seongwoo">
<meta name="description" content="웹 표준을 준수한 사이트 예제입니다.">
<meta name="keywords" content="박성우, 웹표준, 웹접근성, 사이트 만들기">
<meta neme="generator" content="brakets">
<title>WEBSTANDARD SITE</title>
<!-- CSS Style -->
<link rel="stylesheet" href="css/reset.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
href="https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&family=Nanum+Gothic:wght@400;700;800&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="https://jowuseop1110.github.io/webs_class/">Desinger</a>
<a href="https://jows1110.tistory.com//">tistory</a>
<a href="https://github.com/jowuseop1110/webs_class">github</a>
</div>
<!-- //헤더 메뉴 -->
<div class="header-tit">
<h1>Professional Publisher & Designer</h1><br>
<a href="hhttps://jowuseop1110.github.io/webs_class/">jowuseop1110.github.io/webs_class/</a>
</div>
<!-- //헤더 타이틀 -->
<!-- 이미지를 표현하는 방법
1. img 태그로 표현 (의미가 있을 때) / alt태그 - 대체 문자 표현
2. background 속성으로 표현(의미가 없을 때) -대체 문자 X
3. 이미지를 background 속성 - 웹 ㅍ준을 준수하기 위해서는
/ 가상으로 대체를 문자로 만들어줌(IR 효과)
이미지 스프라이트 효과
-->
<div class="header-icon">
<a href="#" class="icon1"><span class="ir_pm">icon1</span></a>
<a href="#" class="icon2"><span class="ir_pm">icon2</span></a>
<a href="#" class="icon3"><span class="ir_pm">icon3</span></a>
<a href="#" class="icon4"><span class="ir_pm">icon4</span></a>
</div>
<!-- //헤더 아이콘 -->
</div>
</div>
</div>
<!-- //header -->
<div id="contents">
<div id="cont_nav">
<div class="container">
<h2>전체 메뉴</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 <div></a></li>
<li><a href="#">HTML <colgroup></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="#">상대주소와 절대주소</a></li>
<li><a href="#">CSS float</a></li>
<li><a href="#">이미지 표현 방법</a></li>
<li><a href="#">이미지 스프라이트</a></li>
<li><a href="#">IR 효과</a></li>
<li><a href="#">이미지 최적화</a></li>
<li><a href="#">background-color</a></li>
<li><a href="#">border-style</a></li>
<li><a href="#">font-size</a></li>
<li><a href="#">text-align</a></li>
</ol>
</div>
<div class="last">
<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="#">다음 다룸</a></li>
<li><a href="#">Webstandard</a></li>
</ol>
</div>
</div>
</div>
</div>
<!-- //cont_nav -->
<div id="cont_tit">
<div class="container">
<div class="tit">
<h2>"나는 퍼블리셔다"</h2>
<a href="#" class="btn"><span class="ir_pm">전체메뉴</span></a>
</div>
</div>
</div>
<!-- //cont_tit -->
<div id="cont_ban">
<div class="container">
<div class="ban">
<a href="#" class="prev"><span class="ir_pm">이전 이미지</span></a>
<ul>
<li class="ban_img1"><a href="#"><img src="img/banner_link1.jpg" alt="웹 표준 지침서 보기"></a></li>
<li class="ban_img2"><a href="#"><img src="img/banner_link2.jpg" alt="CSS 버튼 만들기"></a></li>
<li class="ban_img3"><a href="#"><img src="img/banner_link3.jpg" alt="로그인 폼 만들기"></a></li>
</ul>
<a href="#" class="next"><span class="ir_pm">다음 이미지</span></a>
</div>
</div>
</div>
<!-- //cont_ban -->
<div id="cont_cont">
<div class="container">
<div class="cont">
<div class="column col1">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_desc">가장 웹페이지에서 기본이 되는 게시판 유형입니다.</p>
<!-- 게시판 -->
<div class="notice">
<h4>Web publiser Notice</h4>
<ul>
<li><a href="#">display:inline과 display:block의 차이점은 무엇인가요?</a></li>
<li><a href="#">HTML 태그 중에 dl,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">
<h4>Web Designer Notice</h4>
<ul>
<li><a href="#">JPG, PNG, GIF의 차이점이 무엇인가요?</a><span>2018.11.16</span></li>
<li><a href="#">UI 디자인과 UX 디자인의 차이점을 설명하세요.</a><span>2018.11.16</span></li>
<li><a href="#">인터랙션 디자인의 핵심은 무엇이라고 생각하나요?</a><span>2018.11.16</span></li>
<li><a href="#">포트폴리오를 하면서 가장 잘 했다고 생각하는 부분은 무엇인가요?</a><span>2018.11.16</span></li>
<li><a href="#">웹 디자인과 모바일 디자인의 차이가 무엇이라고 생각하나요?</a><span>2018.11.16</span></li>
</ul>
<a href="#" class="more ir_pm" title="더보기">더보기</a>
</div>
<!-- 게시판2 -->
</div><!-- //col1 -->
<div class="column col2">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_desc">가장 웹페이지에서 기본이 되는 게시판 유형입니다.</p>
<!-- 게시판3 -->
<div class="notice3">
<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/notice04.jpg" alt="이미지4">
<strong>[HTML] em</strong>
<span>em 태그는 텍스트를 강조할 때 사용합니다.</span>
</a>
</li>
</ul>
<a href="#" class="more ir_pm" title="더보기">더보기</a>
</div>
<!-- //게시판3 -->
</div><!-- //col2 -->
<div class="column col3">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_desc">가장 웹페이지에서 기본이 되는 게시판 유형입니다.</p>
</div><!-- //col3 -->
<div class="column col4">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_desc">가장 웹페이지에서 기본이 되는 게시판 유형입니다.</p>
<!-- 오버효과 -->
<div class="notice_hover">
<h4>Mouse Hover</h4>
<ul>
<li>
<a href="#">
<span><img src="img/sban01.jpg" alt="이미지1"><em>바로가기</em></span>
<strong>와이어 프레임</strong>
</a>
</li>
<li>
<a href="#">
<span><img src="img/sban02.jpg" alt="이미지2"><em>바로가기</em></span>
<strong>스케치 작업</strong>
</a>
</li>
<li class="last">
<a href="#">
<span><img src="img/sban03.jpg" alt="이미지3"><em>바로가기</em></span>
<strong>UI 디자인</strong>
</a>
</li>
</ul>
</div>
<!-- //오버효과 -->
<!-- 오버효과2 -->
<div class="notice_hover2 mt15">
<h4 class="ir_su">Mouse Hover</h4>
<ul>
<li>
<a href="#">
<span><img src="img/sban04.jpg" alt="이미지4"><em>바로가기</em></span>
<strong>HTML</strong>
</a>
</li>
<li>
<a href="#">
<span><img src="img/sban05.jpg" alt="이미지5"><em>바로가기</em></span>
<strong>CSS</strong>
</a>
</li>
<li class="last">
<a href="#">
<span><img src="img/sban06.jpg" alt="이미지6"><em>바로가기</em></span>
<strong>jQuery</strong>
</a>
</li>
</ul>
</div>
<!-- //오버효과2-->
</div><!-- //col4 -->
<div class="column col5">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_desc">가장 웹페이지에서 기본이 되는 게시판 유형입니다.</p>
<!-- 탭 메뉴 -->
<div class="tab_menu">
<h4 class="ir_su">탭 메뉴</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 style="display: none;">
<li><a href="#">두 번째 공지사항 탭 메뉴 테스트 목록입니다.</a></li>
<li><a href="#">두 번째 공지사항 탭 메뉴 테스트 목록입니다.</a></li>
<li><a href="#">두 번째 공지사항 탭 메뉴 테스트 목록입니다.</a></li>
</ul>
</li>
<li><a href="#"> 공지사항3</a>
<ul style="display: none;">
<li><a href="#">세 번째 공지사항 탭 메뉴 테스트 목록입니다.</a></li>
<li><a href="#">세 번째 공지사항 탭 메뉴 테스트 목록입니다.</a></li>
<li><a href="#">세 번째 공지사항 탭 메뉴 테스트 목록입니다.</a></li>
</ul>
</li>
</ul>
</div>
<!-- //탭메뉴 -->
<!-- 게시판4 -->
<div class="notice4 mt15">
<h4>최신 <em>공지사항</em></h4>
<ul>
<li><a href="#">웹 디자이너와 웹 퍼블리셔의 차이점은 무엇인가요?</a><span>2022.02.23</span></li>
<li><a href="#">웹 디자이너와 웹 퍼블리셔의 차이점은 무엇인가요?</a><span>2022.02.23</span></li>
<li><a href="#">웹 디자이너와 웹 퍼블리셔의 차이점은 무엇인가요?</a><span>2022.02.23</span></li>
</ul>
<a href="#" class="more" title="더보기">더보기</a>
</div>
<!--// 게시판4 -->
</div><!-- //col5 -->
<div class="column col6">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_desc">가장 웹페이지에서 기본이 되는 게시판 유형입니다.</p>
<!-- 갤러리 -->
<div class="gallery">
<h4>포트폴리오</h4>
<div class="gellery_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="gellery_img">
<ul>
<li><a href="#"><img src="img/gallery01.jpg" alt="갤러리1"></a></li>
<li><a href="#"><img src="img/gallery02.jpg" alt="갤러리2"></a></li>
<li><a href="#"><img src="img/gallery03.jpg" alt="갤러리3"></a></li>
<li><a href="#"><img src="img/gallery04.jpg" alt="갤러리4"></a></li>
<li><a href="#"><img src="img/gallery05.jpg" alt="갤러리5"></a></li>
</ul>
</div>
</div>
<!-- //갤러리 -->
</div><!-- //col6 -->
</div>
</div>
</div>
<!-- //cont_cont -->
</div>
<!-- //contents -->
<div id="footer">
<div class="container">footer</div>
</div>
<!-- //footer -->
</div>
<!-- //wrap -->
@charset "utf-8";
/* margin top */
.mt10 {
margin-top: 10px !important;
}
.mt15 {
margin-top: 15px !important;
}
.mt20 {
margin-top: 20px !important;
}
.mt25 {
margin-top: 25px !important;
}
.mt30 {
margin-top: 30px !important;
}
.mt35 {
margin-top: 35px !important;
}
.mt40 {
margin-top: 40px !important;
}
.mt45 {
margin-top: 45px !important;
}
.mt50 {
margin-top: 50px !important;
}
/* 스킵 네비게이션 */
#skip {
position: relative;
}
#skip a {
position: absolute;
left: 0px;
top: -35px;
border: 1px solid #fff;
color: #fff;
background: #333;
line-height: 30px;
width: 160px;
text-align: center;
}
#skip a:active,
#skip a:focus {
top: 0;
}
/* 레이아웃 */
#header {
height: 325px;
background: url(../img/header_bg.jpg) center top repeat-x
}
#footer {
height: 200px;
background: #333;
}
/* 컨텐츠 레이아웃 */
#cont_nav {
background-color: #f6fdff;
}
#cont_tit {
background-color: #eaf7fd;
}
#cont_ban {
background-color: #dceff7;
}
#cont_cont {
background-color: #f6fdff;
}
/* 컨테이너 */
.container {
width: 990px;
margin: 0 auto;
height: inherit;
/* background: rgba(255,255,255,0.3);*/
}
/* 헤더 */
.header .header-menu {
text-align: right;
}
.header .header-menu a {
color: #fff;
padding: 10px 0px 10px 13px;
display: inline-block;
}
.header .header-menu a:hover {
color: #666;
}
.header .header-tit {
text-align: center;
}
.header .header-tit h1 {
background-color: #4aa8d4;
font-size: 28px;
padding: 5px 20px 6px 20px;
display: inline-block;
color: #fff;
margin-top: 40px;
font-weight: normal;
text-transform: uppercase;
}
.header .header-tit a {
display: inline-block;
background-color: #2698cb;
font-size: 18px;
color: #fff;
padding: 5px 20px 6px 20px;
margin-top: -5px;
}
.header-icon {
text-align: center;
margin-top: 30px;
}
.header-icon a {
width: 60px;
height: 60px;
display: inline-block;
background: url(../img/icon.png);
margin: 0 3px;
}
.header-icon a.icon1 {
background-position: 0 0;
}
.header-icon a.icon2 {
background-position: 0 -60px;
}
.header-icon a.icon3 {
background-position: 0 -120px;
}
.header-icon a.icon4 {
background-position: 0 -180px;
}
.header-icon a.icon1:hover {
background-position: -60px 0;
}
.header-icon a.icon2:hover {
background-position: -60px -60px;
}
.header-icon a.icon3:hover {
background-position: -60px -120px;
}
.header-icon a.icon4:hover {
background-position: -60px -180px;
}
/* float:left 으로 인한 영역깨짐 방지법
1. 모든박스에 float:left 사용 ->모든박스에 사용해야한다.
2. float의 성질을 차단하는 clear:both;를 사용한다. ->깨진 영역을 찾기어려움
3. float을 사용한 상위박스에 overflow:hidden을 사용한다. -> 많이 사용하나 2단영역은 사용불가
4. clearfix를 사용합니다.
*/
/* 전체 메뉴 */
.nav {
overflow: hidden;
padding: 30px 0;
}
.nav>div {
float: left;
width: 40%;
}
.nav>div:last-child {
width: 20%;
}
/* Ie9부터 사용가능 >ㅅ< */
.nav>div.last {
width: 20%;
}
.nav>div h3 {
font-size: 18px;
color: #25a2d0;
margin-bottom: 4px;
}
.nav>div ol {
overflow: hidden;
}
.nav>div ol li {
float: left;
width: 50%;
}
.nav>div.last ol li {
width: 100%;
}
.nav>div ol li a:hover {
text-decoration: underline;
}
/* 타이틀 */
.tit {
position: relative;
}
.tit h2 {
font-size: 40px;
text-align: center;
padding: 5px 0;
letter-spacing: 2px;
color: #2c94c4;
font-family: 'Nanum Brush Script', cursive;
}
.tit .btn {
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 60px;
background: url(../img/icon.png) no-repeat 0 -600px;
}
/* 배너 */
.ban {
position: relative;
padding: 24px 0 20px;
}
.ban a.prev {
position: absolute;
left: -80px;
top: 60px;
width: 43px;
height: 43px;
background: url(../img/icon.png) no-repeat -150px 0;
}
.ban a.next {
position: absolute;
right: -80px;
top: 60px;
width: 43px;
height: 43px;
background: url(../img/icon.png) no-repeat -150px -43px;
}
.ban a.prev:hover {
background-position: -193px 0;
}
.ban a.next:hover {
background-position: -193px -43px;
}
.ban ul {
overflow: hidden;
}
.ban ul li {
float: left;
width: 330px;
}
.ban ul li:last-child {
text-align: right;
}
/* ie9부터 적용 */
.ban ul li:nth-child(2) {
text-align: center;
}
/* ie9부터 적용 */
.ban ul li.ban_img1 {
text-align: left;
}
.ban ul li.ban_img2 {
text-align: center;
}
.ban ul li.ban_img3 {
text-align: right;
}
.ban ul li img {
border: 4px solid #dcdcdc;
}
.ban ul li img:hover {
border-color: #98dcdc;
}
/* 컨텐츠 */
.cont {
overflow: hidden;
padding-top: 30px;
}
.cont .column {
position: relative;
float: left;
width: 289px;
height: 363px;
margin: 0 30px 30px 0;
padding-right: 30px;
}
.cont .col1 {
border-right: 1px solid #c8c8c8;
}
.cont .col2 {
border-right: 1px solid #c8c8c8;
}
.cont .col3 {
margin-right: 0;
padding-right: 0;
}
.cont .col4 {
border-right: 1px solid #c8c8c8;
}
.cont .col5 {
border-right: 1px solid #c8c8c8;
}
.cont .col6 {
margin-right: 0;
padding-right: 0;
}
.cont .column .ico_img {
display: block;
width: 60px;
height: 60px;
background: url(../img/icon.png) no-repeat;
position: absolute;
left: 0;
top: 0;
}
.cont .column .ico_tit {
padding-left: 70px;
font-size: 16px;
color: #2c94c4;
}
.cont .column .ico_desc {
padding-left: 70px;
border-bottom: 1px solid #d0d0d0;
padding-bottom: 15px;
margin-bottom: 15px;
}
.cont .col1 .ico_img {
background-position: 0px -240px;
}
.cont .col2 .ico_img {
background-position: 0px -300px;
}
.cont .col3 .ico_img {
background-position: 0px -360px;
}
.cont .col4 .ico_img {
background-position: 0px -420px;
}
.cont .col5 .ico_img {
background-position: 0px -480px;
}
.cont .col6 .ico_img {
background-position: 0px -540px;
}
.cont .col1 .ico_img:hover {
background-position: -60px -240px;
}
.cont .col2 .ico_img:hover {
background-position: -60px -300px;
}
.cont .col3 .ico_img:hover {
background-position: -60px -360px;
}
.cont .col4 .ico_img:hover {
background-position: -60px -420px;
}
.cont .col5 .ico_img:hover {
background-position: -60px -480px;
}
.cont .col6 .ico_img:hover {
background-position: -60px -540px;
}
/* 게시판 */
.notice {
position: relative;
}
.notice h4 {
font-size: 14px;
color: #0093bd;
padding-bottom: 3px;
font-weight: bold;
}
.notice ul li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background: url(../img/dot.gif) no-repeat 0 8px;
padding-left: 8px;
}
.notice ul li a {
font-size: 12px;
}
.notice a.more {
position: absolute;
right: 0;
top: 0;
display: block;
background: url(../img/icon.png) -150px -90px;
width: 17px;
height: 17px;
}
/* 게시판2 */
.notice2 {
position: relative;
margin-top: 15px;
}
.notice2 h4 {
font-size: 14px;
color: #0093bd;
padding-bottom: 3px;
font-weight: bold;
}
.notice2 li {
overflow: hidden;
background: url(../img/dot.gif) no-repeat 0 8px;
padding-left: 8px;
}
.notice2 li a {
float: left;
width: 65%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notice2 li span {
float: right;
width: 30%;
text-align: right;
}
.notice2 a.more {
position: absolute;
right: 0;
top: 0;
display: block;
background: url(../img/icon.png) -150px -90px;
width: 17px;
height: 17px;
}
/* 게시판3 */
.notice3 {
position: relative
}
.notice3 h4 {
font-size: 14px;
color: #0093bd;
padding-bottom: 3px;
font-weight: bold;
}
.notice3 li {
position: relative;
padding: 8px 0 14px 60px;
}
.notice3 li a img {
width: 50px;
position: absolute;
left: 0;
top: 0;
border: 1px solid #0093db;
}
.notice3 li a strong {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notice3 li a span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
}
.notice3 a.more {
position: absolute;
right: 0;
top: 0;
display: block;
background: url(../img/icon.png) -150px -90px;
width: 17px;
height: 17px;
}
/* 마우스 오버효과 */
.notice_hover h4 {
font-size: 14px;
color: #0093bd;
padding-bottom: 3px;
font-weight: bold;
}
.notice_hover ul {
overflow: hidden;
}
.notice_hover li {
float: left;
width: 93px;
margin-right: 5px;
text-align: center;
}
.notice_hover li:last-child {
margin-right: 0;
}
/*IE9부터적용*/
.notice_hover li a span {
position: relative;
display: block;
width: 93px;
height: 93px;
line-height: 93px;
}
.notice_hover li a span img {
width: 100%;
}
.notice_hover li a span em {
visibility: hidden;
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.7);
color: #fff;
width: 100%;
height: 100%;
}
.notice_hover li a span:hover em {
visibility: visible;
}
.notice_hover li a strong {
padding-top: 3px;
display: inline-block;
font-size: 12px;
}
/* 마우스 오버효과2 */
.notice_hover2 {}
.notice_hover2 ul {
overflow: hidden;
}
.notice_hover2 li {
float: left;
width: 93px;
text-align: center;
margin-right: 5px;
}
.notice_hover2 li.last {
margin-right: 0;
}
.notice_hover2 li a span {
position: relative;
display: block;
width: 93px;
height: 93px;
}
.notice_hover2 li a span img {
width: 100px;
height: 100%;
}
.notice_hover2 li a span em {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.7);
color: #fff;
visibility: hidden;
}
.notice_hover2 li a strong {
padding-top: 3px;
display: inline-block;
font-size: 12px;
}
.notice_hover2 li a span:hover em {
visibility: visible;
}
/* 컨텐츠 요소를 보이지 않게 하는 방법 */
/* 1. display:none; -- display:block; (영역이 사라짐)
2. visibility: hidden; -- visibility: visible; (text가 사라저도 영역은 안사라짐)
3. opacity:0; -- opacity: 1; (영역이 유지)
4. (ir효과) width: 0; height: 0; overflow: hidden;
*/
/* tab_nenu */
.tab_menu {
position: relative;
border: 1px solid #ccc;
padding: 8px;
height: 105px;
}
.tab_menu ul {
overflow: hidden;
border-bottom: 1px solid #ccc;
}
.tab_menu ul li {
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;
left: 0px;
top: 48px;
width: 270px;
border: 0;
}
.tab_menu ul li ul li {
float: none;
border: 0;
background: url(../img/dot.gif) no-repeat 9px 8px;
padding-left: 18px;
}
.tab_menu ul li ul li a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
padding: 0 0 3px 0;
}
.tab_menu ul li.active {
background: #2c94c4;
}
.tab_menu ul li.active a {
color: #fff;
}
.tab_menu ul li.active ul li a {
color: #333;
}
/* 게시판4 */
.notice4 {
position: relative;
border: 1px solid #ccc;
}
.notice4 h4 {
border-bottom: 1px solid #ccc;
font-size: 14px;
color: #0093bd;
font-weight: 700;
padding: 8px 10px;
}
.notice4 h4 em {
color: #cf3292;
}
.notice4 ul {
padding: 10px;
}
.notice4 li {
overflow: hidden;
background: url(../img/dot.gif) no-repeat 0 10px;
padding-left: 8px;
padding-bottom: 2px;
}
/*overflow : 요소의 박스에 내용이 너 길 때 어떻게 보일지 선택한는 속성
overflow 속성: visible : 내용이 길어도 그대로 보임
hidden: 내용이 넘치면 자름(자른 부분은 보이지 않음)
scroll: 내용이 넘치지 앉아도 항상 스크롤바가 보임
auto: 내용이 잘릴 때만 스크롤바가 보임 */
.notice4 li a {
float: left;
width: 60%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*text-overflow : 박스 안에 내용이 넘칠 떄 텍스트를 어떻게 처리할지 지정하는 속성
주의: text-overflow 속성은 다음 2가지를 모두 충족할 경우에만 적용됩니다.
1. overflow 속성값이 hidden, scroll, auto 일 때 (visible 제외)
2. white-space: norap(텍스트가 길어도 줄바꿈 되지 않음)
text-overflow 속성
clip : 기본값, 텍스트를 자름
ellipsis : 잘린 텍스트를 생략 부호(...)으로 표시함
string : 잘린 텍스트르 지정한 문자열로 표시 (예 : div{text-overflow: "***"; */
/*white-space 속성: 요소안에 공백을 어떻게 처리할지 지정하는 속성
nomal : 기본값, 공백을 여러개 넣어도 공백 1개만 표시, 글이 길어지면 텍스트가 자동 줄바꿈 됨(wrap)
nowrap : 공백을 여러개 넣어도 1개만 표시, 텍스트가 길어도 줄바꿈 되지 않고 같은 줄에 계속 표시
pre : 공백을 코드에 있는 그대로 표시함태그 처럼 행동함. 코드에 줄바꿈이 없다면 줄바꿈이 되지 않음
pre-wrap : 공백을 코드에 그대로 표시함. 줄바꿈이 없어도 자동 줄바꿈이 됨
pre-line : 공백을 여러개 넣어도 1개만 표시 코드에 줄바꿈이 없어도 자동 줄바꿈이 되며, 코드에 줄바꿈이 있을 때도 그대로 표시
*/
.notice4 li span {
float: right;
width: 30%;
text-align: right;
}
.notice4 a.more {
position: absolute;
right: 9px;
top: 9px;
}
/* 갤러리 */
.gallery {
border: 1PX solid #CCC;
height: 254px;
position: relative;
overflow: hidden;
}
.gallery h4 {
font-size: 14px;
color: #0093bd;
border-bottom: 1px solid #ccc;
padding: 10px 0 8px 11px;
font-weight: bold;
}
.gellery_btn {
position: absolute;
right: 5px;
top: 7px;
}
.gellery_btn ul {
overflow: hidden;
}
.gellery_btn ul li {
float: left;
margin: 1px 2px;
}
.gellery_btn ul li a {
display: block;
width: 23px;
height: 23px;
background: url(../img/icon.png) no-repeat;
}
.gellery_btn ul li.gb_icon1 a {
background-position: -150px -120px;
}
.gellery_btn ul li.gb_icon2 a {
background-position: -150px -143px;
}
.gellery_btn ul li.gb_icon3 a {
background-position: -150px -166px;
}
.gellery_btn ul li.gb_icon4 a {
background-position: -150px -189px;
}
/* hover */
.gellery_btn ul li.gb_icon1 a:hover {
background-position: -173px -120px;
}
.gellery_btn ul li.gb_icon2 a:hover {
background-position: -173px -120px;
}
.gellery_btn ul li.gb_icon3 a:hover {
background-position: -173px -120px;
}
.gellery_btn ul li.gb_icon4 a:hover {
background-position: -173px -120px;
}
.gellery_img img {
width: 100%;
}
<script type="text/javascript">
// <![CDATA[ <-- For SVG support
if ('WebSocket' in window) {
(function () {
function refreshCSS() {
var sheets = [].slice.call(document.getElementsByTagName("link"));
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
var parent = elem.parentElement || head;
parent.removeChild(elem);
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
parent.appendChild(elem);
}
}
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
var address = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function (msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
};
if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
console.log('Live reload enabled.');
sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
}
})();
}
else {
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
}
// ]]>
</script>
02.
responsive
어떤 디바이스를 이용하든 시각적으로 아름답고 기능적이며 사용성을 높일수 있게 구성 요소가 다양한 뷰포트 너비와 화면 해상도에서 원활하게 작동하게끔 할 방안을 고민하고 페이지 구성 요소 단위로 반응성과 기능성을 증대한 반응형 웹 사이트 입니다.
#반응형 #@media #CSS
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹 표준 사이트 만들기</title>
<!-- SEO(검색엔진최적화) -->
<meta name="acthor" content="webstroyboy">
<meta name="description" content="웹 표준을 준수한 사이트입니다.">
<meta name="keywords" content="웹표준, 웹접근성, 웹호환성, 사이트제작, 사이트만들기, 포트폴리오">
<meta name="robots" content="all">
<!-- 메타 정보 -->
<meta property="og:title" content="웹표준 사이트 제작">
<meta property="og:url" content="https://webstoryboy.github.io/webs_class/site/webClass/index.html">
<meta property="og:image" content="https://webstoryboy.github.io/webs_class/site/webClass/img/icon.png">
<meta property="og:description" content="웹 표준을 준수한 사이트 튜토리얼입니다.">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="웹표준 사이트 제작">
<meta name="twitter:url" content="https://webstoryboy.github.io/webs_class/site/webClass/index.html">
<meta name="twitter:image" content="https://webstoryboy.github.io/webs_class/site/webClass/img/icon.png">
<meta name="twitter:description" content="웹 표준을 준수한 사이트 튜토리얼입니다.">
<!-- 아이콘 & 파비콘 -->
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<link rel="apple-touch-icon" href="img/icon114.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/icon114.png">
<link rel="apple-touch-icon-precomposed" href="img/icon.png" />
<link rel="apple-touch-icon-precomposed" sizes="167x167" href="img/icon167.png" />
<!-- CSS style -->
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
</head>
<body>
<noscript>"페이지를 보려면 자바스크립트 옵션이 활성화 되어 있어야 합니다."</noscript>
<div id="skip">
<a href="#contents">컨텐츠 바로가기</a>
<a href="#contents">컨텐츠 바로가기1</a>
</div>
<!--skip-->
<!-- wrap -->
<div id="wrap">
<header id="header">
<h1 class="logo">
<a href="index.html">WEB <em>class</em></a>
</h1>
<nav class="menu">
<h2 class="ir_so">메인 메뉴</h2>
<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>
</nav>
<div class="member">
<a href="join.html">회원가입</a>
<a href="login.html">로그인</a>
</div>
</header>
<!--//header -->
<section id="contents">
<h3 class="ir_so">배너 영역</h3>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide s1">
<div class="desc">
<span>DEVELOPER01</span>
<h4>NEW FRONTEND</h4>
<p>당신이 만들어갈 새로운 이야기<br>
당신도 할 수 있습니다.</p>
<div class="btn">
<a href="#" class="white">자세히 보기</a>
<a href="#" class="black">사이트 보기</a>
</div>
</div>
</div>
<div class="swiper-slide s2">
<div class="desc">
<span>DEVELOPER02</span>
<h4>NEW FRONTEND</h4>
<p>당신이 만들어갈 새로운 이야기<br>
당신도 할 수 있습니다.</p>
<div class="btn">
<a href="#" class="white">자세히 보기</a>
<a href="#" class="black">사이트 보기</a>
</div>
</div>
</div>
<div class="swiper-slide s3">
<div class="desc">
<span>DEVELOPER03</span>
<h4>NEW FRONTEND</h4>
<p>당신이 만들어갈 새로운 이야기<br>
당신도 할 수 있습니다.</p>
<div class="btn">
<a href="#" class="white">자세히 보기</a>
<a href="#" class="black">사이트 보기</a>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="img_Type">
<!-- <img src="../webClass/img/Mask Group-min.jpg" alt="메인 베너"> -->
</div>
</section>
<!-- //banner -->
<section id="contents">
<h2 class="ir_so">컨텐츠 영역</h2>
<article class="imgText_type01 container">
<div class="text">
<h3 class="text_title">이미지&텍스트</h3>
<p class="text_desc">
사이트 제작에 있어 이미지와<br>
텍스트를 혼합해서 사용하는 경우가 많습니다.<br>
기본 레이아웃은 동일하기 때문에<br>
이미지나 배치에 따라서<br>
느낌은 얼마든지 다르게 표현할 수 있습니다.<br>
Gmarket Sans 40px, Medium<br>
NEXON Lv1 Gothic 18px(153%) Regular
</p>
<div class="text_more">
<a href="#">
<span>더 많은 유형 살펴보기</span>
<svg width="82" height="12" viewBox="0 0 82 12" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M82 6L72 0.226497V11.7735L82 6ZM0 7H73V5H0V7Z" fill="#E32F2F" />
</svg>
</a>
</div>
</div>
<div class="img1"></div>
<div class="img2"></div>
</article>
<!-- //imgText_Type01 -->
<article class="imgText_type02">
<div class="left"></div>
<div class="right">
<span class="sub">베스트 여행지 01</span>
<h3 class="title">두바이 부르즈 할리파(Burj Khalifa)</h3>
<p class="desc">
이미지와 텍스트를 같이 사용하는 경우입니다.<br>
레이아웃을 반반 나우어서 사용 하는 경우입니다.<br>
CNBC에 따르면 가장 많이 검색이 이뤄진 여행지는 세계에서 가장<br>
높은 건물인 두바이의 부르즈 할리파(Burj Khalifa)였다.<br>
Gmarket Sans 24px 140%, Light
</p>
<a href="#">자세히 보기</a>
</div>
</article>
<!-- //imgText_Type02 -->
<article class="img_type01 container">
<h3>동물공감 인터뷰 <em>이미지 유형01</em></h3>
<div class="img-wrap">
<div class="left">
<div class="left-cont">
<h4>애교만점 웰시코기</h4>
<p>다리가 짧기 때문에 소형견이라고 착각하는 사람들이 많지만, 신장 25~32 cm, 체중 10~17 kg 정도로 중형견이다.</p>
<a href="#">자세히 보기</a>
</div>
</div>
<div class="right">
<div class="right-cont">
<h4>애교만점 웰시코기</h4>
<p>다리가 짧기 때문에 소형견이라고 착각하는 사람들이 많지만, 신장 25~32 cm, 체중 10~17 kg 정도로 중형견이다.</p>
<a href="#">자세히 보기</a>
</div>
</div>
</div>
</article>
<article class="banner_type01">
<div class="container01">
<h3>부르즈 할리파(Burj Khalifa)</h3>
<p>이미지와 텍스트를 같이 사용하는 경우입니다.<br>
레이아웃을 반반나누어서 사용하는 경우입니다.<br>
CNBC에서 따르면 가장 많이 검색이 이뤄진 여행지는 세계에서</p>
<a href="#">배너 유형01</a>
</div>
</article>
<!-- //img_type01 -->
<article class="img_type02">
<div class="container">
<h3>Love <em>이미지 유형02</em></h3>
<div class="img-wrap">
<ul>
<li>
<span>
<em>Love</em>
<a href="#">자세히 보기</a>
</span>
</li>
<li>
<span>
<em>Heart</em>
<a href="#">자세히 보기</a>
</span>
</li>
<li>
<span>
<em>LED</em>
<a href="#">자세히 보기</a>
</span>
</li>
</ul>
</div>
</div>
</article>
<!-- //imgType02 -->
</section>
<!-- //contents -->
<footer id="footer" class="footer_type01">
<div class="container">
<h2 class="ir_so">푸터 바로가기 메뉴</h2>
<div class="footer-wrap">
<div>
<h3>레이아웃 영역</h3>
<ul>
<li><a href="#">레이아웃 유형 01</a></li>
<li><a href="#">레이아웃 유형 02</a></li>
<li><a href="#">레이아웃 유형 03</a></li>
<li><a href="#">레이아웃 유형 04</a></li>
<li><a href="#">레이아웃 유형 05</a></li>
</ul>
</div>
<div>
<h3>메뉴 영역</h3>
<ul>
<li><a href="#">메뉴 영역1</a></li>
</ul>
</div>
<div>
<h3>메인 영역</h3>
<ul>
<li><a href="#">이미지 유형 01</a></li>
<li><a href="#">동영상 유형 02</a></li>
<li><a href="#">슬라이드 유형 03</a></li>
</ul>
</div>
<div>
<h3>컨텐츠 영역</h3>
<ul>
<li><a href="#">텍스트 유형 01</a></li>
<li><a href="#">이미지 유형 02</a></li>
<li><a href="#">이미지/텍스트 03</a></li>
<li><a href="#">카드 유형 04</a></li>
<li><a href="#">배너 유형 05</a></li>
</ul>
</div>
<div>
<h3>푸터 영역</h3>
<ul>
<li><a href="#">컨택트 유형 01</a></li>
<li><a href="#">푸터 영역 02</a></li>
</ul>
</div>
<div>
<h3>사이트</h3>
<ul>
<li><a href="#">웹표준 사이트</a></li>
<li><a href="#">반응형 사이트</a></li>
<li><a href="#">패럴랙스 사이트</a></li>
<li><a href="#">포트폴리오 사이트</a></li>
</ul>
</div>
</div>
<address class="footer-rights">
© 2022 jowunseop. All Rights reserved
<div class="footer-sns">
<ul>
<li><a href="#" class="ir_pm">페이스북</a></li>
<li><a href="#" class="ir_pm">인스타그램</a></li>
<li><a href="#" class="ir_pm">카카오톡</a></li>
<li><a href="#" class="ir_pm">블러그</a></li>
</ul>
</div>
</address>
</div>
</footer>
</div>
/* 전체 레이아웃 */
#wrap {
height: 5000px;
}
.gray {
background: #f5f5f5;
}
.white {
background: #fff !important;
}
/* 컨테이너 */
.container {
width: 1200px;
margin: 0 auto;
}
/* 1. float를 사용할 경우*/
/* #header {
padding: 10px;
border: 1px solid #333;
min-width: 1200px;
white-space: nowrap;
}
#header .logo {
float: left;
width: 20%;
padding: 20px 18px;
}
#header .logo a {
font-size: 30px;
}
#header .logo a em {
font-size: 18px;
font-weight: 300;
}
#header .menu {
float: left;
width: 60%;
text-align: center;
}
#header .menu div {
display: inline-block;
padding: 30px;
}
#header .member {
float: right;
width: 20%;
text-align: right;
padding: 30px 10px;
}
#header .member a {
border: 1px solid #333;
padding: 10px 20px;
border-radius: 50px;
} */
/* flex를 사용할 경우 */
/* #header {
padding: 10px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-around;
min-width: 1200px;
white-space: nowrap;
}
#header .logo {
/* flex : flex-grow: 0; / flex-shrink: 0; / flex-basis: 20%; 3가지를 한번에 */
/* flex: 0 0 20%;
}
#header .logo a {
font-size: 30px;
padding: 12px 18px;
display: inline-block;
}
#header .menu {
flex: 0 0 60%;
text-align: center;
}
#header .menu li {
display: inline-block;
}
#header .menu li a {
padding: 20px 30px;
display: inline-block;
}
#header .member {
flex: 0 0 20%;
text-align: left;
padding: 10px 18px;
}
#header .member a {
display: inline-block;
padding: 9px 22px;
border: 1px solid #333 ;
border-radius: 50px;
} */
/* 헤더3 grid를 사용하는 경우 */
#header {
padding: 10px;
border-bottom: 1px solid #eee;
min-width: 1200px;
white-space: nowrap;
display: grid;
grid-template-columns: 20% 60% 20%;
/* 그리드 */
}
#header .logo a {
font-size: 30px;
padding: 12px 18px;
display: inline-block;
}
#header .logo a em {
font-size: 18px;
font-weight: 300;
}
#header .menu {
text-align: center;
}
#header .menu li {
display: inline;
}
#header .menu li a {
padding: 20px 30px;
display: inline-block;
position: relative;
transition: background 0.4s;
}
#header .menu li a:hover {
background: #f5f5f5;
border-radius: 10px;
}
/* #header .menu div a:hover {
border-bottom: 1px solid #000;
} */
#header .member {
flex: 0 0 20%;
padding: 10px 18px;
text-align: right;
}
#header .member a {
display: inline-block;
padding: 9px 22px;
border: 1px solid #333;
border-radius: 50px;
transition: all 0.3s;
}
#header .member a:hover {
background: #333;
color: #fff;
}
/* 배너 */
/* #banner {} */
.img_Type {
/* width: 100%;
height: 700px; */
/* background-image: url(../img/Mask\ Group-min.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center; */
/* background: url(../img/마운틴.jpg) no-repeat center / cover; */
}
/* .slider {
position: relative;
white-space: nowrap;
}
.slider-img {
height: 600px;
background: url(../img/마운틴.jpg) no-repeat center / cover;
}
.slider-img .desc {
margin: 0 auto;
max-width: 1200px;
padding: 100px 0;
color: #fff;
}
.slider-img .desc span {
font-size: 18px;
}
.slider-img .desc h4 {
font-size: 110px;
font-weight: 300;
margin-left: -8px;
}
.slider-img .desc p {
font-size: 24px;
font-weight: 300;
margin-bottom: 100px;
}
.slider-img .desc .btn a {
font-size: 16px;
padding: 11px 50px;
display: inline-block;
}
.slider-img .desc .btn .white {
background: #fff;
color: #000;
}
.slider-img .desc .btn .black {
background: #000;
color: #fff;
}
.slider-arrow a {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: url(../img/bg.svg);
}
.slider-arrow .left {
left: 10px;
width: 27px;
height: 56px;
background-position: 0 -50px;
}
.slider-arrow .right {
right: 10px;
width: 30px;
height: 56px;
background-position: -20px -50px;
}
.slider-dot {
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
}
.slider-dot a {
width: 14px;
height: 14px;
background: url(../img/bg.svg);
display: inline-block;
margin: 2px;
}
.slider-dot .dot {
background-position: -70px -50px;
}
.slider-dot .dot.active {
background-position: -50px -50px;
}
.slider-dot .play {
background-position: -88px -50px;
}
.slider-dot .stop {
background-position: -110px -50px;
} */
.swiper {
width: 100%;
height: 600px;
}
.swiper-slide.s1 {
background: url(../img/마운틴.jpg) no-repeat center / cover;
}
.swiper-slide.s2 {
background: url(../img/마운틴.jpg) no-repeat center / cover;
}
.swiper-slide.s3 {
background: url(../img/마운틴.jpg) no-repeat center / cover;
}
.slider-img .desc {
margin: 0 auto;
max-width: 1200px;
padding: 100px 0;
color: #fff;
}
.swiper .desc {
margin: 0 auto;
max-width: 1200px;
padding: 100px 0;
color: #fff;
}
.swiper .desc span {
font-size: 18px;
}
.swiper .desc h4 {
font-size: 110px;
font-weight: 300;
margin-left: -8px;
}
.swiper .desc p {
font-size: 24px;
font-weight: 300;
margin-bottom: 100px;
}
.swiper .desc .btn a {
font-size: 16px;
padding: 11px 50px;
display: inline-block;
}
.swiper .desc .btn .white {
background: #fff;
color: #000;
}
.swiper .desc .btn .black {
background: #000;
color: #fff;
}
.swiper-button-prev {
width: 27px;
height: 56px;
background: url(../img/bg.svg);
background-position: 0 -50px;
}
.swiper-button-prev::after {
font-size: 0 !important;
}
.swiper-button-next {
width: 27px;
height: 56px;
background: url(../img/bg.svg);
background-position: -23px -50px;
}
.swiper-button-next::after {
font-size: 0 !important;
}
/* 웹 사이트에서 이미지를 표현하는 방법
1. HTML 태그를 통해서 : img태그 : 의미가 있는 이미지(로고, 메뉴) --> alt(대체문자)
2. CSS 속성을 통해서 : background 속성 : 의미가 없는 이미지(배경, 색표현) -->ir효과(대체 문자를 CSS속성으로 표현)
3. 이미지 스프라이트 : background와 ir효과를 통해서 이미지를 표현
*/
/* 이미지/텍스트 유형 유형1(img_text_type01)*/
.imgText_type01 {
padding: 150px 0;
overflow: hidden;
}
.imgText_type01 .text {
float: left;
width: 386.66px;
height: 530px;
margin-right: 20px;
}
.imgText_type01 .text .text_title {
font-family: 'GmarketSans';
font-size: 50px;
font-weight: 500;
margin: 70px 0 45px -4px;
}
.imgText_type01 .text .text_desc {
font-family: 'NEXONLv1Gothic';
font-style: 18px;
color: #888;
margin-bottom: 55px;
}
.imgText_type01 .text .text_more {
font-family: 'NEXONLv1Gothic';
font-size: 18px;
}
.imgText_type01 .text .text_more a {
color: #af3029;
}
/* .itType01 .text .text_more svg {
vertical-align: 2px;
} */
.imgText_type01 .img1 {
float: left;
width: 386.66px;
height: 530px;
margin-right: 20px;
background-color: #ccc;
background-image: url(../img/img_text_bg1.jpg);
}
.imgText_type01 .img2 {
float: left;
width: 386.66px;
height: 530px;
background-color: #ccc;
background-image: url(../img/img_text_bg2.jpg);
}
@media (-webkit-min-device-pixel-ratio:1.5) {
.imgText_type01 .img1 {
background-image: url(../img/img_text_bg1@2x.jpg);
}
.imgText_type01 .img2 {
background-image: url(../img/img_text_bg1@2x.jpg);
}
}
@media (-webkit-min-device-pixel-ratio:2.5) {
.imgText_type01 .img1 {
background-image: url(../img/img_text_bg1@3x.jpg);
}
.imgText_type01 .img2 {
background-image: url(../img/img_text_bg1@3x.jpg);
}
}
/* itType02 */
.imgText_type02 {
background: #F5F5F5;
overflow: hidden;
padding: 150px 0;
min-width: 1200px;
}
.imgText_type02 .left {
float: left;
width: 48.5%;
height: 535px;
background: url(../img/img_text_bg3.jpg) no-repeat center center;
background-size: cover;
margin-right: 1.5%;
}
.imgText_type02 .right {
font-family: 'GmarketSans';
float: left;
width: 48.5%;
height: 535px;
margin-left: 1.5%;
}
.imgText_type02 .right .sub {
font-size: 16px;
color: #7C7C7C;
margin-top: 43px;
margin-bottom: 10px;
display: inline-block;
/* text-decoration: underline;
text-underline-position: under; */
border-bottom: 1px solid #7C7C7C;
}
.imgText_type02 .right .title {
font-size: 50px;
font-weight: 500;
margin-bottom: 38px;
white-space: nowrap;
}
.imgText_type02 .right .desc {
font-size: 24px;
font-weight: 300;
margin-bottom: 38px;
white-space: nowrap;
}
.imgText_type02 .right .view {
font-size: 16px;
font-weight: 300;
background: #000;
padding: 9px 46px;
display: inline-block;
color: #fff;
font-weight: 500;
}
/* 이미지 유형 01(img_type01) */
.img_type01 {
padding: 150px 0;
height: 500px;
margin-bottom: 500px;
}
.img_type01 h3 {
font-size: 50px;
line-height: 1;
font-weight: 500;
margin-bottom: 30px;
}
.img_type01 h3 em {
font-size: 20px;
color: #777;
vertical-align: -4px;
}
.img_type01 .img-wrap {
display: flex;
justify-content: space-between;
}
.img_type01 .img-wrap .left {
width: 590px;
height: 360px;
background: url(../img/겨울산.jpg);
position: relative;
overflow: hidden;
}
.img_type01 .img-wrap .right {
width: 590px;
height: 360px;
background: url(../img/도시야경.jpg);
position: relative;
overflow: hidden;
}
.img_type01 .img-wrap .left .left-cont {
position: absolute;
left: 20px;
bottom: -100px;
transition: bottom 0.33s cubic-bezier(0.07, 0.71, 0.26, 0.99);
}
.img_type01 .img-wrap .left:hover .left-cont {
bottom: 20px;
}
.img_type01 .img-wrap .right-cont {
position: absolute;
left: 20px;
bottom: -100px;
transition: bottom 0.33s cubic-bezier(0.07, 0.71, 0.26, 0.99);
}
.img_type01 .img-wrap .left:hover .right-cont {
bottom: 20px;
}
.img_type01 .img-wrap h4 {
font-size: 30px;
color: #fff;
font-weight: 500;
}
.img_type01 .img-wrap p {
font-size: 14px;
color: #fff;
padding-right: 200px;
margin-bottom: 15px;
}
.img_type01 .img-wrap a {
background: #9A481D;
padding: 10px 20px;
color: #fff;
display: inline-block;
}
/* 이미지 유형 02(img_type02) */
.img_type02 {
padding: 150px 0;
background: #fff;
}
.img_type02 h3 {
font-size: 50px;
line-height: 1;
font-weight: 500;
margin-bottom: 30px;
}
.img_type02 h3 em {
font-size: 20px;
color: #777;
vertical-align: -4px;
}
.img_type02 .img-wrap ul {
display: flex;
justify-content: space-between;
/* 이미지 정렬 */
}
.img_type02 .img-wrap ul li {
width: 387px;
height: 387px;
background-size: 100%;
position: relative;
perspective: 800px;
}
.img_type02 .img-wrap li::after {
content: '';
display: block;
background: #fff;
position: absolute;
left: 30px;
right: 30px;
top: 30px;
bottom: 30px;
opacity: 0;
transition: all 0.4s ease-in-out;
transform: rotateX(-90deg);
}
.img_type02 .img-wrap li:hover::after {
opacity: 0.8;
transform: rotateX(0deg);
}
.img_type02 .img-wrap li span {
position: absolute;
left: 50%;
top: calc(50% + 36px);
color: #000;
z-index: 100;
transform: translate(-50%, -50%);
text-align: center;
transition: all 0.3s ease-in-out;
}
.img_type02 .img-wrap li span em {
display: block;
font-style: 30px;
font-weight: 500;
font-size: 40px;
color: #fff;
transition: all 0.3s;
}
.img_type02 .img-wrap li span a {
display: block;
background: #000;
border-radius: 40px;
font-weight: 300;
margin-top: 5px;
padding: 7px 15px 5px 15px;
color: #fff;
opacity: 0;
transition: all 0.4s;
}
.img_type02 .img-wrap li:hover span {
top: 50%
}
.img_type02 .img-wrap li:hover span em {
color: #000;
}
.img_type02 .img-wrap li:hover span a {
opacity: 1;
}
.img_type02 .img-wrap li:nth-child(1) {
background: url(../img/img_big1.jpg);
}
.img_type02 .img-wrap li:nth-child(2) {
background: url(../img/img_big2.jpg);
}
.img_type02 .img-wrap li:nth-child(3) {
background: url(../img/img_big3.jpg);
}
/*banner_type01 */
.banner_type01 {
font-family: 'GmarketSans';
background: url(../img/노트북\ 1.jpg) center center no-repeat;
background-size: cover;
}
.container01 {
width: 100%;
height: 500px;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
color: #fff;
}
.container01 h3 {
font-size: 50px;
font-weight: 500;
position: relative;
top: 142.3px;
}
.container01 p {
font-size: 24px;
font-weight: 300;
position: relative;
top: 150px;
}
.container01 a {
font-size: 16px;
font-weight: 500;
position: relative;
color: #fff;
top: 180px;
line-height: 10;
text-decoration: underline;
}
/* footer_type01 */
#footer {
width: 100%;
height: 682px;
background-color: #f5f5f5;
}
#footer .container {
padding: 150px 0 0 0;
}
.footer-wrap {
display: flex;
justify-content: space-between;
font-family: 'GmarketSans';
border-bottom: 1px solid #333;
}
.footer-wrap h3 {
margin: 0 58px 30px 0;
font-size: 28px;
font-weight: 500;
}
.footer-wrap ul {
margin-bottom: 72px;
}
.footer-wrap ul li a {
font-size: 18px;
line-height: 1.8;
font-weight: 300;
position: relative;
color: #777;
}
.footer-wrap ul li a:hover {
color: rgb(5, 5, 5);
}
.footer-wrap ul li a::before {
content: '';
position: absolute;
left: 0;
bottom: -3px;
width: 100%;
height: 1px;
background: #111;
transform: scale(0);
transition: all 0.3s ease;
}
.footer-wrap ul li a:hover::before {
transform: scale(1);
color: #000;
}
.footer-rights {
text-align: center;
position: relative;
top: 60px;
}
.footer-sns {
margin-top: 10px;
}
.footer-sns ul {
display: flex;
justify-content: center;
}
.footer-sns li a {
width: 40px;
height: 40px;
margin: 4px 6px;
display: inline-block;
background-image: url(../img/svg.svg);
}
.footer-sns li:nth-child(1) a {}
.footer-sns li:nth-child(2) a {
background-position: -50px 0;
}
.footer-sns li:nth-child(3) a {
background-position: -100px 0;
}
.footer-sns li:nth-child(4) a {
background-position: -150px 0;
}
/* 회원가입 */
.join-type {
padding: 200px 0;
}
.member-form {
max-width: 665px;
border: 1px solid #dedede;
background: #fff;
margin: 0px auto;
padding: 50px;
}
.member-form h3 {
font-weight: 500;
font-size: 24px;
margin-bottom: 30px;
}
.member-form .list li {
font-size: 14px;
line-height: 1.6;
position: relative;
padding-left: 10px;
}
.member-form .list li::before {
content: '';
width: 3px;
height: 3px;
background: #000;
border-radius: 50%;
position: absolute;
left: 0;
top: 7px;
/* 가상요소 */
}
.member-targ {
margin-top: 30px;
}
.member-targ h4 {
font-weight: 500;
width: 238px;
border-bottom: 1px solid #000;
font-size: 16px;
}
.member-targ .back {
margin-top: 10px;
height: 170px;
font-size: 14px;
background: #f5f5f5;
}
.member-targ .back ul {
display: inline-block;
margin: 20px;
}
.member-targ .back ul li {
position: relative;
margin-left: 10px;
}
.member-targ .back ul li::before{
content: '';
width: 3px;
height: 3px;
background: #000;
border-radius: 50%;
position: absolute;
left: -10px;
top: 7px;
}
.join-box {}
.join-box label {
display: block;
font-size: 14px;
margin-bottom: 5px;
}
.join-box input {
border: 1px solid #dfdfdf;
width: 100%;
padding: 15px;
height: 50px;
margin-bottom: 30px;
}
.join-submint {
font-size: 16px;
background: #eee;
padding: 15px;
display: block;
width: 100%;
transition: all 0.3s;
cursor: pointer;
}
.join-submint:hover {
box-shadow: inset 0 0 0 2px #222;
background: #fff;
}
<script>
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'horizontal',
loop: true,
effect: 'slide',
autoplay: {
delay: 3000,
},
// If we need pagination
pagination: {
el: '.swiper-pagination',
clickable : true
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
<!-- Code injected by live-server -->
<script type="text/javascript">
// <![CDATA[ <-- For SVG support
if ('WebSocket' in window) {
(function () {
function refreshCSS() {
var sheets = [].slice.call(document.getElementsByTagName("link"));
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
var parent = elem.parentElement || head;
parent.removeChild(elem);
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
parent.appendChild(elem);
}
}
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
var address = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function (msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
};
if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
console.log('Live reload enabled.');
sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
}
})();
}
else {
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
}
// ]]>
</script>
03.
REACT BLOG
header, footer, contant layout과 각각의 contant의 section을 컴퍼넌트 페이지로 작성하고 PROPS를 활용하여 데이터를 주고받는 흐름을 완벽하게 이해하고 응용하여 만든 React Blog 입니다.
#자바스크립트 라이브러리 #웹 프레임워크로 #Component
import React from "react";
import Header from "../layout/Header";
import Contents from "../layout/Contents";
import Footer from "../layout/Footer";
import MainCont from "../includes/MainCont";
import Loading from "../basics/Loading";
import { gsap } from "gsap";
class Main extends React.Component {
state = { //state 변수 설정
isLoading: true,
}
getSite = () => {
setTimeout(()=> {
gsap.to("#header", {duration: 0.2, top:0});
gsap.to("#footer", {duration: 4, bottom:0});
gsap.to(".main__inner > div:nth-child(1)", {duration: 1.0, opacity:1, y:0, delay: 1.0,ease: "back.inOut(10)", y: 0 });
gsap.to(".main__inner > div:nth-child(2)", {duration: 1.2, opacity:1, y:0, delay: 1.2,ease: "back.inOut(10)", y: 0 });
gsap.to(".main__inner > div:nth-child(3)", {duration: 1.4, opacity:1, y:0, delay: 1.4,ease: "back.inOut(10)", y: 0 });
gsap.to(".main__inner > div:nth-child(4)", {duration: 1.6, opacity:1, y:0, delay: 1.6,ease: "back.inOut(10)", y: 0 });
}, 1000)
}
//생명주기 함수 ..사이트가 로딩이 시작하면
componentDidMount(){
setTimeout(() => {
this.setState({isLoading:false});
this.getSite();
}, 3000)
}
render(){
const {isLoading} = this.state;
return (
<>
{isLoading ? (
<Loading/>
) : (
<>
<Header />
<Contents>
<MainCont />
</Contents>
<Footer />
</>
)}
</>
)
}
}
export default Main;
import React from "react";
import Header from "../layout/Header";
import Contents from "../layout/Contents";
import Footer from "../layout/Footer";
import ContTitle from "../layout/Title";
import Contact from "../layout/Contact";
import ReferCont from "../includes/ReferCont";
import Loading from "../basics/Loading";
import { gsap } from "gsap";
import axios from "axios";
class Reference extends React.Component {
state = {
isLoading: true,
refers: [],
};
mainAnimation = () => {
setTimeout(() => {
gsap.to("#header", { duration: 0.6, top: 0 });
gsap.to("#footer", { duration: 0.6, bottom: 0 });
gsap.to(".cont__title strong", {
duration: 0.8,
opacity: 1,
x: 0,
y: 0,
delay: 1.0,
ease: "back.inOut(5)",
y: 0,
});
gsap.to(".cont__title em", {
duration: 1.0,
opacity: 1,
x: 0,
y: 0,
delay: 1.2,
ease: "back.inOut(5)",
y: 0,
});
gsap.to(".Reference__inner", {
duration: 1.3,
opacity: 1,
x: 0,
y: 0,
delay: 1.8,
ease: "back.inOut(5)",
y: 0,
});
}, 10);
};
getRefers = async () => {
const {
data: {
data: { refer },
},
// axios로 다운받아온 데이터(refer) data:{data:{refer}} (배열안에 refer가 들어있는 경로)
} = await axios.get(
"https://jowuseop1110.github.io/react2022/src/assets/json/reference.json"
);
this.setState({ refers: refer, isLoading: false });
this.mainAnimation();
};
componentDidMount() {
setTimeout(() => {
document.getElementById("loading").classList.remove("loading__active");
this.getRefers();
}, 2000);
}
render() {
const { isLoading, refers } = this.state;
return (
<>
{/* 삼항연산자: isLoading이 있으면(true) <Loading/>을 실행하고 없으면(false) <Header, Contents....Foooter 실행 */}
{isLoading ? (
<Loading color="light" />
) : (
<>
<Header />
<Contents>
<ContTitle title={["REFERENCE", "BOOK"]} />
<section className="refer__cont">
<div className="container">
<div className="refer__inner">
<h2>CSS</h2>
<ul className="refer__list">
{refers.map((refer) => (
<ReferCont
key={refer.id}
id={refer.id}
title={refer.title}
desc={refer.desc}
use={refer.use}
desc2={refer.desc2}
element={refer.element}
teg={refer.teg}
version={refer.version}
view={refer.view}
image={refer.image}
link={refer.link}
definition={refer.definition}
Accessibility={refer.Accessibility}
mdn={refer.mdn}
w3c={refer.w3c}
/>
))}
</ul>
</div>
</div>
</section>
{/* <ReferCont refer={refers} color="light"/> */}
<Contact />
</Contents>
<Footer />
</>
)}
</>
);
}
}
export default Reference;
import React from "react";
import Header from "../layout/Header";
import Contents from "../layout/Contents";
import Footer from "../layout/Footer";
import ContactCont from "../includes/ContactCont";
import Loading from "../basics/Loading";
import { gsap } from "gsap";
class Contact extends React.Component {
state = {
isLoading: true,
};
mainAnimation = () => {
setTimeout(() => {
gsap.to("#header", { duration: 0.6, top: 0 });
gsap.to("#footer", { duration: 0.6, bottom: 0 });
}, 10);
};
getPorts = async () => {
setTimeout(() => {
console.log("두번째 시작");
this.setState({ isLoading: false });
this.mainAnimation();
}, 1600);
};
componentDidMount() {
setTimeout(() => {
console.log("첫번째 시작");
document.getElementById("loading").classList.remove("loading__active");
this.getPorts();
}, 2000);
}
render() {
const { isLoading } = this.state;
// console.log(ports)
return (
<>
{isLoading ? (
<Loading />
) : (
<>
<Header />
<Contents>
<ContactCont />
</Contents>
<Footer />
</>
)}
</>
);
}
}
export default Contact;
04.
PHP NOTICE
기본적인 PHP 사이트로, 로그인과 회원가입, 그리고 게시글 작성과 댓글 기능을 구현했습니다. 페이지네이션기능을 만들 때 PHP의 작동 방식을 자연스럽게 이해할 수 있게 되었습니다. 또한 자바스크립트를 배우며 익힌 퀴즈 풀기, 이미지 슬라이드를 추가하여 평범해보일 수 있는 사이트에 다채로운 멋을 추가하였습니다.
#웹표준 #웹접근성 #웹지침서
<?php
include "../connect/connect.php";
include "../connect/session.php";
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PHP 사이트</title>
<?php
include "../include/style.php";
?>
<!-- //style -->
<style>
#footer {
background: #f5f5f5;
}
</style>
</head>
<body>
<?php
include "../include/header.php";
?>
<!--//header -->
<main id="contents">
<!-- 이미지 슬라이드 -->
<section id="sliderType03">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<!-- slider*5>img[src="img/img$$.jpg" alt="이미지$"] -->
<div class="slider s1"><img src="../assets/img/slider_bg01.jpg" alt="이미지1"><div class="s_text"><h2>JAVASCRIPT</h2><span>배워보자01</span></div></div>
<div class="slider s2"><img src="../assets/img/slider_bg02.jpg" alt="이미지2"><div class="s_text"><h2>HTML</h2><span>배워보자02</span></div></div>
<div class="slider s3"><img src="../assets/img/slider_bg03.jpg" alt="이미지3"><div class="s_text"><h2>JQUERY</h2><span>배워보자03</span></div></div>
<div class="slider s4"><img src="../assets/img/slider_bg04.jpg" alt="이미지4"><div class="s_text"><h2>PHP</h2><span>배워보자04</span></div></div>
<div class="slider s5"><img src="../assets/img/slider_bg05.jpg" alt="이미지5"><div class="s_text"><h2>REACT</h2><span>배워보자05</span></div></div>
</div>
</div>
<div class="btn">
<a href="#" class="white">자세히 보기</a>
<a href="#" class="black">사이트 보기</a>
</div>
<div class="slider__btn">
<a href="#" class="prev">prev</a>
<a href="#" class="next">next</a>
</div>
<div class="slider__dot">
<!-- <a href="#" class="dot active"></a>
<a href="#" class="dot"></a>
<a href="#" class="dot"></a>
<a href="#" class="dot"></a>
<a href="#" class="dot"></a> -->
</div>
</div>
</section>
<!-- //이미지 슬라이드 -->
<h2 class="ir_so">컨텐츠 영역</h2>
<section id="blog-type" class="section center type">
<div class="container">
<h3 class="section__title">새로운 수업</h3>
<p class="section__desc">수업과 간련된 블로그입니다. 다양한 정보를 확인하세요!</p>
<div class="blog__inner">
<div class="blog__cont">
<?php
$sql ="SELECT * FROM myBlog LIMIT 9 ";
$result = $connect -> query($sql);
?>
<?php foreach($result as $blog){ ?>
<article class="blog">
<figure class="blog__header">
<a href="../blog/blogView.php?blogID=<?=$blog['blogID']?>" style="background-image:url(../assets/img/blog/<?=$blog['blogImgFile']?>)"></a>
</figure>
<div class="blog__body">
<span class="blog__cate"><?=$blog['blogCategory']?></span>
<div class="blog__title"><?=$blog['blogTitle']?></div>
<div class="blog__desc"><?=$blog['blogContents']?></div>
<div class="blog__info">
<span class="author"><a href="#"><?=$blog['blogAuthor']?><a href="#"></a></span>
<span class="date"><?=date('Y-m-d', $blog['blogRegTime'])?></span>
</div>
</div>
</article>
<?php } ?>
</div>
<div class="blog__btn">
<a href="../blog/blog.php">더 보기</a>
</div>
</div>
</div>
</section>
<!-- //blog-type -->
<section id="quiz-type" class="section center gray">
<div class="container">
<h3 class="section__title">새로운<span></span> 퀴즈</h3>
<p class="section__desc">
웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 강의 퀴즈입니다.
</p>
<div class="quiz__inner">
<div class="quiz__header">
<div class="quiz__subject">
<label for="quizSubject">과목 선택</label>
<select name="quizSubject" id="quizSubject">
<option value="javascript">javascript</option>
<option value="jquery">jquery</option>
<option value="html">html</option>
<option value="css">css</option>
</select>
</div>
</div>
<div class="quiz__body">
<div class="title">
<span class="quiz__num"></span> .
<span class="quiz__ask"></span>
<div class="quiz__desc">
</div>
</div>
<div class="contents">
<div class="quiz__selects">
<label for="select1">
<input class="select" type="radio" id="select1" name="select" value="1">
<span class="choice"></span>
</label>
<label for="select2">
<input class="select" type="radio" id="select2" name="select" value="2">
<span class="choice"></span>
</label>
<label for="select3">
<input class="select" type="radio" id="select3" name="select" value="3">
<span class="choice"></span>
</label>
<label for="select4">
<input class="select" type="radio" id="select4" name="select" value="4">
<span class="choice"></span>
</label>
</div>
</div>
</div>
<div class="quiz__footer">
<div class="quiz__btn">
<button class="comment Rainy none">해설 보기</button>
<button class="next Frozen ml10 right none">다음 문제</button>
<button class="confirm Lady ml10 right">정답 확인</button>
</div>
</div>
</div>
</div>
</section>
<!-- //quiz -->
<section id ="notice-type" class="section center">
<div class="container">
<h3 class="section__title">새로운 소식</h3>
<p class="section__desc">수업과 간련된 소식입니다. 다양한 정보를 확인하세요!</p>
<div class="notice__inner">
<article class="notice">
<h4>게시판</h4>
<ul>
<?php
$sql = "SELECT boardTitle, regTime, boardID FROM myBoard ORDER BY boardID DESC LIMIT 4";
$result = $connect -> query($sql);
foreach($result as $board){
?>
<li>
<a href="../board/boardView.php?boardID=<?=$board['boardID']?>"><?=$board['boardTitle']?></a><span class="time"><?=date('Y-m-d', $board['regTime'])?></span>
</li>
<?php ; } ?>
</ul>
<a href="../board/board.php" class="more">더보기</a>
</article>
<article class="notice">
<h4>댓글</h4>
<?php
$sql = "SELECT youText, regTime FROM myComment ORDER BY commentID DESC LIMIT 4";
$result = $connect -> query($sql);
foreach($result as $comment){
?>
<li>
<a href="../comment/comment.php"><?=$comment['youText']?></a><span class="time"><?=date('Y-m-d', $comment['regTime'])?></span>
</li>
<?php } ?>
</ul>
<a href="../comment/comment.php" class="more">더보기</a>
</article>
</div>
</div>
</section>
<!-- //notice-type -->
</main>
<?php
include "../include/footer.php";
?>
<!--//footer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
const sliderWrap = document.querySelector(".slider__wrap")
const sliderImg = document.querySelector(".slider__img") //이미지 보이는 영역
const sliderInner = document.querySelector(".slider__inner") //이미지 움직이는 영역
const slider = document.querySelectorAll(".slider") //5개의 이미지 저장
const sliderBtn = document.querySelector(".slider__btn");
const sliderBtnPrev = sliderBtn.querySelector(".prev");
const sliderBtnNext = sliderBtn.querySelector(".next");
const sliderDot = document.querySelector(".slider__dot");
let currentIndex = 0;
let sliderWidth = sliderImg.offsetWidth; //이미지 가로 값
let sliderLength = slider.length; //이미지 갯수
let sliderFirst = slider[0]; //첫번째 이미지
let sliderLast = slider[sliderLength - 1]; //마지막 이미지
let cloneFirst = sliderFirst.cloneNode(true); // 첫 번째 이미지 복사
let cloneLast = sliderLast.cloneNode(true) // 마지막 이미지 복사
let position = "";
let dotIndex = "";
let sliderTimer = "";
let interval = 2000;
let dotActive;
console.log(sliderFirst)
console.log(sliderWidth)
//이미지 복사 appendTo/prependTo : append/prepend
sliderInner.appendChild(cloneFirst);
sliderInner.insertBefore(cloneLast, sliderFirst);
function gotoSlider(index){ //index라는 매개변수
sliderInner.classList.add("transition");
//1 2 3 4 5
sliderInner.style.left = -sliderWidth * (index+1) + "px";
//위에서 (index+1)로 인해 슬라이드가 바뀔때마다 index값이 1, 2, 3, 4, 5, 1, 2, 3, 4, 5......
currentIndex = index
console.log(currentIndex);
//두번째 이미지 : left =-1600px
//세번째 이미지 : left =-2400px
//네번째 이미지 : left =-3200px
//다섯번째 이미지 : left =-4000px
dotActive = document.querySelectorAll(".slider__dot .dot");
dotActive.forEach(el => {
el.classList.remove("active");
if(currentIndex < 5){
dotActive[currentIndex].classList.add("active")
} else {
sliderDot.firstElementChild.classList.add("active");
}
})
document.querySelectorAll(".slider__dot .dot").forEach((dot, index) => {
dot.addEventListener("click", () => {
gotoSlider(index)
});
});
};
function dotInit(){
for(let i=0; i<sliderLength; i++){
dotIndex += "<a href='#1' class='dot'></a>";
}
dotIndex += "<a href='#1' class='play'>play</a>";
dotIndex += "<a href='#1' class='stop show'>stop</a>";
sliderDot.innerHTML = dotIndex;
//첫 번째 닷버튼한테 "active"활성화
sliderDot.firstElementChild.classList.add("active");
}
dotInit();
function autoPlay(){
sliderTimer = setInterval(() => {
gotoSlider(currentIndex + 1);
}, interval)
}
autoPlay()
function stopPlay(){
clearInterval(sliderTimer);
}
sliderBtnPrev.addEventListener("click", ()=> {
let prevIndex = currentIndex - 1;
gotoSlider(prevIndex)
});
sliderBtnNext.addEventListener("click", ()=> {
let nextIndex = currentIndex + 1;
gotoSlider(nextIndex)
});
sliderInner.addEventListener("transitionend", ()=> {
sliderInner.classList.remove("transition");
if(currentIndex == -1){
sliderInner.style.left = -(sliderLength * sliderWidth) + "px";
currentIndex = sliderLength -1;
}
if(currentIndex == sliderLength){
sliderInner.style.left = -(1 * sliderWidth) + "px";
currentIndex = 0;
}
});
sliderInner.addEventListener("mouseover", () => {
// document.querySelector(".play").classList.add("show");
// document.querySelector(".stop").classList.remove("show");
stopPlay();
});
sliderInner.addEventListener("mouseleave", () => {
if(document.querySelector(".play").classList.contains("show")){
stopPlay();
} else {
autoPlay();
}
});
document.querySelector(".play").addEventListener("click", ()=> {
document.querySelector(".play").classList.remove("show");
document.querySelector(".stop").classList.add("show");
autoPlay();
});
document.querySelector(".stop").addEventListener("click", ()=> {
document.querySelector(".stop").classList.remove("show");
document.querySelector(".play").classList.add("show");
stopPlay();
});
//새로운 퀴즈
let quizAnswer = "";
function quizView(view){
$(".quiz__num").text(view.quizID);
$(".section__title span").text(view.quizSubject);
$(".quiz__ask").text(view.quizAsk);
$("#select1 + span").text(view.quizChoice1);
$("#select2 + span").text(view.quizChoice2);
$("#select3 + span").text(view.quizChoice3);
$("#select4 + span").text(view.quizChoice4);
quizAnswer = view.quizAnswer;
}
//정답 체크
function quizCheck(){
let selectCheck = $(".quiz__selects input:checked").val();
//정답을 체크 안했으면
if(selectCheck == null || selectCheck == ''){
alert('정답을 체크해주세요!!')
} else {
$(".quiz__btn .next").fadeIn();
//정답을 체크 했으면
if(selectCheck == quizAnswer){
//정답
$(".quiz__selects #select" + quizAnswer).addClass("correct");
}else {
//오답
$(".quiz__selects #select" + selectCheck).addClass("incorrect");
$(".quiz__selects #select" + quizAnswer).addClass("correct");
}
}
}
//문제 데이터 가져오기
function quizData(){
let quizSubject = $("#quizSubject").val();
$.ajax({
url: "../quiz/quizinfo.php",
method: "POST",
data: {"quizSubject": quizSubject},
dataType: "json",
success: function(data){
console.log(data.quiz);
quizView(data.quiz);
},
error: function(reqeust, status, error){
console.log('reqeust' + reqeust);
console.log('status' + status);
console.log('error' + error);
}
})
}
quizData();
//과목 선택
$("#quizSubject").change(function(){
quizData();
})
//정답 확인
$(".quiz__btn .confirm").click(function(){
//정답을 클릭했는지 안했는지 판단
quizCheck();
});
//다음 문제 버튼
$(".quiz__btn .next").click(function(){
quizData();
$(".quiz__selects input").prop("checked", false);
$(".quiz__selects input").removeClass("correct");
$(".quiz__selects input").removeClass("incorrect");
$(".quiz__btn .next").fadeOut();
})
</script>
</body>
</html>
<?php
include "../connect/connect.php";
include "../connect/session.php";
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>게시판</title>
<?php
include "../include/style.php";
?>
<!-- //style -->
<style>
.footer {
background: #f5f5f5;
}
</style>
</head>
<body>
<?php
include "../include/skip.php";
?>
<!--//skip -->
<?php
include "../include/header.php";
?>
<!--//header -->
<main id="contents">
<h2 class="ir_so">컨텐츠 영역</h2>
<section id="board-type" class="section center mb100">
<div class="container">
<h3 class="section__title">수업 게시판</h3>
<p class="section__desc">수업과 간련된 게시판입니다. 궁굼한 점은 여기를 확인하세요!</p>
<div class="board__inner">
<div class="board__search">
<form action="boardSearch.php" name="boardSearch" method="GET">
<fieldset>
<legend class="ir_so">게시판 검색 영역</legend>
<div>
<input type="search" name="searchKeyword" class="search-form" placeholder="검색어를 입력하세요!" aria-label="search" required>
</div>
<div>
<select name="searchOption" class="searchOption">
<option value="title">제목</option>
<option value="content">내용</option>
<option value="name">등록자</option>
</select>
</div>
<div>
<button type="submit" class="search-btn">검색</button>
</div>
<div>
<a href="boardWrite.php" class="search-btn black">글쓰기</a>
</div>
</fieldset>
</form>
</div>
<div class="board__table">
<table class="hover">
<colgroup>
<col style="width:5%;">
<col>
<col style="width:10%;">
<col style="width:12%;">
<col style="width:7%;">
</colgroup>
<thead>
<th>번호</th>
<th>제목</th>
<th>등록자</th>
<th>등록일</th>
<th>조회수</th>
</thead>
<tbody>
<?php
//b.boardID, b.boardTitle, m.youName, b.regTime, b.boardView
if(isset($_GET['page'])){
$page = (int) $_GET['page'];
} else {
$page = 1;
}
//게시판 불러올 갯수
$PageView = 10;
$PageLimit = ($PageView * $page) - $PageView;
$sql = "SELECT b.boardID, b.boardTitle, m.youName, b.regTime, b.boardView FROM myBoard b JOIN myMember m ON(m.memberID = b.memberID) ORDER BY boardID DESC LIMIT {$PageLimit}, {$PageView}";
$result = $connect -> query($sql);
if($result){
$count = $result -> num_rows;
if($count > 0){
for($i=1; $i<=$count; $i++){
$boardInfo = $result -> fetch_array(MYSQLI_ASSOC);
echo "<tr>";
echo "<td>".$boardInfo['boardID']."</td>";
echo "<td class='left'><a href='boardView.php?boardID={$boardInfo['boardID']}'>".$boardInfo['boardTitle']."</a></td>";
echo "<td>".$boardInfo['youName']."</td>";
echo "<td>".date('Y-m-d', $boardInfo['regTime'])."</td>";
echo "<td>".$boardInfo['boardView']."</td>";
echo "</tr>";
}
}
}
?>
</tbody>
</table>
</div>
<div class="board__pages">
<ul>
<?php
include "boardPage.php";
?>
</ul>
</div>
</div>
</div>
</section>
</main>
<?php
include "../include/footer.php";
?>
<!--//footer -->
</body>
</html>
<?php
include "../connect/connect.php";
include "../connect/session.php";
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>블로그 글 쓰기</title>
<?php
include "../include/style.php";
?>
<!-- //style -->
<style>
#footer {
background: #f5f5f5;
}
</style>
</head>
<body>
<?php
include "../include/skip.php";
?>
<!--//skip -->
<?php
include "../include/header.php";
?>
<!--//header -->
<main id="contents">
<h2 class="ir_so">컨텐츠 영역</h2>
<section id="board-type" class="section center mb100">
<div class="container">
<h3 class="section__title">강의 블로그</h3>
<p class="section__desc">수업과 간련된 블로그입니다. 다양한 정보를 확인하세요!</p>
<div class="blog__inner">
<div class="blog__search">
<form action="blogSearch.php" method="get">
<fieldset>
<legend class="ir_so">검색 영역</legend>
<input type="search" name="blogSearch" id="blogSearch" class="search" placeholder="검색어를 입력해주세요!">
<label for="blogSearch" class="ir_so">검색</label>
<button class="button">검색</button>
</fieldset>
</form>
<div class="blog__btn">
<a href="blogWrite.php">글쓰기</a>
</div>
</div>
<div class="blog__cont">
<?php
$sql ="SELECT * FROM myBlog order by blogID desc";
$result = $connect -> query($sql);
if(isset($_GET['page'])){
$page = (int) $_GET['page'];
} else {
$page = 1;
}
//게시판 불러올 갯수
$PageView = 10;
$PageLimit = ($PageView * $page) - $PageView;
?>
<?php foreach($result as $blog){ ?>
<article class="blog">
<figuer class="blog__header">
<a href="blogView.php?blogID=<?=$blog['blogID']?>" style="background-image:url(../assets/img/blog/<?=$blog['blogImgFile']?>)"></a>
</figuer>
<div class="blog__body">
<span class="blog__cate"><?=$blog['blogCategory']?></span>
<div class="blog__title"><a href="blogView.php?blogID=<?=$blog['blogID']?>"><?=$blog['blogTitle']?></a></div>
<div class="blog__desc"><?=$blog['blogContents']?></div>
<div class="blog__info">
<span class="author"><a href="#"><?=$blog['blogAuthor']?></a></span>
<span class="date"><?=date('Y-m-d', $blog['blogRegTime'])?></span>
<span class="modify"><a href="blogModify.php?blogID=<?=$blog['blogID']?>">수정</a></span>
<span class="delete"><a href="blogRemove.php?blogID=<?=$blog['blogID']?>" onclick="return noticeRemove();">삭제</a></span>
</div>
</div>
</article>
<?php } ?>
</div>
<div class="blog__pages">
<!-- <ul>
<li><a href ="#"><<</a></li>
<li><a href ="#"><</a></li>
<li class="active"><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 ="#">></a></li>
<li><a href ="#">>></a></li>
</ul> -->
<?php
include "blogPage.php";
?>
</div>
</div>
</div>
</section>
</main>
<?php
include "../include/footer.php";
?>
<!--//footer -->
<script>
function noticeRemove() {
let notice = confirm("정말 삭제하시겠습니까?","");
return notice;
}
</script>
</body>
</html>
Site View
05.
VUE PORT
react로 만든 blog그를 vue.js로 다시 한번 만들어 보았습니다. vue.js에서 제공하는 반복문, 리스트 렌더링 v-for구문을 활용하여 소스를 보다 더 간결하게 줄일 수 있었습니다..
#vue.js #javascript 프레임워크 #api
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="author" content="seongwoo">
<meta name="description" content="웹 표준을 준수한 사이트 예제입니다.">
<meta name="keywords" content="박성우, 웹표준, 웹접근성, 사이트 만들기">
<meta neme="generator" content="brakets">
<title>WEBSTANDARD SITE</title>
<!-- CSS Style -->
<link rel="stylesheet" href="css/reset.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
href="https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&family=Nanum+Gothic:wght@400;700;800&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="https://jowuseop1110.github.io/webs_class/">Desinger</a>
<a href="https://jows1110.tistory.com//">tistory</a>
<a href="https://github.com/jowuseop1110/webs_class">github</a>
</div>
<!-- //헤더 메뉴 -->
<div class="header-tit">
<h1>Professional Publisher & Designer</h1><br>
<a href="hhttps://jowuseop1110.github.io/webs_class/">jowuseop1110.github.io/webs_class/</a>
</div>
<!-- //헤더 타이틀 -->
<!-- 이미지를 표현하는 방법
1. img 태그로 표현 (의미가 있을 때) / alt태그 - 대체 문자 표현
2. background 속성으로 표현(의미가 없을 때) -대체 문자 X
3. 이미지를 background 속성 - 웹 ㅍ준을 준수하기 위해서는
/ 가상으로 대체를 문자로 만들어줌(IR 효과)
이미지 스프라이트 효과
-->
<div class="header-icon">
<a href="#" class="icon1"><span class="ir_pm">icon1</span></a>
<a href="#" class="icon2"><span class="ir_pm">icon2</span></a>
<a href="#" class="icon3"><span class="ir_pm">icon3</span></a>
<a href="#" class="icon4"><span class="ir_pm">icon4</span></a>
</div>
<!-- //헤더 아이콘 -->
</div>
</div>
</div>
<!-- //header -->
<div id="contents">
<div id="cont_nav">
<div class="container">
<h2>전체 메뉴</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 <div></a></li>
<li><a href="#">HTML <colgroup></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="#">상대주소와 절대주소</a></li>
<li><a href="#">CSS float</a></li>
<li><a href="#">이미지 표현 방법</a></li>
<li><a href="#">이미지 스프라이트</a></li>
<li><a href="#">IR 효과</a></li>
<li><a href="#">이미지 최적화</a></li>
<li><a href="#">background-color</a></li>
<li><a href="#">border-style</a></li>
<li><a href="#">font-size</a></li>
<li><a href="#">text-align</a></li>
</ol>
</div>
<div class="last">
<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="#">다음 다룸</a></li>
<li><a href="#">Webstandard</a></li>
</ol>
</div>
</div>
</div>
</div>
<!-- //cont_nav -->
<div id="cont_tit">
<div class="container">
<div class="tit">
<h2>"나는 퍼블리셔다"</h2>
<a href="#" class="btn"><span class="ir_pm">전체메뉴</span></a>
</div>
</div>
</div>
<!-- //cont_tit -->
<div id="cont_ban">
<div class="container">
<div class="ban">
<a href="#" class="prev"><span class="ir_pm">이전 이미지</span></a>
<ul>
<li class="ban_img1"><a href="#"><img src="img/banner_link1.jpg" alt="웹 표준 지침서 보기"></a></li>
<li class="ban_img2"><a href="#"><img src="img/banner_link2.jpg" alt="CSS 버튼 만들기"></a></li>
<li class="ban_img3"><a href="#"><img src="img/banner_link3.jpg" alt="로그인 폼 만들기"></a></li>
</ul>
<a href="#" class="next"><span class="ir_pm">다음 이미지</span></a>
</div>
</div>
</div>
<!-- //cont_ban -->
<div id="cont_cont">
<div class="container">
<div class="cont">
<div class="column col1">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_desc">가장 웹페이지에서 기본이 되는 게시판 유형입니다.</p>
<!-- 게시판 -->
<div class="notice">
<h4>Web publiser Notice</h4>
<ul>
<li><a href="#">display:inline과 display:block의 차이점은 무엇인가요?</a></li>
<li><a href="#">HTML 태그 중에 dl,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">
<h4>Web Designer Notice</h4>
<ul>
<li><a href="#">JPG, PNG, GIF의 차이점이 무엇인가요?</a><span>2018.11.16</span></li>
<li><a href="#">UI 디자인과 UX 디자인의 차이점을 설명하세요.</a><span>2018.11.16</span></li>
<li><a href="#">인터랙션 디자인의 핵심은 무엇이라고 생각하나요?</a><span>2018.11.16</span></li>
<li><a href="#">포트폴리오를 하면서 가장 잘 했다고 생각하는 부분은 무엇인가요?</a><span>2018.11.16</span></li>
<li><a href="#">웹 디자인과 모바일 디자인의 차이가 무엇이라고 생각하나요?</a><span>2018.11.16</span></li>
</ul>
<a href="#" class="more ir_pm" title="더보기">더보기</a>
</div>
<!-- 게시판2 -->
</div><!-- //col1 -->
<div class="column col2">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_desc">가장 웹페이지에서 기본이 되는 게시판 유형입니다.</p>
<!-- 게시판3 -->
<div class="notice3">
<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/notice04.jpg" alt="이미지4">
<strong>[HTML] em</strong>
<span>em 태그는 텍스트를 강조할 때 사용합니다.</span>
</a>
</li>
</ul>
<a href="#" class="more ir_pm" title="더보기">더보기</a>
</div>
<!-- //게시판3 -->
</div><!-- //col2 -->
<div class="column col3">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_desc">가장 웹페이지에서 기본이 되는 게시판 유형입니다.</p>
</div><!-- //col3 -->
<div class="column col4">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_desc">가장 웹페이지에서 기본이 되는 게시판 유형입니다.</p>
<!-- 오버효과 -->
<div class="notice_hover">
<h4>Mouse Hover</h4>
<ul>
<li>
<a href="#">
<span><img src="img/sban01.jpg" alt="이미지1"><em>바로가기</em></span>
<strong>와이어 프레임</strong>
</a>
</li>
<li>
<a href="#">
<span><img src="img/sban02.jpg" alt="이미지2"><em>바로가기</em></span>
<strong>스케치 작업</strong>
</a>
</li>
<li class="last">
<a href="#">
<span><img src="img/sban03.jpg" alt="이미지3"><em>바로가기</em></span>
<strong>UI 디자인</strong>
</a>
</li>
</ul>
</div>
<!-- //오버효과 -->
<!-- 오버효과2 -->
<div class="notice_hover2 mt15">
<h4 class="ir_su">Mouse Hover</h4>
<ul>
<li>
<a href="#">
<span><img src="img/sban04.jpg" alt="이미지4"><em>바로가기</em></span>
<strong>HTML</strong>
</a>
</li>
<li>
<a href="#">
<span><img src="img/sban05.jpg" alt="이미지5"><em>바로가기</em></span>
<strong>CSS</strong>
</a>
</li>
<li class="last">
<a href="#">
<span><img src="img/sban06.jpg" alt="이미지6"><em>바로가기</em></span>
<strong>jQuery</strong>
</a>
</li>
</ul>
</div>
<!-- //오버효과2-->
</div><!-- //col4 -->
<div class="column col5">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_desc">가장 웹페이지에서 기본이 되는 게시판 유형입니다.</p>
<!-- 탭 메뉴 -->
<div class="tab_menu">
<h4 class="ir_su">탭 메뉴</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 style="display: none;">
<li><a href="#">두 번째 공지사항 탭 메뉴 테스트 목록입니다.</a></li>
<li><a href="#">두 번째 공지사항 탭 메뉴 테스트 목록입니다.</a></li>
<li><a href="#">두 번째 공지사항 탭 메뉴 테스트 목록입니다.</a></li>
</ul>
</li>
<li><a href="#"> 공지사항3</a>
<ul style="display: none;">
<li><a href="#">세 번째 공지사항 탭 메뉴 테스트 목록입니다.</a></li>
<li><a href="#">세 번째 공지사항 탭 메뉴 테스트 목록입니다.</a></li>
<li><a href="#">세 번째 공지사항 탭 메뉴 테스트 목록입니다.</a></li>
</ul>
</li>
</ul>
</div>
<!-- //탭메뉴 -->
<!-- 게시판4 -->
<div class="notice4 mt15">
<h4>최신 <em>공지사항</em></h4>
<ul>
<li><a href="#">웹 디자이너와 웹 퍼블리셔의 차이점은 무엇인가요?</a><span>2022.02.23</span></li>
<li><a href="#">웹 디자이너와 웹 퍼블리셔의 차이점은 무엇인가요?</a><span>2022.02.23</span></li>
<li><a href="#">웹 디자이너와 웹 퍼블리셔의 차이점은 무엇인가요?</a><span>2022.02.23</span></li>
</ul>
<a href="#" class="more" title="더보기">더보기</a>
</div>
<!--// 게시판4 -->
</div><!-- //col5 -->
<div class="column col6">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_desc">가장 웹페이지에서 기본이 되는 게시판 유형입니다.</p>
<!-- 갤러리 -->
<div class="gallery">
<h4>포트폴리오</h4>
<div class="gellery_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="gellery_img">
<ul>
<li><a href="#"><img src="img/gallery01.jpg" alt="갤러리1"></a></li>
<li><a href="#"><img src="img/gallery02.jpg" alt="갤러리2"></a></li>
<li><a href="#"><img src="img/gallery03.jpg" alt="갤러리3"></a></li>
<li><a href="#"><img src="img/gallery04.jpg" alt="갤러리4"></a></li>
<li><a href="#"><img src="img/gallery05.jpg" alt="갤러리5"></a></li>
</ul>
</div>
</div>
<!-- //갤러리 -->
</div><!-- //col6 -->
</div>
</div>
</div>
<!-- //cont_cont -->
</div>
<!-- //contents -->
<div id="footer">
<div class="container">footer</div>
</div>
<!-- //footer -->
</div>
<!-- //wrap -->
@charset "utf-8";
/* margin top */
.mt10 {
margin-top: 10px !important;
}
.mt15 {
margin-top: 15px !important;
}
.mt20 {
margin-top: 20px !important;
}
.mt25 {
margin-top: 25px !important;
}
.mt30 {
margin-top: 30px !important;
}
.mt35 {
margin-top: 35px !important;
}
.mt40 {
margin-top: 40px !important;
}
.mt45 {
margin-top: 45px !important;
}
.mt50 {
margin-top: 50px !important;
}
/* 스킵 네비게이션 */
#skip {
position: relative;
}
#skip a {
position: absolute;
left: 0px;
top: -35px;
border: 1px solid #fff;
color: #fff;
background: #333;
line-height: 30px;
width: 160px;
text-align: center;
}
#skip a:active,
#skip a:focus {
top: 0;
}
/* 레이아웃 */
#header {
height: 325px;
background: url(../img/header_bg.jpg) center top repeat-x
}
#footer {
height: 200px;
background: #333;
}
/* 컨텐츠 레이아웃 */
#cont_nav {
background-color: #f6fdff;
}
#cont_tit {
background-color: #eaf7fd;
}
#cont_ban {
background-color: #dceff7;
}
#cont_cont {
background-color: #f6fdff;
}
/* 컨테이너 */
.container {
width: 990px;
margin: 0 auto;
height: inherit;
/* background: rgba(255,255,255,0.3);*/
}
/* 헤더 */
.header .header-menu {
text-align: right;
}
.header .header-menu a {
color: #fff;
padding: 10px 0px 10px 13px;
display: inline-block;
}
.header .header-menu a:hover {
color: #666;
}
.header .header-tit {
text-align: center;
}
.header .header-tit h1 {
background-color: #4aa8d4;
font-size: 28px;
padding: 5px 20px 6px 20px;
display: inline-block;
color: #fff;
margin-top: 40px;
font-weight: normal;
text-transform: uppercase;
}
.header .header-tit a {
display: inline-block;
background-color: #2698cb;
font-size: 18px;
color: #fff;
padding: 5px 20px 6px 20px;
margin-top: -5px;
}
.header-icon {
text-align: center;
margin-top: 30px;
}
.header-icon a {
width: 60px;
height: 60px;
display: inline-block;
background: url(../img/icon.png);
margin: 0 3px;
}
.header-icon a.icon1 {
background-position: 0 0;
}
.header-icon a.icon2 {
background-position: 0 -60px;
}
.header-icon a.icon3 {
background-position: 0 -120px;
}
.header-icon a.icon4 {
background-position: 0 -180px;
}
.header-icon a.icon1:hover {
background-position: -60px 0;
}
.header-icon a.icon2:hover {
background-position: -60px -60px;
}
.header-icon a.icon3:hover {
background-position: -60px -120px;
}
.header-icon a.icon4:hover {
background-position: -60px -180px;
}
/* float:left 으로 인한 영역깨짐 방지법
1. 모든박스에 float:left 사용 ->모든박스에 사용해야한다.
2. float의 성질을 차단하는 clear:both;를 사용한다. ->깨진 영역을 찾기어려움
3. float을 사용한 상위박스에 overflow:hidden을 사용한다. -> 많이 사용하나 2단영역은 사용불가
4. clearfix를 사용합니다.
*/
/* 전체 메뉴 */
.nav {
overflow: hidden;
padding: 30px 0;
}
.nav>div {
float: left;
width: 40%;
}
.nav>div:last-child {
width: 20%;
}
/* Ie9부터 사용가능 >ㅅ< */
.nav>div.last {
width: 20%;
}
.nav>div h3 {
font-size: 18px;
color: #25a2d0;
margin-bottom: 4px;
}
.nav>div ol {
overflow: hidden;
}
.nav>div ol li {
float: left;
width: 50%;
}
.nav>div.last ol li {
width: 100%;
}
.nav>div ol li a:hover {
text-decoration: underline;
}
/* 타이틀 */
.tit {
position: relative;
}
.tit h2 {
font-size: 40px;
text-align: center;
padding: 5px 0;
letter-spacing: 2px;
color: #2c94c4;
font-family: 'Nanum Brush Script', cursive;
}
.tit .btn {
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 60px;
background: url(../img/icon.png) no-repeat 0 -600px;
}
/* 배너 */
.ban {
position: relative;
padding: 24px 0 20px;
}
.ban a.prev {
position: absolute;
left: -80px;
top: 60px;
width: 43px;
height: 43px;
background: url(../img/icon.png) no-repeat -150px 0;
}
.ban a.next {
position: absolute;
right: -80px;
top: 60px;
width: 43px;
height: 43px;
background: url(../img/icon.png) no-repeat -150px -43px;
}
.ban a.prev:hover {
background-position: -193px 0;
}
.ban a.next:hover {
background-position: -193px -43px;
}
.ban ul {
overflow: hidden;
}
.ban ul li {
float: left;
width: 330px;
}
.ban ul li:last-child {
text-align: right;
}
/* ie9부터 적용 */
.ban ul li:nth-child(2) {
text-align: center;
}
/* ie9부터 적용 */
.ban ul li.ban_img1 {
text-align: left;
}
.ban ul li.ban_img2 {
text-align: center;
}
.ban ul li.ban_img3 {
text-align: right;
}
.ban ul li img {
border: 4px solid #dcdcdc;
}
.ban ul li img:hover {
border-color: #98dcdc;
}
/* 컨텐츠 */
.cont {
overflow: hidden;
padding-top: 30px;
}
.cont .column {
position: relative;
float: left;
width: 289px;
height: 363px;
margin: 0 30px 30px 0;
padding-right: 30px;
}
.cont .col1 {
border-right: 1px solid #c8c8c8;
}
.cont .col2 {
border-right: 1px solid #c8c8c8;
}
.cont .col3 {
margin-right: 0;
padding-right: 0;
}
.cont .col4 {
border-right: 1px solid #c8c8c8;
}
.cont .col5 {
border-right: 1px solid #c8c8c8;
}
.cont .col6 {
margin-right: 0;
padding-right: 0;
}
.cont .column .ico_img {
display: block;
width: 60px;
height: 60px;
background: url(../img/icon.png) no-repeat;
position: absolute;
left: 0;
top: 0;
}
.cont .column .ico_tit {
padding-left: 70px;
font-size: 16px;
color: #2c94c4;
}
.cont .column .ico_desc {
padding-left: 70px;
border-bottom: 1px solid #d0d0d0;
padding-bottom: 15px;
margin-bottom: 15px;
}
.cont .col1 .ico_img {
background-position: 0px -240px;
}
.cont .col2 .ico_img {
background-position: 0px -300px;
}
.cont .col3 .ico_img {
background-position: 0px -360px;
}
.cont .col4 .ico_img {
background-position: 0px -420px;
}
.cont .col5 .ico_img {
background-position: 0px -480px;
}
.cont .col6 .ico_img {
background-position: 0px -540px;
}
.cont .col1 .ico_img:hover {
background-position: -60px -240px;
}
.cont .col2 .ico_img:hover {
background-position: -60px -300px;
}
.cont .col3 .ico_img:hover {
background-position: -60px -360px;
}
.cont .col4 .ico_img:hover {
background-position: -60px -420px;
}
.cont .col5 .ico_img:hover {
background-position: -60px -480px;
}
.cont .col6 .ico_img:hover {
background-position: -60px -540px;
}
/* 게시판 */
.notice {
position: relative;
}
.notice h4 {
font-size: 14px;
color: #0093bd;
padding-bottom: 3px;
font-weight: bold;
}
.notice ul li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background: url(../img/dot.gif) no-repeat 0 8px;
padding-left: 8px;
}
.notice ul li a {
font-size: 12px;
}
.notice a.more {
position: absolute;
right: 0;
top: 0;
display: block;
background: url(../img/icon.png) -150px -90px;
width: 17px;
height: 17px;
}
/* 게시판2 */
.notice2 {
position: relative;
margin-top: 15px;
}
.notice2 h4 {
font-size: 14px;
color: #0093bd;
padding-bottom: 3px;
font-weight: bold;
}
.notice2 li {
overflow: hidden;
background: url(../img/dot.gif) no-repeat 0 8px;
padding-left: 8px;
}
.notice2 li a {
float: left;
width: 65%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notice2 li span {
float: right;
width: 30%;
text-align: right;
}
.notice2 a.more {
position: absolute;
right: 0;
top: 0;
display: block;
background: url(../img/icon.png) -150px -90px;
width: 17px;
height: 17px;
}
/* 게시판3 */
.notice3 {
position: relative
}
.notice3 h4 {
font-size: 14px;
color: #0093bd;
padding-bottom: 3px;
font-weight: bold;
}
.notice3 li {
position: relative;
padding: 8px 0 14px 60px;
}
.notice3 li a img {
width: 50px;
position: absolute;
left: 0;
top: 0;
border: 1px solid #0093db;
}
.notice3 li a strong {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notice3 li a span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
}
.notice3 a.more {
position: absolute;
right: 0;
top: 0;
display: block;
background: url(../img/icon.png) -150px -90px;
width: 17px;
height: 17px;
}
/* 마우스 오버효과 */
.notice_hover h4 {
font-size: 14px;
color: #0093bd;
padding-bottom: 3px;
font-weight: bold;
}
.notice_hover ul {
overflow: hidden;
}
.notice_hover li {
float: left;
width: 93px;
margin-right: 5px;
text-align: center;
}
.notice_hover li:last-child {
margin-right: 0;
}
/*IE9부터적용*/
.notice_hover li a span {
position: relative;
display: block;
width: 93px;
height: 93px;
line-height: 93px;
}
.notice_hover li a span img {
width: 100%;
}
.notice_hover li a span em {
visibility: hidden;
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.7);
color: #fff;
width: 100%;
height: 100%;
}
.notice_hover li a span:hover em {
visibility: visible;
}
.notice_hover li a strong {
padding-top: 3px;
display: inline-block;
font-size: 12px;
}
/* 마우스 오버효과2 */
.notice_hover2 {}
.notice_hover2 ul {
overflow: hidden;
}
.notice_hover2 li {
float: left;
width: 93px;
text-align: center;
margin-right: 5px;
}
.notice_hover2 li.last {
margin-right: 0;
}
.notice_hover2 li a span {
position: relative;
display: block;
width: 93px;
height: 93px;
}
.notice_hover2 li a span img {
width: 100px;
height: 100%;
}
.notice_hover2 li a span em {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.7);
color: #fff;
visibility: hidden;
}
.notice_hover2 li a strong {
padding-top: 3px;
display: inline-block;
font-size: 12px;
}
.notice_hover2 li a span:hover em {
visibility: visible;
}
/* 컨텐츠 요소를 보이지 않게 하는 방법 */
/* 1. display:none; -- display:block; (영역이 사라짐)
2. visibility: hidden; -- visibility: visible; (text가 사라저도 영역은 안사라짐)
3. opacity:0; -- opacity: 1; (영역이 유지)
4. (ir효과) width: 0; height: 0; overflow: hidden;
*/
/* tab_nenu */
.tab_menu {
position: relative;
border: 1px solid #ccc;
padding: 8px;
height: 105px;
}
.tab_menu ul {
overflow: hidden;
border-bottom: 1px solid #ccc;
}
.tab_menu ul li {
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;
left: 0px;
top: 48px;
width: 270px;
border: 0;
}
.tab_menu ul li ul li {
float: none;
border: 0;
background: url(../img/dot.gif) no-repeat 9px 8px;
padding-left: 18px;
}
.tab_menu ul li ul li a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
padding: 0 0 3px 0;
}
.tab_menu ul li.active {
background: #2c94c4;
}
.tab_menu ul li.active a {
color: #fff;
}
.tab_menu ul li.active ul li a {
color: #333;
}
/* 게시판4 */
.notice4 {
position: relative;
border: 1px solid #ccc;
}
.notice4 h4 {
border-bottom: 1px solid #ccc;
font-size: 14px;
color: #0093bd;
font-weight: 700;
padding: 8px 10px;
}
.notice4 h4 em {
color: #cf3292;
}
.notice4 ul {
padding: 10px;
}
.notice4 li {
overflow: hidden;
background: url(../img/dot.gif) no-repeat 0 10px;
padding-left: 8px;
padding-bottom: 2px;
}
/*overflow : 요소의 박스에 내용이 너 길 때 어떻게 보일지 선택한는 속성
overflow 속성: visible : 내용이 길어도 그대로 보임
hidden: 내용이 넘치면 자름(자른 부분은 보이지 않음)
scroll: 내용이 넘치지 앉아도 항상 스크롤바가 보임
auto: 내용이 잘릴 때만 스크롤바가 보임 */
.notice4 li a {
float: left;
width: 60%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*text-overflow : 박스 안에 내용이 넘칠 떄 텍스트를 어떻게 처리할지 지정하는 속성
주의: text-overflow 속성은 다음 2가지를 모두 충족할 경우에만 적용됩니다.
1. overflow 속성값이 hidden, scroll, auto 일 때 (visible 제외)
2. white-space: norap(텍스트가 길어도 줄바꿈 되지 않음)
text-overflow 속성
clip : 기본값, 텍스트를 자름
ellipsis : 잘린 텍스트를 생략 부호(...)으로 표시함
string : 잘린 텍스트르 지정한 문자열로 표시 (예 : div{text-overflow: "***"; */
/*white-space 속성: 요소안에 공백을 어떻게 처리할지 지정하는 속성
nomal : 기본값, 공백을 여러개 넣어도 공백 1개만 표시, 글이 길어지면 텍스트가 자동 줄바꿈 됨(wrap)
nowrap : 공백을 여러개 넣어도 1개만 표시, 텍스트가 길어도 줄바꿈 되지 않고 같은 줄에 계속 표시
pre : 공백을 코드에 있는 그대로 표시함태그 처럼 행동함. 코드에 줄바꿈이 없다면 줄바꿈이 되지 않음
pre-wrap : 공백을 코드에 그대로 표시함. 줄바꿈이 없어도 자동 줄바꿈이 됨
pre-line : 공백을 여러개 넣어도 1개만 표시 코드에 줄바꿈이 없어도 자동 줄바꿈이 되며, 코드에 줄바꿈이 있을 때도 그대로 표시
*/
.notice4 li span {
float: right;
width: 30%;
text-align: right;
}
.notice4 a.more {
position: absolute;
right: 9px;
top: 9px;
}
/* 갤러리 */
.gallery {
border: 1PX solid #CCC;
height: 254px;
position: relative;
overflow: hidden;
}
.gallery h4 {
font-size: 14px;
color: #0093bd;
border-bottom: 1px solid #ccc;
padding: 10px 0 8px 11px;
font-weight: bold;
}
.gellery_btn {
position: absolute;
right: 5px;
top: 7px;
}
.gellery_btn ul {
overflow: hidden;
}
.gellery_btn ul li {
float: left;
margin: 1px 2px;
}
.gellery_btn ul li a {
display: block;
width: 23px;
height: 23px;
background: url(../img/icon.png) no-repeat;
}
.gellery_btn ul li.gb_icon1 a {
background-position: -150px -120px;
}
.gellery_btn ul li.gb_icon2 a {
background-position: -150px -143px;
}
.gellery_btn ul li.gb_icon3 a {
background-position: -150px -166px;
}
.gellery_btn ul li.gb_icon4 a {
background-position: -150px -189px;
}
/* hover */
.gellery_btn ul li.gb_icon1 a:hover {
background-position: -173px -120px;
}
.gellery_btn ul li.gb_icon2 a:hover {
background-position: -173px -120px;
}
.gellery_btn ul li.gb_icon3 a:hover {
background-position: -173px -120px;
}
.gellery_btn ul li.gb_icon4 a:hover {
background-position: -173px -120px;
}
.gellery_img img {
width: 100%;
}
<script type="text/javascript">
// <![CDATA[ <-- For SVG support
if ('WebSocket' in window) {
(function () {
function refreshCSS() {
var sheets = [].slice.call(document.getElementsByTagName("link"));
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
var parent = elem.parentElement || head;
parent.removeChild(elem);
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
parent.appendChild(elem);
}
}
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
var address = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function (msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
};
if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
console.log('Live reload enabled.');
sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
}
})();
}
else {
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
}
// ]]>
</script>
SCRIPT CODING
01
game effect
게임 사이트
수업시간에 기분전환하기 위해 만든 게임입니다. javascript를 활용하여 카드 게임, 테트리스, 타자게임, 뮤직 플레이어 등을 구현해보았습니다.
02
PARALLAX EFFECT
페럴럭스 사이트
scroll값에 따라 여러 효과를 적용해본 사이트 입니다. 각종 메뉴 효과, 가로세로 모드, 리빌 효과, 이질감 효과를 적용해보았습니다.
03
SEARCH EFFECT
CSS 속성 검색 사이트
javascript 문자열 메서드(indexOf(), includes(), charAt(), find(), fliter(), sort())를 활용하여 CSS속성을 검색할 수 있게 만든 사이트 입니다.
04
SLIDER EFFECT
이미지 슬라이드
javascript를 활용하여 이미지를 슬라이드 형식으로 움직여 보았고, 움직임 버튼, 닷 버튼, 자동플레이, 시작 버튼, 정지 버튼을 구현해보았습니다.
contact
