페이지 구조 실습 - 헤더 배경 & 메뉴

SMALL

↓

https://github.com/webstoryboy/webstandard2019/tree/master/img

GitHub - webstoryboy/webstandard2019: 웹 표준 사이트 만들기 2019 버전입니다.

웹 표준 사이트 만들기 2019 버전입니다. Contribute to webstoryboy/webstandard2019 development by creating an account on GitHub.

github.com

style.css - 레이아웃 header background 에 url 입력

center top 입력 후 보기 3 (그대로 커지거나 작아짐. 자꾸 보면 차이점을 알 수 있음)

Desinger, Publisher, Youtube 클릭하면 입력했던 링크주소로 이동

display inline-block 입력 후 보기 (순서대로 나열 됨)

style.css 에서 header-tit, header-icon 입력.

헤더 배경 & 메뉴 끝.

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>

    
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
</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"></div>
                    <div class="header-icon"></div>
                </div>
            </div>
        </div>
        

        <div id="contents">
            <div id="cont_nav">
                <div class="container">contents</div>
            </div>
            
            <div id="cont_tit">
                <div class="container">cont_tit</div>
            </div>
            
            <div id="cont_ban">
                <div class="container">cont_ban</div>
            </div>
            
            <div id="cont_cont">
                <div class="container">cont_cont</div>
            </div>
            
        </div>
        <div id="footer">
            <div class="container">footer</div>
        </div>
        
    </div>
    
</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 {}
.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;}

https://inf.run/fyGS

LIST

'웹 표준 사이트 만들기 > 페이지 구조 실습' 카테고리의 다른 글

페이지 구조 실습 - 전체 타이틀 (2)	2023.01.02
페이지 구조 실습 - 전체 메뉴 (0)	2023.01.02
페이지 구조 실습 - 헤더 아이콘 (0)	2023.01.01
페이지 구조 실습 - 헤더 타이틀 & 웹 폰트 (0)	2023.01.01
페이지 구조 실습 - 스킵 메뉴 (0)	2022.12.31

개발자개발공부

페이지 구조 실습 - 헤더 배경 & 메뉴

'웹 표준 사이트 만들기 > 페이지 구조 실습' 카테고리의 다른 글

티스토리툴바

페이지 구조 실습 - 헤더 배경 & 메뉴

'웹 표준 사이트 만들기 > 페이지 구조 실습' 카테고리의 다른 글

'웹 표준 사이트 만들기/페이지 구조 실습' Related Articles

티스토리툴바