그누보드 QA - CSS3에서요 border에 관해서 여쭤볼게 있어서요...

CSS3에서요 border에 관해서 여쭤볼게 있어서요...

2017.01.05 00:03:56 조회 3516 (175.♡.♡.77)

본문

제가 위 그림처럼 <div>에서 row를 잡고 만들고 싶은데요...

제가 코딩한거는 아래와 같습니다.

<div class="container">
<div class="row">
   <div class="col-md-3" style="border-bottom:solid 1px; border-bottom-color:#3f51b5; margin-top:102px">
   </div>
   <div class="col-md-6" style="text-align:center; border-bottom:solid 3px; border-bottom-color:#3f51b5; margin-top:30px;">
     <h4>Title text</h2>
     <p>subject title</p>
   </div>
   <div class="col-md-3" style="border-bottom:solid 1px; border-bottom-color:#3f51b5; margin-top:102px">
   </div>
</div>
</div>

이렇게 했는데요...

문제는 아래그림처럼 반응형으로 화면을 줄였을때 선이 이상하게 나오는 문제때문에요...

이거를 어떻게 해야하는건지 고수님들께 여쭤보고 싶습니다.

#부트스트랩 #css #html5 #border

답변 4

nanati 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2017-01-05 11:55:42 121.♡.♡.146

먼저, h4을 h2로 닫으면 안되는 건 아실 것 같은데 실수이신거죠?

반응형으로 하고 싶으셔서 row 등으로 나누시는 건 알겠는데

단지 위 이미지를 만들려고 div를 나누신거라면,

불필요한 div가 많다고 생각이 되네요 (부트스트랩 같은 걸 쓰시는 거면 어쩔 수 없지만...)

border-bottom으로 넣으시려면 h4(또는 h2)에 넣으시면 되고,

서브타이틀을 span으로 넣으셔서

display:block; 으로 하시면 될 것 같습니다.

아래와 같이 작성해 보았습니다.

 
<style>
.container {
	text-align: center;
}
.container h2 {
	border-bottom: 1px solid #3f51b5;
}
.container h2 span {
	display: block;
	width: 360px;
	margin: 0 auto;
	font-size: 14px;
	font-weight: normal;
	padding: 5px 0;
	border-bottom: 2px solid #3f51b5;
}
</style>
 
<div class="container">
  <h2> Title text<span>subject title</span></h2>
</div>