강의 목록 : https://www.youtube.com/playlist?list=PL4UVBBIc6giKkfYN_2TVPgbMpd87lJEfg
01. 웹표준 사이트 만들기 - 기본 셋팅하기
02. 웹표준 사이트 만들기 - Layout1
03. 웹표준 사이트 만들기 - Layout2
04. 웹표준 사이트 만들기 - Layout3
05. 웹표준 사이트 만들기 - Layout4
06. 웹표준 사이트 만들기 - header1
07. 웹표준 사이트 만들기 - header2
08. 웹표준 사이트 만들기 - header3
09. 웹표준 사이트 만들기 - header4
10. 웹표준 사이트 만들기 - header5
11. 웹표준 사이트 만들기 - header6
12. 웹표준 사이트 만들기 - header7
13. 웹표준 사이트 만들기 - header8
강의 자료는 여기서 참고하세요~
현재 준비중이지만 http://webstoryboy.co.kr/3
HTML/CSS는 여기서 참고하세요~ http://coderap.tistory.com/
동영상 소스는 여기서 확인하세요~ http://wtss.tistory.com/category/Webs...
CSS 소스는 여기서 확인하세요~ http://wsss.tistory.com/
이쿼리 소스는 여기서 확인하세요 http://codejss.tistory.com/
소스 :
1) https://github.com/webstoryboy/webstandard
2) https://github.com/braverokmc79/web_publishing_project1
결과 화면 : https://braverokmc79.github.io/web_publishing_project1/#
01. 웹표준 사이트 만들기 - 기본 셋팅하기
index.html
<!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"> <meta name="author" content="webstoryboy"> <meta name="description" content="웹 퍼블리셔를 위한 정보 공유 사이트 수업 입니다." > <meta name="keywords" content="웹표준,웹표준사이트, 웹접근성, webstroyboy" > <title>Webstandard</title> </head> <body> </body> </html>
02. 웹표준 사이트 만들기 - Layout1
03. 웹표준 사이트 만들기 - Layout2
index.html
<!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"> <meta name="author" content="webstoryboy"> <meta name="description" content="웹 퍼블리셔를 위한 정보 공유 사이트 수업 입니다." > <meta name="keywords" content="웹표준,웹표준사이트, 웹접근성, webstroyboy" > <title>Webstandard</title> <!-- style --> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="wrap"> <div id="header"></div> <div id="contents"></div> <div id="footer"></div> </div> </body> </html>
css/style.css
#wrap{} #header{} #contents{} #footer{}
04. 웹표준 사이트 만들기 - Layout3
index.html
<!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"> <meta name="author" content="webstoryboy"> <meta name="description" content="웹 퍼블리셔를 위한 정보 공유 사이트 수업 입니다." > <meta name="keywords" content="웹표준,웹표준사이트, 웹접근성, webstroyboy" > <title>Webstandard</title> <!-- style --> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="wrap"> <div id="header"> <div class="container">header</div> </div> <div id="contents"> <div class="container">contents</div> </div> <div id="footer"> <div class="container"> footer </div> </div> </div> </body> </html>
reset.css
/* 여백 초기화 */ @charset "utf-8"; body,div,dl,dd,dt,ul,li,ol,h1,h2,h3,h4,h5,h6,form,legend,textarea,input,select,fieldset, p,button{margin: 0;padding: 0;}
style.css
/* layout */ #wrap{ width: 100%;} #header{width: 100% ; height: 327px; background-color: #999;} #contents{width: 100%; height: 400px; background-color: #888;} #footer{width: 100%; height: 200px; background-color: #777;} /* container */ .container{width:900px; background-color: rgba(255,255,255,0.4); margin: 0 auto;}
05. 웹표준 사이트 만들기 - Layout4
index.html
<!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"> <meta name="author" content="webstoryboy"> <meta name="description" content="웹 퍼블리셔를 위한 정보 공유 사이트 수업 입니다." > <meta name="keywords" content="웹표준,웹표준사이트, 웹접근성, webstroyboy" > <title>Webstandard</title> <!-- style --> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="wrap"> <div id="header"> <div class="container">header</div> </div> <!-- //header --> <div id="contents"> <div id="cont-nav"> <div class="container">cont-nav</div> </div> <!-- //cont-nav --> <div id="cont-tit"> <div class="container">cont-tit</div> </div> <!-- //cont-tit --> <div id="cont-ban"> <div class="container">cont-ban</div> </div> <!-- //cont-ban --> <div id="cont-cont"> <div class="container">cont-cont</div> </div> <!-- //cont-con --> </div> <!-- //contents --> <div id="footer"> <div class="container"> footer </div> </div> <!-- //footer --> </div> <!-- //wrap --> </body> </html>
style.css
/* layout */ #wrap{width: 100%;} #header{width: 100% ; height: 327px; background-color: #999;} #contents{width: 100%; height: 400px; background-color: #888;} #footer{width: 100%; height: 200px; background-color: #777;} /* container */ .container{width:900px; background-color: rgba(255,255,255,0.4); margin: 0 auto;} /* contents layout */ #cont-nav{width: 100%; height: 100px;background-color: #666;} #cont-tit{width: 100%;height: 100px;background-color: #555;} #cont-ban{width: 100%;height: 100px;background-color: #333;} #cont-cont{width: 100%;height: 100px;background-color: #222;}
06. 웹표준 사이트 만들기 - header1
이미지를 표현하는 방법
1. HTML 태그를 통해서 표현하는 방법(의미가 있는 이미지)(alt:대체 문자)
2. CSS 속성을 통해서 표현하는 방법 (의미가 없는 이미지)
3. 이미지 스프라이트 방법(IR효과)
coderap CSS Description
https://coderap.tistory.com/121
07. 웹표준 사이트 만들기 - header2
block 와 inline 차이
index.html
<div id="header"> <div class="container"> <!-- block <div class="quick"> <ul> <li><a href="#">Designer Cafe</a></li> <li><a href="#">Publisher Cafe</a></li> </ul> </div> --> <div class="quick"> <a href="#">Designer Caf</a> <a href="#">Publisher Cafe</a> </div> <div></div> </div> </div>
style.css
/* quick */ .quick{text-align: right;} .quick ul{overflow: hidden;} .quick ul li{float: left;} .quick a{ color: #fff; padding: 5px 0 0 10px; display: inline-block;} .quick a:hover{color: #ccc;}
08. 웹표준 사이트 만들기 - header3
폰트 적용
구글 폰트
https://fonts.google.com/specimen/Nanum+Gothic?subset=korean
index.html
~ <head> <!-- webfont --> <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Noto+Sans+KR:wght@400;500;700;900&display=swap" rel="stylesheet"> </head> ~
reset.css
/* 폰트 초기화 */ body, input, textarea, select, button, table{font-family: 'Nanum Gothic', sans-serif , "Noto Sans KR", "돋움", Dotum ; font-size: 12px; line-height: 1.7;}
09. 웹표준 사이트 만들기 - header4
index.html
<div id="header"> <div class="container"> <div class="quick"> <a href="#">Designer Caf 디자이너 카페</a> <a href="#">Publisher Cafe 퍼블리셔 카페</a> </div> <!-- inline --> <div class="title"> <p>Can See the Futrue, Only Dream</p> <h1><a href="#">Webstoryboy.co.kr</a></h1> </div> </div> </div>
reset.css
/* 제목 스타일 초기화 */ h1, h2, h3,h4, h5, h6{font-size: 12px; font-weight: normal;}
style.css
/* title */ .title{text-align: center;} .title p{background-color: #2698cb; font-size: 28px; display: inline-block; color:#fff; margin-top: 100px; padding: 5px 15px; text-transform: uppercase;} .title h1 a{background-color: #4aa8d4; font-size: 18px; color: #fff;display: inline-block; text-transform: uppercase; padding: 5px 15px;}
10. 웹표준 사이트 만들기 - header5
index.html
~ <div class="container"> <div class="quick"> <a href="#">Designer Caf 디자이너 카페</a> <a href="#">Publisher Cafe 퍼블리셔 카페</a> </div> <!-- inline <div class="title"> <p>Can See the Futrue, Only Dream</p> <h1><a href="#">Webstoryboy.co.kr</a></h1> </div> --> <!-- position --> <div class="title"> <p>Can See the Futrue, Only Dream</p> <h1><a href="#">Webstoryboy.co.kr</a></h1> </div> </div> ~
1) inline 방식 css
/* title inline 방식 css .title{text-align: center;} .title p{background-color: #2698cb; font-size: 28px; display: inline-block; color:#fff; margin-top: 100px; padding: 5px 15px; text-transform: uppercase;} .title h1 a{background-color: #4aa8d4; font-size: 18px; color: #fff;display: inline-block; text-transform: uppercase; padding: 5px 15px;} */
2)position 방식 css
/* title position 방식 css */ .title{} .title h1{position: absolute; left: 390px; top: 160px;} .title h1 a{ background-color: #2698cb;font-size: 18px; color: #fff;text-transform: uppercase; padding: 5px 15px; display: block; } .title p{background-color: #4aa8d4; font-size: 28px; color:#fff; padding: 5px 15px; text-transform: uppercase; position: absolute;left: 230px; top: 110px;}
11. 웹표준 사이트 만들기 - header6
아이콘 이미지 마다 교체하는 방법
ul>li*4>a[href="#"]{icon$}
index.html
<div class="icon"> <ul> <li class="icon-tit1"><a href="#">icon1</a></li> <li class="icon-tit2"><a href="#">icon2</a></li> <li class="icon-tit3"><a href="#">icon3</a></li> <li class="icon-tit4"><a href="#">icon4</a></li> </ul> </div>
reset.css
/* 블릿기호 초기화 */ li, ol, ul{list-style: none;}
style.css
다음 내용은 아이콘별 이미지가 없는 관계로 스프라이트 방식 적용
/* icon */ .icon{position: absolute; left: 360px; top:220px} .icon ul{overflow: hidden;} .icon ul li{float: left;} .icon li a {width: 60px; height: 60px; display:block; margin: 0 3px; background-image: url(../img/icon.png);} .icon li a:hover{background-image: url(../img/icon.png); background-position-x: -60px;} .icon li.icon-tit1 a{} .icon li.icon-tit2 a{} .icon li.icon-tit3 a{} .icon li.icon-tit4 a{}
12. 웹표준 사이트 만들기 - header7
이미지 스프라이트(Image Sprite)란?
여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법
IR 기법(Image Replacement)은 무엇인가?
IR 기법은 이미지의 대체텍스트를 제공하기 위한 CSS 기법으로 아래와 같이 다양한 CSS 기법을 사용하여 이미지의 대체 텍스트를 제공할 수 있습니다.
/* icon 스프라이트 방법 */ .icon{position: absolute; left: 360px; top:220px} .icon ul{overflow: hidden;} .icon ul li{float: left;} .icon li a {width: 60px; height: 60px; display:block; margin: 0 3px; background-image: url(../img/icon.png);} .icon li a:hover{background-image: url(../img/icon.png); background-position-x: -60px;} .icon li.icon-tit1 a{ } .icon li.icon-tit2 a{background-position-y: 690px;} .icon li.icon-tit3 a{background-position-y: 630px;} .icon li.icon-tit4 a{background-position-y: 570px;}
13. 웹표준 사이트 만들기 - header8
ir 효과 적용
OpenWAX
https://chrome.google.com/webstore/detail/openwax/bfahpbmaknaeohgdklfbobogpdngngoe?hl=ko
Color Contrast Analyze
https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll?hl=ko
index.html
<div class="icon"> <ul> <li class="icon-tit1"><a href="#"><span class="ir">icon1</span></a></li> <li class="icon-tit2"><a href="#"><span class="ir">icon2</span></a></li> <li class="icon-tit3"><a href="#"><span class="ir">icon3</span></a></li> <li class="icon-tit4"><a href="#"><span class="ir">icon4</span></a></li> </ul> </div>
reset.css
/* ir 효과 */ .ir{width: 0; height: 0; font-size: 0; line-height: 0; overflow: hidden; position: absolute; left: 0; top:0;}
style.css
/* icon 스프라이트 방법 */ .icon{position: absolute; left: 360px; top:220px} .icon ul{overflow: hidden;} .icon ul li{float: left;} .icon li a {width: 60px; height: 60px; display:block; margin: 0 3px; background-image: url(../img/icon.png);} .icon li a:hover{background-image: url(../img/icon.png); background-position-x: -60px;} .icon li.icon-tit1 a{ } .icon li.icon-tit2 a{background-position-y: 690px;} .icon li.icon-tit3 a{background-position-y: 630px;} .icon li.icon-tit4 a{background-position-y: 570px;}
댓글 ( 4)
댓글 남기기