본문 바로가기

TUTORIAL


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

13. 웹 표준 사이트 만들기(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;}
        
        /* IR 효과 */
        .ir_pm {display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px;} /* 의미있는 이미지의 대체 텍스트를 제공하는 경우(Phark Method) */
        .ir_wa {display:block; overflow:hidden; position:relative; z-index:-1; width:100%; height: 100%;} /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때(WA IR) */
        .ir_su {overflow: hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9999px;} /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */
    </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 {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: 0px 0px;}
        .header .header-icon a.icon2 {background-position: 0px -60px;}
        .header .header-icon a.icon3 {background-position: 0px -120px;}
        .header .header-icon a.icon4 {background-position: 0px -180px;}
    </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">
                        <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" 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">
                        <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" 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 {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: 0px 0px;}
.header .header-icon a.icon2 {background-position: 0px -60px;}
.header .header-icon a.icon3 {background-position: 0px -120px;}
.header .header-icon a.icon4 {background-position: 0px -180px;} 



































@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;}
    
/* IR 효과 */
.ir_pm {display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px;} /* 의미있는 이미지의 대체 텍스트를 제공하는 경우(Phark Method) */
.ir_wa {display:block; overflow:hidden; position:relative; z-index:-1; width:100%; height: 100%;} /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때(WA IR) */
.ir_su {overflow: hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9999px;} /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */


































  • geon 2018.11.19 08:20 댓글주소 수정/삭제 댓글쓰기

    http://smiling88.dothome.co.kr/web/index.html
    따라했어요!

  • nini 2019.02.02 02:16 댓글주소 수정/삭제 댓글쓰기

    http://designerih.dothome.co.kr/web/index.html/
    크롬에서는 잘 나옵니다!!근데 익스플로러 11사용하고 있는데요~ 왜 익스플로러에선 작업된게 안나올까요?ㅠㅠ
    css가 하나도 먹히지 않아서
    하얀화면에 글씨만 나옵니다~

    • 죄송하지만 그냥도 잘 나오지 않습니다. css 연동하는 부분이 틀린거 같습니다. 이 부분 다시 한번 확인 부탁드립니다.

  • lily 2019.03.16 16:14 댓글주소 수정/삭제 댓글쓰기

    안녕하세요:) 강의 영상을 한번 다 본 후에, 혼자 마크업 작성중인데 질문이 생겨서요.. !
    마크업이 안올려지나요?ㅠㅠ header.container 안에 h2(tit작성), a(웹사이트링크), "ul.top-menu ul.header-icon"div로 묶어서 이렇게 마크업 작성을 했는데요
    강의 영상 마크업과 차이가 궁금해서요 !
    div로 .header-menu .header-tit .header-icon으로 따로 묶은거는 영역설정을 편하게 하기 위함일까요?
    div대신 ul로 묶어도 상관없을까요?

    • 네 크게 상관없습니다. 자기 스타일입니다. 편한데로 작업하시면 되구요~~ 저는 통일성과 보기 좋게 하기 위해서 그렇게 한거 같습니다.

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

    https://wtss.tistory.com/180

    css와 html검사 모두 오류라고 나오는데 어느부분이 잘못된지 모르겠어요 ㅠ

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

    http://sjm4448.dothome.co.kr/web/index.html 입니다.

  • SYS 2019.05.27 11:32 댓글주소 수정/삭제 댓글쓰기

    http://stisthaha.dothome.co.kr/web/index.html

    유효성 검사 했는데

    해석 오류 / * 레이아웃 * / #wrap {width: 100%; }

    이렇게 나왔어요; 아무리 봐도 완성본 코드랑 같은데 뭐가 문젠지 모르겟습니다.

  • 황정훈 2019.06.28 21:14 댓글주소 수정/삭제 댓글쓰기

    따라하다보니 결과는 잘 나왔네요 ㅎ

    http://bingbingba1.dothome.co.kr/web/index.html

  • 이강희 2019.07.15 01:34 댓글주소 수정/삭제 댓글쓰기

    폰 인터넷으로 제가 만든 사이트 확인해보려는데 안되네요..
    폰으로 접속하는건 또 다른 이론이 필요한가요??

    • 닷홈 주소가 있으면 확인 가능합니다.
      하지만 모바일을 맞추지 않았기 때문에 피시처럼 보일 수 있습니다.
      모바일은 반응형 하실 때 확인 가능합니다.

  • 강동현 2019.07.18 13:10 댓글주소 수정/삭제 댓글쓰기

    안녕하세요, 항상 가르쳐주시느라 수고가많으십니다. 굉장히 많은도움이되고있고 감사드립니다. 다름이아니라
    브라켓에서 시냅스를 통해서 헤더아이콘을 지정하는데 문제가 발생합니다. 경로를 아무리 지정해도 나오지않고, 직접 파일을 눌러보면 Could not open the path라고 시냅스에 계속 표시가 됩니다. 파일질라를 통해서 몇번 재업로드하거나 지워봐도 결과는 같습니다. 어떻게하면 좋을까요? 읽어주셔서 감사합니다.

    • 지금 알려주신 부분에서는 FPT가 제대로 접속이 됐는지~ FTP에 올리면 브라켓에 바로 반영이 되는지 부터 확인을 해야 할것 같습니다. 정확한 주소를 주시면 다시 한번 확인해 보겠습니다.

    • 강동현 2019.07.18 17:49 댓글주소 수정/삭제

      kbh11051.dothome.co.kr 입니다

    •  현재 이미지는 제대로 들어가 있고 잘 나옵니다.
      코딩부분이 틀렸네요
      <div class="header-icon"></div>
      이 부분에
      <a href="#" class="icon1"><span>icon1</span></a>
      이것들이 들어가 있지 않습니다.

      <div class="header-icon">
      //여기에 넣으셔야 하는데 잘못 넣었네요
      </div>

      샘플 소스랑 확인해보세요^^

  • sombra 2019.11.15 04:18 댓글주소 수정/삭제 댓글쓰기

    안녕하세요 좋은 강의를 들으며 열심히 따라하는 중입니다.
    그런데 제 생각에는 또~옥같이 따라했다고 생각하는데
    이상하게 전 강의 부분인 헤더 타이틀 부분이 가운데 정렬이 안되고
    헤더 메뉴 부분도 오른쪽 정렬이 안됩니다.

    구름 IDE를 이용하여 작성했는데 혹시 봐주실 수 있을까요?
    https://goor.me/DswWD

    선생님이 만들어두신 샘플 코드를 그대로 복사하면 제대로 나오는데
    인덴트의 문제일까요?

    • 이런게 있군요~~

    • sombra 2019.11.17 08:34 댓글주소 수정/삭제

      승인해드렸습니다

      아니 그런데 이럴수가!!
      유심히 찾아보던 중, header-menu에 대쉬를 스타일에서 언더바로 썼더라구요! ㅠㅠㅠ
      다시 한 번 복붙의 생활화를 뼈저리게 느끼고 갑니다.
      열심히 따라듣고 또 질문할 게 생기면 댓글 달겠습니다 감사합니다.

  • pjh2688 2019.11.18 16:00 댓글주소 수정/삭제 댓글쓰기

    질문있습니다. css 유효성검사에서 에러가 났는데
    Validator
    Error
    Target: http://localhost:8080/index05
    I/O Error: Unable to contact target server localhost:8080 after 3 tries.
    이클립스로 하고 있고요 스프링부트에 있는 내장톰캣사용하는데 혹시 이거 때문에 접근을 못해서 그런건가요?

  • cobra 2019.12.11 05:43 댓글주소 수정/삭제 댓글쓰기

    안녕하세요~~~
    http://cobra1216.dothome.co.kr/web/index.html
    IR효과에 대해서 이해가 잘 안되는데 이미지를 만드는 툴하고 공부할수있는곳이 있을까요??