안녕하세요 지금 아래 보시는 표와 같이 css 이용한 표를 만들고 싶습니다!
혼자서 인터넷을 뒤져서 이래 저래 만드어 봤습니다!
css 코드
.box {
width:800px;
height:96px;
background:#666465;
text-align: left;
color: white;
font-size:16px;
font-family:돋움;
font-weight:bold;
}
.box1 {
width:300px;
height:200px;
background:#29a7e1;
line-height:200px;
text-align:center;
color: white;
font-size:16px;
font-family:돋움;
font-weight:bold;
border:2px solid #c6c6c6;
margin:5px 0px 0px 0px;
float:left;
}
.box2 {
width:796px;
height:200px;
background:#ffffff;
line-height:200px;
text-align:center;
color: 000000;
font-size:16px;
font-family:돋움;
font-weight:bold;
border:2px solid #c6c6c6;
margin:5px 0px 0px 0px;
float: autot;
}
html 코드
<body>
<div class="box">noites 1</div>
<div class="box1">noites 2</div>
<div class="box2">noites 3</div>
<div class="box1">noites 4</div>
<div class="box2">noites 5</div>
<div style="clear: both"></div>
</body>
여기 까지 완성을 했는데
질문 1. noties 1 폰트 위치를 이미지가 보이는 위치에 자리 잡고 싶습니다.
질문 2. .box1 .box2 사이 2~4px 정도 공간 여백을 살짝 주고 싶은데 어떻게 해야하나요?
질문 3. 표가 화면 중앙에 배치가 되도록 하고 싶습니다!
고수님들의 많은 도움 바랍니다 ^^
답변 2개
보기 : http://gboard.deb.kr/test/stylebox.php
이런정도면 어떠신지
<style>.box { width:800px; height:96px; background:#666465; text-align: left; color: white; font-size:16px; font-family:돋움; font-weight:bold; vertial-align:middle; line-height:96px; padding-left:20px; }.box1 { width:300px; height:200px; background:#29a7e1; line-height:200px; text-align:center; color: white; font-size:16px; font-family:돋움; font-weight:bold; border:2px solid #c6c6c6; margin:5px 1px 0px 0px; float:left; }.box2 { width:488px; height:200px; background:#ffffff; line-height:200px; text-align:center; color: 000000; font-size:16px; font-family:돋움; font-weight:bold; border:2px solid #c6c6c6; margin:5px 0px 0px 3px; float: right;}.outbox1 { width:800px; text-align:center; margin:0px; padding:0px;}</style></head><body><div class="box">noites 1 [box] </div><div class="outbox1"><div class="box1">noites 2 [box1]</div><div class="box2">noites 3 [box2]</div></div><div class="outbox1"><div class="box1">noites 4 [box1]</div><div class="box2">noites 5 [box2]</div></div><div style="clear: both"></div><style>.box { width: 800px; border: 1px solid #dcdcdc; font-size: 15px; padding: 5px; background: #4CAF50; color: #fff;}.box1 { width: 200px; padding: 5px; border: 1px solid #dcdcdc; background: #607D8B; font-size: 12px; color: #fff; float: left; display: inline-block; border-top: 0px; clear: both;}.box2 { font-size: 12px; border: 1px solid #dcdcdc; border-left: 0px; padding: 5px; width: 588px; display: inline-block; border-top: 0px;}</style><div class="box">noites 1</div><div class="box1">noites 2</div><div class="box2">noites 3</div><div class="box1">noites 2</div><div class="box2">noites 3</div><div class="box1">noites 2</div><div class="box2">noites 3</div><div class="box1">noites 2</div><div class="box2">noites 3</div>답변을 작성하려면 로그인이 필요합니다.