html 코드 질문 드립니다.
본문
그 border 값 있잖아요
제가 첨부한 이미지처럼 저것들을 border 사각형 테두리로 감싸고 싶은데 잘 안되네요....
제발 도와주세요..
코드가 궁금하시다면 보여줄 수도 있습니다. 근데 너무 길어질까봐...
댓글로 필요하다고 하면 대댓글로 드릴게요.. 감사합니다.
답변 4
테두리를 넣고 싶은 부분의 class나 id값을 이용해서 CSS 스타일 코드를 작성하시면 됩니다.
.해당클래스 {border: 1px(굵기) solid(선 종류) #000(색상)}
저게 넣은 값입니다. 이미지 위, 아래 자세히 보시면 회색 선 가늘게 있는 것이 보일 겁니다.^^
제 말은 사각형 형태로 사각형 안에 저 내용, 이미지들이 들어갔으면 좋겠다는 말입니다.
border를 지정하셨다면 사각형으로 들어가져 있을 겁니다. 좌우 라인이 안 보이는 게 문제이신 것 같은데, 해당 부분의 가로 사이즈를 조정해보시고, box-sizing: border-box; 를 넣어보세요.
<div class="all" style="border:1px solid #dfdfdf;">
<div class="box_wrap1">
<div class="box_left">
<img src='<?=G5_THEME_URL?>/template/page2/images/sound.jpg'>
</div>
<div class="box_right">
<h1><b>녹취록 작성</b></h1>
<p>민·형사상 사건을 위해 이후 재생할 목적으로 취해 둔 음성이나 화상 자료를 검찰, 경찰, 법정에 제출하기 위한 자료로 문서화해 드립니다.</p>
<ul>
<li>
1. 휴대폰 녹음, 현장대화 녹음, 녹음기 대화녹음 등
</li>
<li>
2. 영상촬영 파일, 블랙박스 영상 등
</li>
<li>
3. 각종 통화 녹음 및 상담전화 녹음
</li>
</ul>
</div>
</div>
소스 일부입니다. 밑에 소스는 없어도 될 것 같아서...
.all{margin-top:80px;padding-bottom:40px;box-sizing:border-box;}
css 일부입니다.
그래도 안됩니다ㅠㅠㅠ
#ctt{display:none;}
.l {width:10%; height:5px;background-color:#dfdfdf;display:block;margin:0 auto;margin-top:20px;}
.intro{font-size:42px;margin-top:80px;color:#4b4b4b;font-weight:500;text-align: center;}
.box_wrap1{width:1200px;margin-bottom:50px;overflow:hidden;margin:0 auto;font-size:18px; padding-right:50px;padding-left:110px; padding-top: 80px;}
.box_wrap1 .box_left{height:300px;float:left;width:35%;}
.box_wrap1 .box_right{height:300px;float:left;width:42%;padding-left:5%;line-height:35px;}
.box_wrap1 .box_right h1{font-size:30px;padding-bottom:10px;}
.box_wrap1 .box_right p{padding-bottom:30px;}
.all{margin-top:80px;padding-bottom:40px;box-sizing:border-box;}
저 html 소스에 맞는 css를 그냥 가져왔습니다...
코드 붙여본 결과 제 화면에서는 잘 보이네요.
보시는 화면의 가로 사이즈가 작아 좌우가 안 보이시는 듯 싶습니다.
all 대신 .box_wrap1 부분에 border 설정하시면 원하는 결과 얻으실 수 있으실 것 같네요.
.box_wrap1{margin-top:80px;padding-bottom:40px;box-sizing:border-box;}
이렇게 말인가요??
왜 제 컴퓨터에서는 위 아래로 무한대의 선만 나타날까요? 화면 줄이면 오른쪽 선만 살짝 보일 정도??
아예 사각형 형태로 잘 나타난다고요?ㅠㅠㅠ
<div class="box_wrap1" style="border:1px solid #dfdfdf;"> 이렇게 하면 녹취록 작성 부분만 사각형으로 감싸지는데....
새로 답변에 올린 이미지 참고해주세요. 올려주신 코드가 녹취록 작성 부분이라 저렇게 말씀드렸고, 아래 회의록 작성 영역이 분리되어있다면 양쪽 모두 감싸는 div를 하나 만들어 테두리 설정해주셔도 됩니다.
작업하시는 페이지에서 F12를 눌러 개발자도구를 여신 후에, 각 부분의 영역을 확인해보세요.
위의 이미지에서 붉은 라인 부분이 div.all 부분이고, 파란 라인 부분이 div.box_wrap1 부분입니다.
테두리를 넣고 싶은 부분이 파란 부분이라면 all이 아니라 box_wrap1에 테두리를 설정해주셔야 할 것이고, all에 테두리를 넣고 싶으신 거라면 화면 안쪽으로 들어오도록 해당 영역의 크기를 설정해주셔야 합니다.
저는 녹취록과 회의록 모두를 감싸는 사각형 틀을 만들고 싶기 때문에 all 안에 넣고 싶습니다. 아까처럼...
혹시 말씀하신 해당 영역의 크기 설정하는 방법 알려주실 수 있을까요...??ㅠㅠㅠㅠ 완전 초보라서ㅠㅠ
저걸 다 감싸는 클래스가 all이라서 all로 하고싶은 겁니다^^
그럼 box_wrap1에 걸려있는 것처럼 all에도 width에 원하는 수치 입력해주시면 되겠네요.
기본 CSS를 학습하시고 작업하시면 도움이 될 듯합니다.
<div class="all" style="border:1px solid #dfdfdf;"> 이렇게 하고 css에는 .all{width:} 어쩌구어쩌구
넣어주면 된다는 말씀이신가요?
네 그렇습니다. border 부분도 css에 작성해주시면 됩니다.
제가 새로 올린 글 확인해주세요...ㅠㅠ
여기까지는 왔는데..... .all{width:90%;margin-top:80px;padding-bottom:40px;box-sizing:border-box;}
width를 90%로 했는데 저렇게 되고 100%를 하면 맨 처음처럼 됩니다.
혹시 실례가 안된다면 직접 해보신 코드를 저한테 보내주실 수 있으실까요??ㅠㅠㅠㅠㅠ
어려운 중생 한명 구원한다고 생각하시고.....
border 설정은 무엇인지ㅠㅠㅠㅠ
코드 작성해드리는 것은 어렵지 않습니다만, 그렇게 해서는 이후에도 작성하실 때마다 계속 물어보시게 될 겁니다. width나 border 속성도 무엇인지 모르신다면 이후에도 해결하기 어렵습니다. CSS 기초를 검색하셔서 간단하게 훑어보고 작업해보세요. ㅎㅎ
사실 기본적인 html css 기능은 알고있는데.... 학교에서 많이 배워서... 제가 입사한지 얼마 안되고 지금 긴장을 엄청 한 상태라..... 알던 것도 다 까먹고... 제 기분 이해하실거라 생각 듭니다.. 그래서 계속 공부도 하고 있고 그렇습니다.. 도와주세요ㅠㅠㅠㅠ
