반응형
SMALL
밑에 이미지를 보면
| index.html |
| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="author" content="codegogo"> <meta name="description" content="웹 표준을 준수한 사이트 예제입니다."> <meta name="keywords" content="코드고고, 웹표준, 웹접근성, 사이트 만들기"> <meta name="generator" content="brakets"> <title>WEBSTANDARD SITE</title> <!-- CSS STYLE --> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <!-- 웹 폰트 --> <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&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://codegogo.tistory.com/">Desinger</a> <a href="https://www.inflearn.com/course/%EC%9B%B9-%ED%91%9C%EC%A4%80-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0">Publisher</a> <a href="https://www.youtube.com/">Youtube</a> </div> <!-- //헤더 메뉴 --> <div class="header-tit"> <h1>Professional Publisher & Designer</h1><br> <a href="http://codegogo.dothome.co.kr/web">codegogo.dothome.co.kr/web</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">contents</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_cont --> </div> <div id="footer"> <div class="container">footer</div> </div> <!-- //footer --> </div> <!-- //wrap --> </body> </html> |
| style.css |
| @charset "utf-8"; /* 스킵 내비게이션 */ #skip {position: absolute;} #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;} /* 레이아웃 */ #wrap {width: 100%;} #header {width: 100%; height: 325px; background: url(../img/header_bg.jpg) center top repeat-x } #contents {width: 100%;height: 800px; background: #222;} #footer {width: 100%; height: 200px; background: #333;} /* 컨텐츠 레이아웃 */ #cont_nav {width: 100%; height: 200px; background: #333;} #cont_tit {width: 100%; height: 200px; background: #444;} #cont_ban {width: 100%; height: 200px; background: #555;} #cont_cont {width: 100%; height: 200px; background: #666;} /* 컨테이너 */ .container {width: 990px; margin: 0 auto; height: inherit; /* background: rgba(255,255,255,0.3);*/} /* 헤더 */ .header { } .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: #2698cd; font-size: 18px; color: #fff; padding: 5px 20px 6px 20px; margin-top: -5px;} .header .header-icon {text-align: center; margin-top: 30px;} .header .header-icon a {width: 60px; height: 60px; display: inline-block; background: url(../img/icon.png); margin: 0 3px;} .header .header-icon a.icon1 {background-position: 0 0;} .header .header-icon a.icon2 {background-position: 0 -60px;} .header .header-icon a.icon3 {background-position: 0 -120px;} .header .header-icon a.icon4 {background-position: 0 -180px;} .header .header-icon a.icon1:hover {background-position: -60px 0;} .header .header-icon a.icon2:hover {background-position: -60px -60px;} .header .header-icon a.icon3:hover {background-position: -60px -120px;} .header .header-icon a.icon4:hover {background-position: -60px -180px;} |
| reset.css |
| @charset "utf-8"; /* 여백 초기화 */ body,div,ul,li,dl,dd,dt,ol,h1,h2,h3,h4,h5,h6,input,fieldset, legend,p,select,table,th,td,tr,textarea,button,form{margin:0;padding:0;} /* a 링크 초기화 */ a {color: #222; text-decoration: none;} a:hover {color: #390;} /* 폰트 초기화 */ body, input, textarea, select, button, table { font-family:'Nanum Gothic', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif; color: #222; font-size: 13px; line-height: 1.5;} /* IR 효과 */ /* 의미있는 이미지의 대체 텍스트를 제공하는 경우 */ .ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;} /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때 */ .ir_wa {display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%;} /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */ .ir_su {overflow: hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9999px;} |
반응형
LIST
'웹 표준 사이트 만들기 > 페이지 구조 실습' 카테고리의 다른 글
| 페이지 구조 실습 - 전체 타이틀 (2) | 2023.01.02 |
|---|---|
| 페이지 구조 실습 - 전체 메뉴 (0) | 2023.01.02 |
| 페이지 구조 실습 - 헤더 타이틀 & 웹 폰트 (0) | 2023.01.01 |
| 페이지 구조 실습 - 헤더 배경 & 메뉴 (0) | 2022.12.31 |
| 페이지 구조 실습 - 스킵 메뉴 (0) | 2022.12.31 |
