연습글을 쓰면서 종종 박스 처리를 하고 싶을 때가 있는데 아마도 여러 방법이 있겠지만 div 태그를 이용해서 간단히 만들어 볼 수 있다. 나중에 막상 사용하려고 보면 생각도 잘 안 나고 찾기도 번거로우니 주로 사용할 만한 스타일 요소로 연습해 보기.
<div style="width:①; padding:②; border:③ ④ ⑤; background-color:⑥; text-align:⑦; margin:0 auto"> 글 내용 </div>
① 너비(폭). 본문보다 작게 설정하면 박스가 왼쪽에 붙는데 박스를 가운데 정렬하려면 margin:0 auto 삽입
② 상하좌우 여백 크기
③ 선 두께(숫자). 두줄 실선(double)은 3px부터 적용
④ 선 종류 : 실선(solid), 점선(dotted), 파선(dashed), 두줄 실선(double)
⑤ 선 색깔 : 색깔 영문명(black, white, yellow, green 등) 또는 #RGB 값
⑥ 바탕 색깔 : 색깔 영문명(black, white, yellow, green 등) 또는 #RGB 값
⑦ 텍스트 정렬 : left, right, center
1. <div style="border: 1px solid red;">빨간 실선 상자</div>
2. <div style="border: 1px dotted blue;">파란 점선 상자</div>
3. <div style="padding: 10px; border: 1px dashed #000000;">10px 여백 검정 파선 상자</div>
4. <div style="padding: 15px; border: 3px double #00ff00;">15px 여백 녹색 두줄(3px 이상) 실선 상자</div>
5. <div style="padding: 20px; background-color: #eeeeee;">20px 여백 선 없는 회색 바탕 상자</div>
6. <div style="padding: 25px; border: 1px solid black; background-color: gray;">25px 여백 검은선 회색 바탕 상자</div>
7. <div style="width: 80%; padding: 15px; border: 1px solid balck; background-color: #cccccc; text-align: center; margin: 0 auto;">너비가 80%인 상자 가운데 정렬 및 텍스트 가운데 정렬</div>