Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴

moozi

layout05.html 본문

TIS_2016/주말반_4기

layout05.html

moozi 2016. 9. 3. 17:28

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>모바일레이아웃</title>
    <style>
        *{margin: 0;padding: 0;}
        header{
            height: 45px;
            background-image: url(img/header_background.png);
            position: relative;/* 부모는 relative */
            text-align: center; /* 글자 가운데 정렬 */
            line-height: 45px; /* 수직 가운데 정렬 */
        }
        header .left{
            position: absolute; /* 자식은 absolute */
            left:5px;
            top:7px;
            background-image: url(img/header_left_button.png);
            text-indent: -999999px; /* 글자를 사라지게 */
            width:62px;
            height: 32px;
        }
        header .right{
            position: absolute; /* 자식은 absolute */
            right:5px;
            top:7px;
            background-image: url(img/header_right_button.png);
            text-indent: -999999px; /* 글자를 사라지게 */
            width:32px;
            height: 32px;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <header>
            <a href="#" class="left">홈</a>
            <h3>TIS정보기술교육센터</h3>
            <a href="#" class="right">menu</a>
        </header>
    </div>
</body>
</html>

'TIS_2016 > 주말반_4기' 카테고리의 다른 글

반응형 웹페이지 샘플 - photo  (0) 2016.09.10
반응형 웹 샘플  (0) 2016.09.10
9/3 수업파일  (0) 2016.09.03
layout04.html  (0) 2016.09.03
8/27 수업파일  (0) 2016.09.03
'TIS_2016/주말반_4기' Related Articles more
Comments