본문 바로가기

TUTORIAL


웹 표준 사이트 만들기(2019)

12. 웹 표준 사이트 만들기(2019) - 헤더 타이틀 & 웹 폰트

웹 표준 사이트 만들기(2019) - 헤더 타이틀 & 웹 폰트

웹 폰트를 적용하는 방법과 헤더 타이틀을 코딩하는 예제입니다. 영상과 함께 따라해주세요!

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="webstoryboy">
    <meta name="description" content="웹 표준을 준수한 사이트 예제입니다.">
    <meta name="keywords" content="웹표준, 웹접근성, 샘플사이트">
    <meta name="generator" content="brackets">
    <title>WEBSTANDARD SITE</title>
    
    <!-- 웹 폰트 -->
    <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic" rel="stylesheet">
    
    <style>
        /* 여백 초기화 */   
        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;}
    </style>
    <style>
        /* 스킵 내비게이션 */
        #skip {position: relative;}
        #skip a {position: absolute; left: 0px; top: -35px; width: 140px; border:1px solid #fff; color: #fff; text-align: center; background: #333; line-height: 30px;}
        #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: #111;}
        
        /* 컨텐츠 레이아웃 */
        #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 {color: #fff; background-color: #4aa8d4; display: inline-block; font-size: 28px; padding: 5px 20px 6px 20px; margin-top: 40px; font-weight: normal; text-transform: uppercase;}
        .header .header-tit a {display: inline-block; background-color: #2698cb; font-size: 18px; color:#fff; padding: 5px 20px 6px 20px; margin-top: -5px;}

        .header .header-icon {} 
    </style>
</head>
<body>
    <!-- 스킵 내비게이션 -->
    <div id="skip">
        <a rel="bookmark" href="#cont_nav">전체 메뉴 바로가기</a>
        <a rel="bookmark" href="#cont_ban">배너 영역 바로가기</a>
        <a rel="bookmark" href="#cont_cont">컨텐츠 영역 바로가기</a>
    </div>
    <!-- //스킵 내비게이션 -->
    
    <div id="wrap">
        <div id="header" role="header">
            <div class="container">
                <div class="header">
                    <div class="header-menu">
                        <a href="https://wiss.tistory.com/">Desinger</a>
                        <a href="https://webstoryboy.co.kr/">Publisher</a>
                        <a href="https://www.youtube.com/channel/UCsvQSv7EeCMHyYb9ENKAJZw">Youtube</a>
                    </div>
                    <!-- //헤더 메뉴 -->
                    <div class="header-tit">
                        <h1>Professional Publisher & Designer</h1><br>
                        <a href="https://webstoryboy.co.kr/">webstoryboy.co.kr</a>
                    </div>
                    <!-- //헤더 타이틀 -->
                    <div class="header-icon"></div>
                </div>
            </div>
        </div>
        <!-- //header -->
        
        <div id="contents">
            <div id="cont_nav" role="nav">
                <div class="container">cont_nav</div>
            </div>
            <!-- //cont_nav -->
            <div id="cont_tit" role="title">
                <div class="container">cont_tit</div>
            </div>
            <!-- //cont_tit -->
            <div id="cont_ban" role="banner">
                <div class="container">cont_ban</div>
            </div>
            <!-- //cont_ban -->
            <div id="cont_cont" role="content">
                <div class="container">cont_cont</div>
            </div>
            <!-- //cont_cont -->
        </div>
        <!-- //contents -->
        
        <div id="footer" role="footer">
            <div class="container">footer</div>
        </div>
        <!-- //footer -->
    </div>
    <!-- //wrap -->
</body>
</html>



































<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="webstoryboy">
    <meta name="description" content="웹 표준을 준수한 사이트 예제입니다.">
    <meta name="keywords" content="웹표준, 웹접근성, 샘플사이트">
    <meta name="generator" content="brackets">
    <title>WEBSTANDARD SITE</title>
    
    <!-- style -->
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    
    <!-- 웹 폰트 -->
    <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic" rel="stylesheet">
    
</head>
<body>
    <!-- 스킵 내비게이션 -->
    <div id="skip">
        <a rel="bookmark" href="#cont_nav">전체 메뉴 바로가기</a>
        <a rel="bookmark" href="#cont_ban">배너 영역 바로가기</a>
        <a rel="bookmark" href="#cont_cont">컨텐츠 영역 바로가기</a>
    </div>
    <!-- //스킵 내비게이션 -->
    
    <div id="wrap">
        <div id="header" role="header">
            <div class="container">
                <div class="header">
                    <div class="header-menu">
                        <a href="https://wiss.tistory.com/">Desinger</a>
                        <a href="https://webstoryboy.co.kr/">Publisher</a>
                        <a href="https://www.youtube.com/channel/UCsvQSv7EeCMHyYb9ENKAJZw">Youtube</a>
                    </div>
                    <!-- //헤더 메뉴 -->
                    <div class="header-tit">
                        <h1>Professional Publisher & Designer</h1><br>
                        <a href="https://webstoryboy.co.kr/">webstoryboy.co.kr</a>
                    </div>
                    <!-- //헤더 타이틀 -->
                    <div class="header-icon"></div>
                </div>
            </div>
        </div>
        <!-- //header -->
        
        <div id="contents">
            <div id="cont_nav" role="nav">
                <div class="container">cont_nav</div>
            </div>
            <!-- //cont_nav -->
            <div id="cont_tit" role="title">
                <div class="container">cont_tit</div>
            </div>
            <!-- //cont_tit -->
            <div id="cont_ban" role="banner">
                <div class="container">cont_ban</div>
            </div>
            <!-- //cont_ban -->
            <div id="cont_cont" role="content">
                <div class="container">cont_cont</div>
            </div>
            <!-- //cont_cont -->
        </div>
        <!-- //contents -->
        
        <div id="footer" role="footer">
            <div class="container">footer</div>
        </div>
        <!-- //footer -->
    </div>
    <!-- //wrap -->
</body>
</html>































@charset "utf-8";

/* 스킵 내비게이션 */
#skip {position: relative;}
#skip a {position: absolute; left: 0px; top: -35px; width: 140px; border:1px solid #fff; color: #fff; text-align: center; background: #333; line-height: 30px;}
#skip a:active, 
#skip a:focus {top: 0;}

/* 레이아웃 */
#wrap {width: 100%; }
#header {width: 100%; height: 325px; background: #111; }
#contents {width: 100%; height: 800px; background: #222;}
#footer {width: 100%; height: 200px; background: #111;}

/* 컨텐츠 레이아웃 */
#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 {color: #fff; background-color: #4aa8d4; display: inline-block; font-size: 28px; padding: 5px 20px 6px 20px; margin-top: 40px; font-weight: normal; text-transform: uppercase;}
.header .header-tit a {display: inline-block; background-color: #2698cb; font-size: 18px; color:#fff; padding: 5px 20px 6px 20px; margin-top: -5px;}

.header .header-icon {} 



































@charset "utf-8";

/* 여백 초기화 */
body, div, ul, li, dl, 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: AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif; 
    color: #222; font-size: 13px; line-height: 1.5;}


































  • geon 2018.11.16 11:08 댓글주소 수정/삭제 댓글쓰기

    http://smiling88.dothome.co.kr
    완성 강의 잘 들었습니다~~

  • htmlcss정복하자 2018.12.18 12:59 댓글주소 수정/삭제 댓글쓰기

    안녕하세요! 수업 너무 좋아서 열심히 듣고있습니다~!고맙습니당^^
    저는, html,css기초강좌 듣고, 바로 이거 따라하기 연습하고 있는데요~! 따라할때는 선생님따라서 하니깐 구현이 잘 되는데, 막상 혼자서 처음부터 하려니 잘 못하겠네요 ㅠ
    일단 홈페이지 정주행으로 따라하면서 완성해보고, 그 다음에 다시 한번 혼자 해보는게 좋을까요? 아니면 강의 하나씩 보고나서 될때까지... 구현하는게 더 효과적일지.. 너무 초보같은 질문이죠.ㅠ
    이 홈페이지를 다 만들고 난후에 혼자서 완성할 날이 오겠죠 ㅠ 열심히 따라해보겠습니다 고맙습니다~!

    • 이거 다 듣고 혼자서 만들어 보시면 됩니다. 하지만 그래도 잘 인될거예여. 그때는 기업사이트 동영상 따라해보시고 또 혼자 도전하시면 됩니다

  • htmlcss정복하자 2018.12.19 11:45 댓글주소 수정/삭제 댓글쓰기

    댓글달아주셔서 너무 고맙습니다~! 기업사이트 동영상 유투브에는 있던데, 여기 홈페이지에도 소스랑 업뎃해주실 예정이신지 여쭤봅니다~!

    • 기존에 있던건 테스트로 올린거구요~~ 웹표준 -> 반응형 -> 기업사이트 이렇게 순차적으로 올려놓을 계획입니다.

  • alone 2019.03.15 12:19 댓글주소 수정/삭제 댓글쓰기

    아무리 해도 헤더 h1 텍스트가 가운데로 안옵니다. 동일하게 따라하고 소스까지 몇 번이나 확인했습니다만 ㅠㅠ 그 강력 새로고침까지 따라해서 안됩니다.
    .header .header-tit h1 { text-align: center; } ---> 여기에서 강력 새로고침을 하면 가운데로 와야 하는데 안옵니다.
    #작업중 사이트 주소 : http://donginc.dothome.co.kr/web/index.html

    • .header .header-tit {}
      이 부분이 틀렸네요~~ 저렇게 쓰시면 header안에 header-tit이 있는 구조가 되버립니다.
      앞에 header를 지우셔야 합니다.

    • 다시 보니 html이 틀렸네요~ header 안에 타이틀 아이콘 메뉴가 들어가야 하는데~~~ 타이틀만 들어가 있네요~~~~ .header 박스안으로 넣어주세요~

  • 공부중 2019.03.18 18:47 댓글주소 수정/삭제 댓글쓰기

    선생님.. 저 인라인 구조랑 블럭 구조 잘이해가 안됩니다
    이걸 이해해야 앞으로 코딩할때 더 공부가 잘될거같은데 알려주실 수있으신가요?

    • 공부중 2019.03.18 18:57 댓글주소 수정/삭제

      아 그리구 padding: 10px 0px 10px 13px;
      이게 숫자마다 어디에 적용되는지도 잘 모르겠어요...

    • 처음엔 블록구조랑 인라인 구조가 이해 안갈 수 있습니다. 블록구조는 박스개념으로 인라인은 텍스트 개념으로 보시면 되구요~ 앞으로 남은 영상에서 수도 없이 얘기할거라~~ 조금씩 이해가 갈겁니다.

    • 패딩: 위, 오른쪽, 아래, 왼쪽

  • alone 2019.03.19 14:14 댓글주소 수정/삭제 댓글쓰기

    저는 동영상 2:36초 이후부터 안됩니다. 헤더 안으로 넣으라고 하셨는데 그 말도 이해를 아직 못했습니다. ㅠㅠ
    http://donginc.dothome.co.kr/web/index.html

    • 그럼 제 소스를 복사해서 넣은 다음에 비교해서 확인해보세요~~~ 큰 박스안에 작은 박스 3개가 들어간 구조가 틀렸습니다.

  • alone 2019.03.19 14:37 댓글주소 수정/삭제 댓글쓰기

    하하하...;;;; 앞에 동영상을 보니까 제가 잘 못했군요. 제가 지금 확인하고 왔는데 그 새 답글을 주셨군요. 죄송하게시리..
    덕분에 참 많이 배웁니다. ^^

  • 서지민 2019.05.22 00:28 댓글주소 수정/삭제 댓글쓰기

    http://127.0.0.1:6509/web/index.html

    헤더와 헤더타이틀 간격이 유튜브에 방송하신거랑 조금 다른데 제가 잘못한 부분이 있나요?ㅠ