Page 551 - MDP2022-3

width: 200px;
height: 200px;
}

.f>.f-side {
margin: auto;
}

11.<message.css>
/* 쪽지 작성 영역 사이즈 및 가운데 정렬 */
#message_box {width: 800px; margin: 0 auto;}

/* 제목줄의 마진 및 아래 경계선 */
#message_box h3{margin-top: 30px; padding: 10px; border-bottom: solid 2px #516e7f; font-size:
30px;}

/* 인풋영역들의 좌우 패딩 */
#wirte_msg{padding: 0 20px;}

/* 라벨 영역과 input영역들의 span요소의 사이즈 조절을 위해 inline-block으로 */
#write_msg span{display: inline-block;}

/* 라벨영역 가로사이즈 */
#write_msg .col1 {width: 150px;}

/* 각 줄마다 아래쪽에 경계선 그리기 */
#write_msg li{border-bottom: solid 1px #dddddd; padding: 12px;}

/* input요소의 사이즈 */
#write_msg input {width: 500px; height: 25px;}

/* textarea의 사이즈*/
#write_msg textarea {width: 500px; height: 150px;}

/* textarea의 라벨글씨가 아래쪽에 배치되기에 이를 수정하기 위해 absolute position 사용*/
#write_msg #textarea {position: relative; height: 158px;}
#write_msg #textarea .col1 {position: absolute; top: 10px;}
#write_msg #textarea .col2 {position: absolute; left: 166px;}

/* 서밋버튼 */
#write_msg input[type="submit"]{margin: 15px 0 30px 210px; cursor: pointer;}

/* 수신/송신 쪽지함 오른쪽 정렬 */
#message_box .top_buttons{text-align: right; margin: 20px 0px;}
#message_box .top_buttons li{display: inline; margin-right: 20px;}
#message_box .top_buttons li a:link{text-decoration: underline; color: green;}
#message_box .top_buttons li a:visited{text-decoration: underline; color: green;}