본문 바로가기

TUTORIAL


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

16. 웹 표준 사이트 만들기(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">
    <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script" 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;}
        
        /* 블릿기호 초기화 */
        de,ul,li,ol,menu {list-style:none;}
        
        /* 제목 태그 초기화 */
        h1,h2,h3,h4,h5,h6 {font-size: 13px; font-weight: normal;}
        
        /* 테두리 초기화 */
        img {border:0 none;}
        
        /* 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 {}
        #header {height: 325px; background: url(../img/header_bg.jpg) center top repeat-x }
        #contents { }
        #footer {height: 200px; background: #333;}

        /* 컨텐츠 레이아웃 */
        #cont_nav {background-color: #f6fdff;}
        #cont_tit {background-color: #EAF7FD;}
        #cont_ban {background-color: #dceff7;}
        #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;}
        
        /* 전체 메뉴 */
        .nav {overflow: hidden; padding: 20px 0;}
        .nav > div {float: left; width: 40%;} 
        .nav > div:last-child {width: 20%;} /* ie9부터 사용가능 */
        .nav > div.last {width: 20%;}
        .nav > div h3 {font-size: 18px; color:#25a2d0; margin-bottom: 4px;}
        .nav > div ol {overflow: hidden; }
        .nav > div ol li {float: left; width: 50%; padding-bottom: 2px; }
        .nav > div.last ol li {width: 100%;}
        .nav > div ol li a:hover {text-decoration: underline;}
        
        /* 타이틀 */
        .tit {position: relative; text-align: center}
        .tit h2 {font-size: 40px; color:#2c94c4; letter-spacing: 2px; padding: 5px 0; font-family: 'Nanum Brush Script', cursive;}
        .tit .btn {display: block; width: 60px; height: 60px; background: url(img/icon.png) no-repeat 0 -600px; position: absolute; right: 0; top: 5px;}
        
        /* 배너 */
        .ban {position: relative; padding: 24px 0 20px;}
        .ban a.prev {position: absolute; left: -70px; top: 60px; width: 43px; height: 43px; background: url(img/icon.png) -150px 0}
        .ban a.next {position: absolute; right: -70px; top: 60px; width: 43px; height: 43px; background: url(img/icon.png) -150px -43px}
        .ban a.prev:hover {background-position: -193px 0;}
        .ban a.next:hover {background-position: -193px -43px;}
        .ban ul {overflow: hidden;}
        .ban ul li {float: left; width: 330px;}
        .ban ul li:nth-child(2) {text-align: center;} /* ie9부터 적용 */
        .ban ul li:last-child {text-align: right;} /* ie9부터 적용 */
        .ban ul li.ban_img1 {text-align: left;}
        .ban ul li.ban_img2 {text-align: center;}
        .ban ul li.ban_img3 {text-align: right;}
        .ban ul li img {border: 4px solid #dcdcdc;}
        .ban ul li img:hover {border-color: #98bcdc;}
    </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">
                <div class="container">
                    <h2 class="ir_su">전체 메뉴</h2>
                    <div class="nav">
                        <div>
                            <h3>HTML Reference</h3>
                            <ol>
                                <li><a href="#">HTML 태그(Tag)</a></li>
                                <li><a href="#">블록 요소/인라인 요소</a></li>
                                <li><a href="#">DTD 선언</a></li>
                                <li><a href="#">언어 속성 설정</a></li>
                                <li><a href="#">HTML <title></a></li>
                                <li><a href="#">HTML <meta></a></li>
                                <li><a href="#">특수문자</a></li>
                                <li><a href="#">하이퍼 링크</a></li>
                                <li><a href="#">HTML <style></a></li>
                                <li><a href="#">HTML <html></a></li>
                                <li><a href="#">HTML <head></a></li>
                                <li><a href="#">HTML <div></a></li>
                                <li><a href="#">HTML <colgroup></a></li>
                                <li><a href="#">HTML <caption></a></li>
                            </ol>
                        </div>
                        <div>
                            <h3>CSS Reference</h3>
                            <ol>
                                <li><a href="#">CSS 선택자</a></li>
                                <li><a href="#">CSS 단위</a></li>
                                <li><a href="#">CSS 색상</a></li>
                                <li><a href="#">CSS 선언 방법</a></li>
                                <li><a href="#">상대주소와 절대주소</a></li>
                                <li><a href="#">CSS float</a></li>
                                <li><a href="#">이미지 표현 방법</a></li>
                                <li><a href="#">이미지 스프라이트</a></li>
                                <li><a href="#">IR 효과</a></li>
                                <li><a href="#">이미지 최적화</a></li>
                                <li><a href="#">background-color</a></li>
                                <li><a href="#">border-style</a></li>
                                <li><a href="#">font-size</a></li>
                                <li><a href="#">text-align</a></li>
                            </ol>
                        </div>
                        <div class="last">
                            <h3>Webstandard</h3>
                            <ol>
                                <li><a href="#">웹 표준</a></li>
                                <li><a href="#">웹 접근성</a></li>
                                <li><a href="#">W3C</a></li>
                                <li><a href="#">웹 접근성 연구소</a></li>
                                <li><a href="#">네이버 널리</a></li>
                                <li><a href="#">다음 다룸</a></li>
                                <li><a href="#">Webstandard</a></li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <!-- //cont_nav -->
            
            <div id="cont_tit">
                <div class="container">
                    <div class="tit">
                        <h2>“나는 퍼블리셔다!”</h2>
                        <a href="#" class="btn"><span class="ir_pm">전체메뉴</span></a>
                    </div>
                </div>
            </div>
            <!-- //cont_tit -->
            
            <div id="cont_ban">
                <div class="container">
                    <div class="ban">
                        <a href="#" class="prev"><span class="ir_pm">이전 이미지</span></a>
                        <ul>
                            <li class="ban_img1"><a href="#"><img src="img/banner_link1.jpg" alt="웹 표준 지침서 보기"></a></li>
                            <li class="ban_img2"><a href="#"><img src="img/banner_link2.jpg" alt="CSS 버튼 만들기"></a></li>
                            <li class="ban_img3"><a href="#"><img src="img/banner_link3.jpg" alt="로그인 폼 만들기"></a></li>
                        </ul>
                        <a href="#" class="next"><span class="ir_pm">다음 이미지</span></a>
                    </div>
                </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">
    <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script" 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">
                <div class="container">
                    <h2 class="ir_su">전체 메뉴</h2>
                    <div class="nav">
                        <div>
                            <h3>HTML Reference</h3>
                            <ol>
                                <li><a href="#">HTML 태그(Tag)</a></li>
                                <li><a href="#">블록 요소/인라인 요소</a></li>
                                <li><a href="#">DTD 선언</a></li>
                                <li><a href="#">언어 속성 설정</a></li>
                                <li><a href="#">HTML <title></a></li>
                                <li><a href="#">HTML <meta></a></li>
                                <li><a href="#">특수문자</a></li>
                                <li><a href="#">하이퍼 링크</a></li>
                                <li><a href="#">HTML <style></a></li>
                                <li><a href="#">HTML <html></a></li>
                                <li><a href="#">HTML <head></a></li>
                                <li><a href="#">HTML <div></a></li>
                                <li><a href="#">HTML <colgroup></a></li>
                                <li><a href="#">HTML <caption></a></li>
                            </ol>
                        </div>
                        <div>
                            <h3>CSS Reference</h3>
                            <ol>
                                <li><a href="#">CSS 선택자</a></li>
                                <li><a href="#">CSS 단위</a></li>
                                <li><a href="#">CSS 색상</a></li>
                                <li><a href="#">CSS 선언 방법</a></li>
                                <li><a href="#">상대주소와 절대주소</a></li>
                                <li><a href="#">CSS float</a></li>
                                <li><a href="#">이미지 표현 방법</a></li>
                                <li><a href="#">이미지 스프라이트</a></li>
                                <li><a href="#">IR 효과</a></li>
                                <li><a href="#">이미지 최적화</a></li>
                                <li><a href="#">background-color</a></li>
                                <li><a href="#">border-style</a></li>
                                <li><a href="#">font-size</a></li>
                                <li><a href="#">text-align</a></li>
                            </ol>
                        </div>
                        <div class="last">
                            <h3>Webstandard</h3>
                            <ol>
                                <li><a href="#">웹 표준</a></li>
                                <li><a href="#">웹 접근성</a></li>
                                <li><a href="#">W3C</a></li>
                                <li><a href="#">웹 접근성 연구소</a></li>
                                <li><a href="#">네이버 널리</a></li>
                                <li><a href="#">다음 다룸</a></li>
                                <li><a href="#">Webstandard</a></li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <!-- //cont_nav -->
            
            <div id="cont_tit">
                <div class="container">
                    <div class="tit">
                        <h2>“나는 퍼블리셔다!”</h2>
                        <a href="#" class="btn"><span class="ir_pm">전체메뉴</span></a>
                    </div>
                </div>
            </div>
            <!-- //cont_tit -->
            
            <div id="cont_ban">
                <div class="container">
                    <div class="ban">
                        <a href="#" class="prev"><span class="ir_pm">이전 이미지</span></a>
                        <ul>
                            <li class="ban_img1"><a href="#"><img src="img/banner_link1.jpg" alt="웹 표준 지침서 보기"></a></li>
                            <li class="ban_img2"><a href="#"><img src="img/banner_link2.jpg" alt="CSS 버튼 만들기"></a></li>
                            <li class="ban_img3"><a href="#"><img src="img/banner_link3.jpg" alt="로그인 폼 만들기"></a></li>
                        </ul>
                        <a href="#" class="next"><span class="ir_pm">다음 이미지</span></a>
                    </div>
                </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-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;}

/* 전체 메뉴 */
.nav {overflow: hidden; padding: 30px 0;}
.nav > div {float: left; width: 40%;} 
.nav > div:last-child {width: 20%;} /* ie9부터 사용가능 */
.nav > div.last {width: 20%;}
.nav > div h3 {font-size: 18px; color:#25a2d0; margin-bottom: 4px;}
.nav > div ol {overflow: hidden; }
.nav > div ol li {float: left; width: 50%; padding-bottom: 2px; }
.nav > div.last ol li {width: 100%;}
.nav > div ol li a:hover {text-decoration: underline;}

/* 타이틀 */
.tit {position: relative; text-align: center}
.tit h2 {font-size: 40px; color:#2c94c4; letter-spacing: 2px; padding: 5px 0; font-family: 'Nanum Brush Script', cursive;}
.tit .btn {display: block; width: 60px; height: 60px; background: url(img/icon.png) no-repeat 0 -600px; position: absolute; right: 0; top: 5px;}

/* 배너 */
.ban {position: relative; padding: 24px 0 20px;}
.ban a.prev {position: absolute; left: -70px; top: 60px; width: 43px; height: 43px; background: url(img/icon.png) -150px 0}
.ban a.next {position: absolute; right: -70px; top: 60px; width: 43px; height: 43px; background: url(img/icon.png) -150px -43px}
.ban a.prev:hover {background-position: -193px 0;}
.ban a.next:hover {background-position: -193px -43px;}
.ban ul {overflow: hidden;}
.ban ul li {float: left; width: 330px;}
.ban ul li:nth-child(2) {text-align: center;} /* ie9부터 적용 */
.ban ul li:last-child {text-align: right;} /* ie9부터 적용 */
.ban ul li.ban_img1 {text-align: left;}
.ban ul li.ban_img2 {text-align: center;}
.ban ul li.ban_img3 {text-align: right;}
.ban ul li img {border: 4px solid #dcdcdc;}
.ban ul li img:hover {border-color: #98bcdc;}



































@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;}

/* 블릿기호 초기화 */
dl,ul,li,ol,menu {list-style:none;}

/* 제목 태그 초기화 */
h1,h2,h3,h4,h5,h6 {font-size: 13px; font-weight: normal;}

/* 테두리 초기화 */
img {border:0 none;}

/* 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.20 12:27 댓글주소 수정/삭제 댓글쓰기

    http://smiling88.dothome.co.kr/web/index.html
    강의 잘 보고 있습니다. 하신 말씀대로, 익숙해질때까지 여러번 따라 해보고 스스로 구조를 짜보는게 정답인거 같아요 . 그리고 어디에서 틀어지는지 왜 안되는지 찾다보면 실력이 조금 늘었다는게 느껴지네요--ㅋ
    얼른 진도 나가서 제이쿼리, 자바스크립트도 강의 하셨으면 ^^;;; 하는 욕심이

  • mdymky 2019.01.05 17:13 댓글주소 수정/삭제 댓글쓰기

    http://mdymky.dothome.co.kr/web/index.html
    강의 정말 잘보고 있습니다. 아직까지 완벽히 이해는 되지 않는데요. 꾸준히 해야겠습니다.
    말씀을 조금만 천천히 해주시면 감사하겠습니다.^^

  • IngNum 2019.01.14 11:25 댓글주소 수정/삭제 댓글쓰기

    http://lch782.dothome.co.kr/layout/index.html
    열심히 따라 가고 있습니다
    저번 강의에 아래 버튼이 저는 밑으로 내려가서 패딩값을 조금 더 주고 top값도 조금 바꿧어요 ㅠ
    그리고 강의 하시는게 재밋고 따라가는게 쉬워서 아는 동생한테도 추천했습니다 항상 감사합니다

  • ricky 2019.01.28 21:49 댓글주소 수정/삭제 댓글쓰기

    이미지 위치가 틀려요! ../img/icon.png
    오류가 나서 계속 찾아봤는데 solid를 soild라 쳤네요. 좋은 강의 정말 감사합니다>_<

  • chan 2019.02.25 18:44 댓글주소 수정/삭제 댓글쓰기

    http://cw3355.dothome.co.kr/web/index.html
    똑같이한거같은데 이상하네요..ㅜ

  • 양영미 2019.05.01 19:55 댓글주소 수정/삭제 댓글쓰기

    질문 있습니다~ 이미지 배너 를 ul을 사용하여 리스트로 표기하셨는데 ul을 쓰지않고 img로 바로넣어도 나오는데 왜 그렇게 하는건가요?

    • 네 상관없습니다. 써도 되고 안 써도 됩니다. 코딩을 오래하다보면 자기만의 스타일이 있기 때문에 자기 스타일데로 하셔도 됩니다.

  • 서지민 2019.05.23 02:18 댓글주소 수정/삭제 댓글쓰기

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

    배너 이미지가 가로로 정렬되지 않고 1,3번이 아래위로 정렬이되요ㅠ

  • SYS 2019.05.29 16:38 댓글주소 수정/삭제 댓글쓰기

    도움이 많이 되네요~! 재밌어요:)
    http://stisthaha.dothome.co.kr/web/index.html#

  • healthy 2019.07.05 16:45 댓글주소 수정/삭제 댓글쓰기

    강의 열심히 보고 있는데요. 너무 감사합니다.^^ 강의를 보면서 정렬때문에 너무 헷갈려요. text-align은 inline구조에서만 사용하고 float는 block구조에서만 사용하는게 맞나요?^^;

    • text-align은 글씨나 그림을 정렬할 때 사용합니다.float은 블록 구조를 정렬할 때 사용하구요~
      처음이라 헷갈릴수 있는데요~ 반복하면~~~ 완강할 때쯤이면 이해가 다 될겁니다.^^

  • http://yjshin.dothome.co.kr/web/index.html#
    등록~

  • 김영호 2019.08.15 21:38 댓글주소 수정/삭제 댓글쓰기

    좋은강의 항상 잘 보고있습니다. 정말 많은 도움이 됩니다. 감사합니다!
    http://kyh174.dothome.co.kr/web/index.html#