티스토리 뷰

CSS

웹 표준 사이트를 만들자 - 컨텐츠 레이아웃

Gayeong's 2022. 2. 3. 08:43

HTML

 <div id="cont_cont">
                <div class="container">
                    <div class="cont">
                        <div class="column col1">
                            <h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
                            <p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
                        </div>
                        <!-- //col1 -->
                        <div class="column col2">
                            <h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
                            <p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
                        </div>
                        <!-- //col2 --> 
                        <div class="column col3">
                            <h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
                            <p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
                        </div>
                        <!-- //col3 -->
                        <div class="column col4">
                            <h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
                            <p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
                        </div>
                        <!-- //col4 -->
                        <div class="column col5">
                            <h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
                            <p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
                        </div>
                        <!-- //col5 -->
                        <div class="column col6">
                            <h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
                            <p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
                        </div>
                        <!-- //col6 -->
                    </div>
                </div>
            </div>
        </div>
        <!-- //contents -->

CSS

/* 컨텐츠 */
.cont {overflow: hidden;padding-top: 30px;}
.cont .column {position: relative; float: left; width: 289px; height: 363px; 
    margin: 0 30px 30px 0; padding-right: 30px; }
.cont .col1 {border-right: 1px solid #c8c8c8;}
.cont .col2 {border-right: 1px solid #c8c8c8;}
.cont .col3 {margin-right: 0; padding-right: 0;}
.cont .col4 {border-right: 1px solid #c8c8c8;}
.cont .col5 {border-right: 1px solid #c8c8c8;}
.cont .col6 {margin-right: 0; padding-right: 0;}
	/* 컨텐츠 아이콘*/
.cont .column .ico_img {display: block; width: 60px; height: 60px;
background: url(../img/icon.png) no-repeat; position: absolute; left: 0; top: 0;}
.cont .column .ico_tit {padding-left: 70px; font-size: 16px; color: #2c94c4;}
.cont .column .ico_desc {padding-left: 70px; border-bottom: 1px solid #d0d0d0; padding-bottom: 15px;}
	/* 컨텐츠 마우스오버 */
.cont .col1 .ico_img {background-position: 0 -240px;}
.cont .col2 .ico_img {background-position: 0 -300px;}
.cont .col3 .ico_img {background-position: 0 -360px;}
.cont .col4 .ico_img {background-position: 0 -420px;}
.cont .col5 .ico_img {background-position: 0 -480px;}
.cont .col6 .ico_img {background-position: 0 -540px;}
.cont .col1 .ico_img:hover {background-position: -60px -240px;}
.cont .col2 .ico_img:hover {background-position: -60px -300px;}
.cont .col3 .ico_img:hover {background-position: -60px -360px;}
.cont .col4 .ico_img:hover {background-position: -60px -420px;}
.cont .col5 .ico_img:hover {background-position: -60px -480px;}
.cont .col6 .ico_img:hover {background-position: -60px -540px;}

 

전체 HTML

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="최가영">
    <meta name="description" content="웹 표준을 준수한 사이트 예제입니다.">
    <meta name="keywords" content="웹스토리보이, 웹표준, 웹접근성, 사이트 만들기">
    <meta name="generator" content="brakets">
    <title>[WEBSTROYBOY SITE]</title>

    <!-- CSS STYLE -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">

    <!-- 웹 폰트 -->
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap" 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">
            <div class="container">
                <div class="header">
                    <div class="header-menu">
                        <a href="https://wiss.tistory.com">Desinger</a>
                        <a href="https://webstoryboy">Publisher</a>
                        <a href="https://www.youtube.com">Youtube</a>
                    </div>
                    <!-- //헤더 메뉴 -->
                    <div class="header-tit">
                        <h1>Professional Publisher &amp; Desinger</h1><br>
                        <a href="https://webs-blog.tistory.com/">webs-blog.tistory.com</a>
                    </div>
                    <!-- //헤더 타이틀 -->
                    <!-- 이미지를 표현하는 방법 
                        1.img 태그로 표현 (의미가 있을 때) / alt 태그 - 대체 문자 표현 
                        2.backgroun 속성으로 표현(의미가 없을 때) / - 대체 문자 필요X(장식용이라서)
                        3.이미지를 backgraund 속성(을 넣고) / 웹 표준 준수를 위해 가상으로 대체 문자를 만들어줌(IR 효과)
                            이미지 스포라이트: 이미지 img로 넣는게 아니라 백그라운드 한번에 모든 이미지를 넣음
                            -작업하기 편하고 이미지 용량이 줄어들음 
                            -이 기법을 쓰면 웹 표준을 준수 할 수 없어서 IR효과를 씀

                        웹 접근성
                        1.img등의 이미지를 나타내는 태그를 쓰게되면 꼭 alt(대체문자)를 써야한다
                     -->
                    <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>
            <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>
            <div id="cont_bna">
                <div class="container">
                    <div class="ban">
                        <a href="#" class="prev"><span class="ir_pm">이전 이미지</span></a>
                        <ul>
                            <li class="ban_img1"><a href="#"></a><img src="img/banner_link1.jpg" alt="웹 표준 지침서 보기"></li>
                            <li class="ban_img2"><a href="#"></a><img src="img/banner_link2.jpg" alt="CSS 버튼 만들기"></li>
                            <li class="ban_img3"><a href="#"></a><img src="img/banner_link3.jpg" alt="로그인 폼 만들기"></li>
                        </ul>
                        <a href="#" class="next"><span class="ir_pm">다음 이미지</span></a>
                    </div>
                </div>
            </div>
            <div id="cont_cont">
                <div class="container">
                    <div class="cont">
                        <div class="column col1">
                            <h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
                            <p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
                        </div>
                        <!-- //col1 -->
                        <div class="column col2">
                            <h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
                            <p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
                        </div>
                        <!-- //col2 --> 
                        <div class="column col3">
                            <h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
                            <p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
                        </div>
                        <!-- //col3 -->
                        <div class="column col4">
                            <h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
                            <p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
                        </div>
                        <!-- //col4 -->
                        <div class="column col5">
                            <h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
                            <p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
                        </div>
                        <!-- //col5 -->
                        <div class="column col6">
                            <h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
                            <p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
                        </div>
                        <!-- //col6 -->
                    </div>
                </div>
            </div>
        </div>
        <!-- //contents -->

        <div id="footer">
            <div class="container">footer</div>
        </div>
        <!-- //footer -->

    </div>
    <!-- //wrap -->
</body>

</html>

전체 CSS

@charset "UTF-8";

/* 스킵 내비게이션 */
#skip {position: relative;}
#skip a {position: absolute; left: 0px; top: -35px; width: 200px; 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-color: #111; background: url(../img/header_bg.jpg) center top repeat-x ;}
#contents { background-color: #dceff7;}
#footer { background-color: #f6fdff;}

/* 컨텐츠 레이아웃 */
#cont_nav {background-color: #f6fdff;}
#cont_tit {background-color: #EAF7FD;}
#cont_ban {background-color: #dceff7;}
#cont_cont {background-color: #f6fdff;}

/* 컨테이너 */
.container {width: 990px; margin: 0 auto; height: inherit;   /* background-color: 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 { background-color: #4aa8d4; font-size: 28px; padding: 5px 20px 6px 20px; display: inline-block; color: #fff; 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: 0 0;}
.header .header-icon a.icon2 {background-position: 0 -60px;}
.header .header-icon a.icon3 {background-position: 0 -120px;}
.header .header-icon a.icon4 {background-position: 0 -180px;}
.header .header-icon a.icon1:hover {background-position: -60px 0;}
.header .header-icon a.icon2:hover {background-position: -60px -60px;}
.header .header-icon a.icon3:hover {background-position: -60px -120px;}
.header .header-icon a.icon4:hover {background-position: -60px -180px;}

/* flaot: left로 인한 영역꺠짐(height:0) 방지법 
1.깨지는 영역에 똑같이 float:left를 사용한다(x) --> 모든 박스에 float:left를 사용하게 됩니다.
2.float의 성질을 차단하는 clear:both;를 사용한다(x) --> 어떤 영역이 깨졌는 지 찾기 어려움
3.float을 사용한 상위 박스한테 overflow:hidden을 사용합니다.(0) --> 현재는 제일 많이 사용 
    - 2단 메뉴 같은 것 쓸 때 사용(x) overflow:hidden: 지정한 영역외에는 보이지 않게 해줌
4.clearfix를 사용합니다(0)    
*/

/* 전체 메뉴 */
.nav {overflow: hidden; padding: 30px 0;}
.nav > div {float: left; width: 40%;}  /* > : 첫번 째 자식한테만 효과줌 */
.nav > div:last-child {width: 20%;} /* :last-child ie9부터 사용 가능 */
.nav > div.last {width: 20%;} 
.nav > div h3 {font-size: 18px; color: #25a2d0; margin-top: 4px;}
.nav > div ol {overflow: hidden;}
.nav > div ol li {float:left; width: 50%;}
.nav > div.last ol li {width: 100%;}
.nav > div ol li a:hover {text-decoration: underline;}

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

/* 배너 */
.ban {position: relative; padding: 24px 0 20px;}
.ban a.prev {position: absolute; left: -60px; top: 60px; width: 43px; height: 43px; 
    background: #ccc; background: url(../img/icon.png) no-repeat -150px 0;}
.ban a.next {position: absolute; right: -60px; top: 60px;  width: 43px; height: 43px; 
    background: #ccc; background: url(../img/icon.png) no-repeat -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:last-child {text-align: right;} /*ie9부터 적용*/
.ban ul li:nth-child(2) {text-align: center;} /*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;}

/* 컨텐츠 */
.cont {overflow: hidden;padding-top: 30px;}
.cont .column {position: relative; float: left; width: 289px; height: 363px; 
    margin: 0 30px 30px 0; padding-right: 30px; }
.cont .col1 {border-right: 1px solid #c8c8c8;}
.cont .col2 {border-right: 1px solid #c8c8c8;}
.cont .col3 {margin-right: 0; padding-right: 0;}
.cont .col4 {border-right: 1px solid #c8c8c8;}
.cont .col5 {border-right: 1px solid #c8c8c8;}
.cont .col6 {margin-right: 0; padding-right: 0;}

.cont .column .ico_img {display: block; width: 60px; height: 60px;
background: url(../img/icon.png) no-repeat; position: absolute; left: 0; top: 0;}
.cont .column .ico_tit {padding-left: 70px; font-size: 16px; color: #2c94c4;}
.cont .column .ico_desc {padding-left: 70px; border-bottom: 1px solid #d0d0d0; padding-bottom: 15px;}

.cont .col1 .ico_img {background-position: 0 -240px;}
.cont .col2 .ico_img {background-position: 0 -300px;}
.cont .col3 .ico_img {background-position: 0 -360px;}
.cont .col4 .ico_img {background-position: 0 -420px;}
.cont .col5 .ico_img {background-position: 0 -480px;}
.cont .col6 .ico_img {background-position: 0 -540px;}
.cont .col1 .ico_img:hover {background-position: -60px -240px;}
.cont .col2 .ico_img:hover {background-position: -60px -300px;}
.cont .col3 .ico_img:hover {background-position: -60px -360px;}
.cont .col4 .ico_img:hover {background-position: -60px -420px;}
.cont .col5 .ico_img:hover {background-position: -60px -480px;}
.cont .col6 .ico_img:hover {background-position: -60px -540px;}

'CSS' 카테고리의 다른 글

CSS 셋팅 - 공통 common 설정  (0) 2022.04.17
CSS 선택자 공부할 때 추천 - [게임] CSS Speedrun  (0) 2022.02.06
웹 사이트에서 이미지를 표현하는 방법  (0) 2022.01.27
CSS 단위  (0) 2022.01.26
CSS란?  (0) 2022.01.26

UP NEXT : CSS

댓글
© 2018 webstoryboy