css 관련 문의 입니다!!
본문
안녕하세요 지금 아래 보시는 표와 같이 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>