반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>예제_복지포탈</title>
<link rel="stylesheet" href="./css/study1.css">
</head>
<body>
<!-- 전체 -->
<div class="wrap">
<!-- 상단 -->
<header>
<h1><a href="#"><img src="./images/title_3.gif" alt="복지포털로고"></a></h1>
<p>Home>우정복지증진>복지포털사이트</p>
</header>
<!-- 콘텐츠 -->
<div class="con1">
<div class="leftbox">
<img src="./images/img_01.gif" alt="복지포탈소개메일페이지스크린샷 이미지">
</div>
<div class="rightbox">
<h3><img src="./images/title_4.gif" alt="우정사업본부 복지포탈 사이트"></h3>
<h4><img src="./images/title_5.gif" alt="복지포탈사이트 소개"></h4>
<p>맞춤형 복지제도로 일방적으로 제공되는 기존 복지 서비스와는 달리 우정사업본부 복지포탈 사이트를 통해 우정종사자들의 선호와 필요성에 따라 개별적으로 자신에게 적합한 혜택을 선택하여 복지접수를 사용하는 제도에 초점을 맞춰<b>맞춤형복지,복지플라자, 수련원예액,커뮤니티 활동, 복지정보 등</b> 다양하고 알찬메뉴를 종합적이고 체계적으로 제공하고 있습니다.앞으로도 지속적으로 우정종사라 여러분들의 보다 풍요로운 삶의 질적 향상과 건전한 여가활동 증진을 위한 구심점 역할을 충실히 수행하도록 하겠습니다.</p>
</div>
</div>
<!-- 표 -->
<div class="con2">
<h4><img src="./images/title_6.gif" alt="주요서비스 안내"></h4>
<table>
<tr>
<th>분야</th>
<th>내용</th>
</tr>
<tr>
<td>맞춤형복지</td>
<td>나의 복지점수, 사용내역조회 서비스 및 사용법, 복지카드에 대한 다양한 정보를 제공합니다.</td>
</tr>
<tr>
<td>복지플라자</td>
<td>우정종사자들을 위한 각종 제휴서비스를 한눈에 확인하실 수 있습니다.</td>
</tr>
<tr>
<td>수련원</td>
<td>운영중인 수련원 소개 및 안내, 예약서비스, 이용자 참여공간이 제공됩니다.</td>
</tr>
<tr>
<td>커뮤니티</td>
<td>우정종사자분들 간의 화합을 도모하고 건강한 직장문화 조성을 위해 카페 활동을 지원합니다.</td>
</tr>
<tr>
<td>복지정보</td>
<td>법률, 문화, 건강, 부동산 관련 테마별 유용한 정보를 제공합니다.</td>
</tr>
</table>
</div>
</div>
</body>
</html>
/* reset - 대부분 태그에 들어가 있는 기본 스타일을 모두 없애주는 작업*/
*{margin:0;padding:0;}
a{text-decoration: none;color:black;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:inherit;}
b,strong{font-weight:normal;}
i,em,address{font-style:normal;}
ul,ol{list-style:none;}
/* common(공통스타일 적용) */
body{font-family: Dotum,"돋움",sans-serif;font-size:12px;}
/* layout - 영역(div태그)들의 대략적인 위치를 잡는 작업(큰영역 >> 작은영역 순서로) */
.wrap{
border:1px solid red;
width:730px;
margin:0 auto;
}
.con1{}
.leftbox{margin-right: 20px;width:320px;float:left;box-sizing: border-box;}
.rightbox{width:390px;float:left;}
.con1:after{content:"";display:block;clear:both}
/* con1 최후의 자식(없으면 가상태그로 만들어 줘야한다.)에다가 클리어 태그를 심어준다. */
.con2{}
/* header */
header{
background:url("../images/bg_top.gif") no-repeat 0 0;
}
header h1{float:left;}
header p{
float:right;margin-top: 54px;
background:url("../images/blet.gif") no-repeat 0 center;
padding-left:10px;
}
header:after{content: "";display: block;clear:both;}
/* con1 */
.rightbox>p{
margin-top: 10px;
line-height: 165%;
}
반응형
'IT > HTML&CSS' 카테고리의 다른 글
| [CSS] 티스토리 블로그 스킨 편집_글꼴(폰트) 바꾸는 방법 (2) | 2021.12.22 |
|---|---|
| [비즈니스] 아웃룩 자주쓰는 메일 서식 저장하기 (0) | 2021.12.07 |
| [CSS] box-sizing / 가상태그 After, Before / 순서선택자(2021-10-21) (0) | 2021.11.25 |
| [CSS] overflow/box-shadow/text-shadow/border-radius/opacity(2021-10-19) (0) | 2021.11.24 |
| [CSS] 박스모델 예제_Box model 공부(2021-10-12) (0) | 2021.11.24 |