[css] css 연습1

/* subscription */

.sub_notice_div { width:735px; background-color:#F4F4F4; height:37px; vertical-align:middle; padding-top:20px;

                  font-size:13.5px; text-align:center; border-top:2px solid #454545; }

.sub_input_tbl { width:735px; /* text-align:center; padding-top:30px; padding-bottom:20px; */ border-bottom:2px solid #CACACA; margin-bottom:20px; }

.sub_input_tbl th,

.sub_input_tbl td { /* padding:5px; */ text-align:left; }

.sub_input_tbl .tbl_1st { padding:30px 0 10px 0; }

.sub_input_tbl .tbl_2nd { padding:0 0 30px 0; }

.sub_input_tbl input { width:155px; height:30px; text-indent:6px; vertical-align:middle; line-height: 30px; float:left; }

.sub_input_tbl img { float:right; }

.sub_notice_div2 { width:735px; text-align:center; vertical-align:middle; padding:20px 0; }

.title_div { vertical-align:middle; height:50px; }

.title_sub { font-size:2.8em; color:#232323; letter-spacing:-3px;}

#result22 h4 { margin:10px 0 20px 0; }

※ 설명

/* subscription */

.sub_notice_div { width:735px;

                         background-color:#F4F4F4;

                         height:37px;

                         vertical-align:middle;

                         padding-top:20px; /* 20px의 안쪽 상단여백 */

                         font-size:13.5px;

                         text-align:center; /* 내부 요소들을 가운데 정렬 */

                         border-top:2px solid #454545; /* 솔리드타입의 2px 두께의 테두리를 생성 */

                       }

.sub_input_tbl { width:735px; /* text-align:center; padding-top:30px; padding-bottom:20px; */ border-bottom:2px solid #CACACA; margin-bottom:20px; }

.sub_input_tbl th,

.sub_input_tbl td { /* padding:5px; */ text-align:left; }

.sub_input_tbl .tbl_1st { padding:30px 0 10px 0; /* 내부 안쪽 여백, 순서는 (위 우 아래 좌) 시계 방향 */ }

.sub_input_tbl .tbl_2nd { padding:0 0 30px 0; }

.sub_input_tbl input { width:155px; height:30px; text-indent:6px; /* input 요소 안에 글자 들여쓰기 */

                               vertical-align:middle; line-height: 30px; float:left; /* 왼쪽으로 강제로 붙여버리는 스타일 요소 */ }

.sub_input_tbl img { float:right; /* 오른쪽으로 강제로 붙여버린다. */ }

.sub_notice_div2 { width:735px; text-align:center; vertical-align:middle;

                           padding:20px 0; /* 안쪽 여백, 두개만 쓰면 순서는 (상하 좌우)가 된다. */ }

.title_div { vertical-align:middle; /* 안쪽 요소들을 세로로 가운데 정렬 한다. */

               height:50px; }

.title_sub { font-size:2.8em; /* em요소는 글자를 기준 사이즈 에서 2.8배로 키우는 역할을 함 */

                color:#232323; letter-spacing:-3px; /* 글자의 좌우 자간을 줄인다. */ }

#result22 h4 { margin:10px 0 20px 0; /* 바깥쪽 여백을 주며, 순서는 padding과 동일 */ }