[2021/12/27]국비지원 CSS3 7-(1) N사 오늘의 키친 2

 

과제로 제출한 내용

 

 

 

2022.01.30 - [개발입문뉴비의 기록 ( FrontEnd )/html] - [2021/12/14]국비지원 HTML5 코딩툴 기본학습 6-(3) 수업 중 과제 : N사 오늘의 키친 페이지 마크업

[2021/12/14]국비지원 HTML5 코딩툴 기본학습 6-(3) 수업 중 과제 : N사 오늘의 키친 페이지 마크업

 

 

 

마찬가지로 이 파일을 이어서 작업함

 

---

 

작업내용 (sub.css)

@import url(reset.css);
/* sub.css */
/* common */
body{font-size:12px;font-family:Dotum,"돋움",sans-serif;color: #000;}
strong{font-weight:bold;}
a{text-decoration: none;}
a:hover{text-decoration: none;color: red;}
/* layout */
#wrap{width:956px;border:1px solid red;margin:0 auto;line-height:150%;}
#header{width:956px;background: url(../images/logo_bg.gif) repeat-x 0 0; margin-bottom: 20px;}
#container{width:956px;text-align:justify;}
#container::after{content:"";display:block;clear:both;}
    .snb{width: 140px;border:1px solid red;float:left;margin-right:10px;}
    #content{width:800px;float:right;border:1px solid red;}
.blog{vertical-align: middle;}


/* header */
#header>h1{padding: 5px 0;border-bottom:1px dashed #ddd;}

/* container */
/* snb */
.snb>h2{font-size: 25px;font-weight: bold;margin: 10px 0;}
.snb>ul>li{border-top: 1px solid #ddd;padding: 5px 0;}
.snb>ul>li a{color: #666;font-weight: bold;}

/* content */
/* 타이틀 */
#content>h2{padding: 0 0 15px;border-bottom: 1px solid #ddd;}
#content>h3{margin-bottom: 20px;}
/* 블로그 소개 */
.txt{width:800px;line-height: 180%;}
.txt img{float:left;margin-right:10px;}
.txt span{display:block;}

/* 키워드 */
div.onkywd{float:left;width:338px;height:425px;background: url(../images/tue_list_bg.gif) no-repeat 0 0;
            margin:20px 30px 20px 0;position:relative;}
.onkywd>h4{font-size: 24px;font-weight:bold;padding: 20px 0;text-align: center;}
.onkywd>h4>span{color: red;}
.onkywd>ol>li{margin-left:50px;padding:7px 0 7px}
.onkywd>ol a{position:absolute;right:20px;color: gray;}

/* 메뉴 */
dt strong{display:block;padding-bottom: 4px 0;}
dd{line-height:160%;}
dd a{display:block;color:red;padding: 10px 0;}
.menu1{width:430px; float:right;}
.menu1>dt img, .menu2>dt img{float:left;padding-right: 10px;}

.menu2{clear:both;padding-top: 30px;}

/* 담아가기 */
.blog{border-top:1px solid #ddd;background: url(../images/bu_arw1.gif) no-repeat 0 20px;
    padding:20px;margin-left: 156px; float:left; }

/* footer */

 

 

 

---

 

결과물 ( 영역 치라 그래서 친 거 )