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

 

 

 

 

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

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

 

 

 

이 때의 파일을 이어서 작업했고, html 파일의 오류가 발견돼서 수정이 좀 있었던 상황

원본은 저 링크에 가시면 있다.

 

 

---

 

 

작업내용 ( css / reset.css는 직전 포스팅의 그 것과 동일 )

@import url(reset.css);
/* sub.css */
/* common */
body{font-size:12px;font-family:Dotum,"돋움",sans-serif;color: #666;}
label,textarea{vertical-align:middle;}

/* layout */
#wrap{width:980px;border:1px solid red;margin:0 auto;line-height:150%;}
#container{width:980px;}
#container::after{content:"";display:block;clear:both;}
    div.snb{width:130px;border:1px solid green;float:left;margin:0 30px 0 0;
            padding:20px 10px 0;}
    #content{width:770px;border:1px solid blue;float:right;margin:0 0;}

/* header */
/* container */
/* snb */
/* 추가 */ .snb>span{display:block;margin: 20px 0;}
.snb>h2{margin:20px 0 0;}
    .nav>li{border-bottom:1px solid gray;line-height: 200%;}
.snb>h3{margin:20px 0 0;}
/* 추가1 */ .snb input{width:100px;height:15px;margin:3px 0;}
/* 추가2 */ .snb input[type="image"]{width:20px;height:22px;}
/* 속성선택자 input[속성="값"] */
/* content */
#content>h2{margin-bottom:20px;clear:both;}
/* 추가주석: 블로거소개 */
dl.bloger{width:769px;margin: 0 0 20px;line-height:150%;}
/* 추가 */.bloger::after{content: "";display: block;clear: both;}
.bloger>dt{font-size:15px;margin-bottom:20px;}
.bloger>dt>strong{color:orange;}
.bloger>dt,.bloger>dd.txt,.bloger>dd.txt a{width: 610px;float:right;}
.bloger>dd.img{float:left;}
/* 추가주석:qna */
dl.introduce{width:769px;margin:20px 0 20px;clear:both;line-height:150%;}
.introduce>dt{background:url(../images/ico_q.gif) no-repeat 0 47%;padding: 15px 20px}
.introduce>dd{background:url(../images/ico_a.gif) no-repeat 0 0;padding: 0 20px;}
/* 추가주석: 레시피소개 */
div.recipe{width:769px;margin:0 0 50px;line-height: normal;}
div.recipe::after{content:"";display:block;clear:both;}
.recipe>h3{float:left;}
.recipe dt{font-weight:bold;padding-bottom:5px;}
.recipe a{display:block;}
/* 사이즈 수정 */
.float_L{width:345px;border-right:2px dashed slateblue;float:left;padding-right:30px;}
.float_L dl{width:345px;margin:0 10px 0 0;}
.float_L dt,.float_L dd.txt{float:right;width: 241px;}
.float_L dd.img,.float_R dd.img{float:left;}
.float_R{width: 360px;float:right;}
.float_R dl{width:360px}
.float_R dt,.float_R dd.txt{width: 260px;float:right;}
/* 추가주석:덧글남기기 사이즈 및 보더, 거의 전체 수정 +상위자 잘못 지정*/
#content>form{width:770px;border-top:1px solid gray;padding:20px 0 50px;}
#content>form p{float:left;}
#content>form span{float:right;}
.reply{clear:both; width:721px;height:86px;background:url(../images/bg_reply_box.gif) no-repeat 0 0;
        margin-top:10px;margin-left:5px; padding-top:20px; padding-left: 40px;}
.reply>label{float:left;}
.reply>textarea{width: 500px;height:50px;float:left;margin:0px 10px}
.reply>input{float:left;}
/* footer */

 

 

---

 

 

결과물 ( border 그어놓으라 해서 그은 거 )