↓
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
| 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> <!-- //헤더 타이틀 --> <div class="header-icon"></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 {} |
| 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;} |
'웹 표준 사이트 만들기 > 페이지 구조 실습' 카테고리의 다른 글
| 페이지 구조 실습 - 전체 타이틀 (2) | 2023.01.02 |
|---|---|
| 페이지 구조 실습 - 전체 메뉴 (0) | 2023.01.02 |
| 페이지 구조 실습 - 헤더 아이콘 (0) | 2023.01.01 |
| 페이지 구조 실습 - 헤더 배경 & 메뉴 (0) | 2022.12.31 |
| 페이지 구조 실습 - 스킵 메뉴 (0) | 2022.12.31 |
