17. 웹 표준 사이트 만들기(2019) - 컨텐츠 레이아웃
전체소스
index.html
...
<body>
...
<div id="contents">
...
<div id="cont_cont">
<div class="container">
<div class="cont">
<div class="column col1">
<!-- 이미지를 넣기 위해 아이콘(이미지와 대체문자 효과를 동시에 줄 수 있다.)과 Notice글자를 따로 컨트롤하기 위해 아래와 같이 입력한다. -->
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="icon_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="icon_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="icon_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="icon_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="icon_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="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
</div>
<!-- //col6 -->
</div>
</div>
</div>
<!-- //cont_cont -->
</div>
<!-- //contents -->
...
</body>
style.css
...
/* 컨텐츠 */
/* .cont { margin-top: 30px;} 을 주면 부모 태그인 cont_cont에 적용했던 색상이 적용되지 않는다. 그래서 padding-top을 준다. */
.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;}
/* 정렬이 깨지기 때문에 col3,6은 margin-right: 0; padding-right: 0; 속성을 준다. */
.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;}
/*
width값과 height값을 적용하기 위해 블록 속성을 준다.
그리고 position: absolute를 주면 영역이 사라지기 때문에 텍스트를 옆으로 오게 할 수 있다. absolute는 거의 90%는 relative랑 같이 사용한다.
*/
.cont .column .ico_img {display: block; width: 60px; height: 60px; background: url(../img/icon.png) no-repeat; position: absolute; left: 0; top: 0;}
/* 이미지는 영역이 없어졌기 때문에 겹치므로 아래와 같이 padding-left: 70px;을 준다. */
.cont .column .ico_tit {padding-left: 70px; font-size: 16px; color: #2c94c4;}
.cont .column .icon_desc {padding-left: 70px; border-bottom: 1px solid #d0d0d0; padding-bottom: 15px;}
.cont .col1 .ico_img {background-position: 0px -240px;}
.cont .col2 .ico_img {background-position: 0px -300px;}
.cont .col3 .ico_img {background-position: 0px -360px;}
.cont .col4 .ico_img {background-position: 0px -420px;}
.cont .col5 .ico_img {background-position: 0px -480px;}
.cont .col6 .ico_img {background-position: 0px -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;}
'IT공부 > HTML & CSS' 카테고리의 다른 글
| 19. 웹 표준 사이트 만들기(2019) - 게시판2 (0) | 2020.06.18 |
|---|---|
| 18. 웹 표준 사이트 만들기(2019) - 게시판 (0) | 2020.06.18 |
| 16. 웹 표준 사이트 만들기(2019) - 전체 타이틀 (0) | 2020.06.18 |
| 15. 웹 표준 사이트 만들기(2019) - 전체 타이틀 (0) | 2020.06.17 |
| 14. 웹 표준 사이트 만들기(2019) - 전체 메뉴 수정 (0) | 2020.06.17 |
