안녕하세요 인덱스 페이지 때문에 문의 드립니다.
본문
제가 만들어보고 있는 사이트인데요
아래 소스를 적용이 안되는 상태라서요 뭐가 문제인지 잘 모르겠어서 이렇게 문의 드립니다.
죄송합니다. 아직 다른분들에 비해서 실력이 모자라서요
아래 소스를
<article class="cnt news"><h2 class="tit">소식 보기</h2>
<ul class="list">
<li><a href="#" onClick="popupCenter('#','nWin')">[알림] 테스트, 테스트...</a></li>
<li><a href="#" onClick="popupCenter('#','nWin')">[알림] 테스트, 테스트...</a></li>
<li><a href="#" onClick="popupCenter('#','nWin')">[알림] 테스트, 테스트...</a></li>
<li><a href="#" onClick="popupCenter('#','nWin')">[알림] 테스트, 테스트...</a></li>
<li><a href="#" onClick="popupCenter('#','nWin')">[알림] 테스트, 테스트...</a></li>
</ul>
<a href="/drh/MediaList.do?menuSeq=2558" class="btnMore" id="newsMore"><img src="http://www.daejeon.go.kr/images/drh/layout/index/btn_more_b.png" alt="테스트"></a>
</article>
</section>
아래 코드 아래에 위치 시켰을때 article 끝나는 지점 아래에 배치를 시켰을 때
아래 파란색 부분에 넣어져야 하는데
적용이 안되요 왜 그러는 것인지 궁금 합니다.
그런데 문제는 위 소스에
<section class="mainCnt01" id="mainCnt01">
<div class="wrapCnt">
<div class="bxBoard">
<br><br><br><br><br><br>
이 소스를 같이 넣어 주면 화면이 위 아래로 두개로 분리가 되는 것을 볼 수 있습니다.
하지만 전 아래 화면에 넣고 싶은 것인데
이리 저리 해 보아도 잘 되지 않아서요
어제 저녁에 올려 드렸는데 한분이 답변을 해주시긴 하였는데 제가 글을 잘 못써서 그런지 그냥 제가 적용한 소스만 적어 준 것이라 그래서 다시 올려 드립니다.
답변좀 부탁 드립니다.
<section class="mainCnt02" id="mainCnt02">
<div class="wrapCnt">
<div class="contents" id="listCnt2">
<article class="bxCnt">
<ul class="listCnt">
<li class="cnt01"><a href="">
<h2 class="tit">테스트를 위해서 사용</h2>
<p class="txt">테스트를 위해서 사용<br>테스트를 위해서 사용!</p>
</a></li>
<li class="cnt02"><a href="#" target="_blank" title="새창열림">
<h2 class="tit">테스트를 위해서 사용</h2>
<p class="txt"><span>테스트를 위해서 사용</span>테스트를 위해서 사용</p>
</a></li>
<li class="cnt03"><a href="#" target="_blank" title="새창열림">
<h2 class="tit">민테스트를 위해서 사용</h2>
<p class="txt">테스트를 위해서 사용<br>테스트를 위해서 사용</p>
</a></li>
<li class="cnt03"><a href="#" target="_blank" title="새창열림">
<h2 class="tit">테스트를 위해서 사용</h2>
<p class="txt">테스트를 위해서 사용.<br>테스트를 위해서 사용.</p>
</a></li>
<li class="cnt05"><a href="#" target="_blank" title="새창열림">
<h3 class="tit">테스트를 위해서 사용</h3>
<p class="txt">테스트를 위해서 사용.</p>
</a></li>
<li class="cnt06">
<h3 class="tit">테스트를 위해서 사용</h3>
<p class="txt">테스트를 위해서 사용.</p>
<div class="pc">
<p class="traffic_icon00"><a href="#" target="_blank" title="새창열림"><img src="/images/drh/layout/index/btn_main_cnt02_06.png" alt="교통정보센터"></a></p>
<p class="traffic_icon01"><a href="#" target="_blank" title="새창열림"><img src="/images/drh/layout/index/traffic_icon03.png" alt="자전거"></a></p>
<p class="traffic_icon02"><a href="#" target="_blank" title="새창열림"><img src="/images/drh/layout/index/traffic_icon01.png" alt="버스노선"></a></p>
<p class="traffic_icon03"><a href="#" target="_blank" title="새창열림"><img src="/images/drh/layout/index/traffic_icon02.png" alt="도시철도"></a></p>
</div>
<div class="mobile">
<ul>
<li><a href="#" target="_blank" title="새창열림">교통정보센터</a></li>
<li class="right"><a href="#" target="_blank" title="새창열림">자전거</a></li>
<li><a href="#" target="_blank" title="새창열림">버스노선</a></li>
<li class="right"><a href="#" target="_blank" title="새창열림">도시철도</a></li>
</ul>
</div>
</li>
<li class="cnt07">
<h3 class="tit">복지서비스</h3>
<span><a href="#" class="btnMore"><img src="/images/drh/layout/index/btn_more_b.png" alt="더보기"></a></span>
<ul class="listSrvc">
<li><a href="#" target="_blank" title="새창열림">어르신</a></li>
<li class="right"><a href="#" target="_blank" title="새창열림">여성/가족</a></li>
<li><a href="#" target="_blank" title="새창열림">장애인</a></li>
<li class="right"><a href="#">다문화가족</a></li>
</ul>
</li>
<li class="cnt08">
<ul class="links">
<li><a href="/drh/DrhContentsHtmlView.do?menuSeq=1848">청사안내</a></li>
<li><a href="/drh/drhOrganization.do?menuSeq=1644">조직도 및 직원안내</a></li>
<li><a href="/drh/DrhContentsHtmlView.do?menuSeq=1753">실국 홈페이지 안내</a></li>
<li><a href="/drh/DrhContentsHtmlView.do?menuSeq=1643">오시는길</a></li>
</ul>
</li>
</ul>
</article>
답변 1
[소식보기] 영역을,
아래 8개 블럭 위치의 가장 첫번째에 넣고 싶다는 얘기인가요?
아주 별도의 영역이 아닌,
mainCnt02 영역에 넣으려는 경우에는..
mainCnt02 로 정의된 부분과 충돌될 수 있는 부분을 모두 검토해야 합니다.
(여기 Q&A 로는 해결이 어려울 수도 있습니다.)
가장 큰 문제부분은
site_style.css 의
.mainCnt02 .bxCnt .listCnt > li > a, .mainCnt02 .row [class^="cnt"] > a {position: relative; display: inline-block; width: 100%; height: 100%; padding: 30px; z-index: 10; }
입니다.
a 태그에 영역이 잡혀 있어서, maincnt02 안의 어떤 블럭으로 넣으려는 경우에는
소식보기의 개별 텍스트 a 링크 부분이 영역처럼 잡히게 됩니다.
이부분 외에도, .mainCnt02 .bxCnt .listCnt > li > a
로 정의된 부분이 많아 모두 검토해야 됩니다.
구조적으로 문제를 발생시키는 부분이라,
전체적인 재검토를 하여 해당부분을 수정해야 됩니다.
저 부분 때문에 소식부분의 <a> 링크 텍스트가 있으면 문제가 생기게 됩니다.
임시방편으로 수정한다면 다음과 같이 수정해 볼 수 있습니다.
1) css 에 다음 라인 추가
.mainCnt02 .bxCnt .listCnt > li.cnt01 div {position: relative; display: inline-block; width: 100%; height: 100%; padding: 30px; z-index: 10; }
2) 전체영역을 감싸는 <a>를 <div>로 변경하고, 개별 <a> 는 <span>으로 대체
<section class="mainCnt02" id="mainCnt02">
<div class="wrapCnt">
<div class="contents" id="listCnt2">
<article class="bxCnt">
<ul class="listCnt">
<li class="cnt01"><div>
<h2 class="tit">테스트를 위해서 사용</h2>
<br>
<span onClick="alert('t');popupCenter('#','nWin')">[알림] 테스트, 테스트...</span><br>
<span onClick="popupCenter('#','nWin')">[알림] 테스트, 테스트...</span><br>
<span onClick="popupCenter('#','nWin')">[알림] 테스트, 테스트...</span><br >
<span onClick="popupCenter('#','nWin')">[알림] 테스트, 테스트...</span><br>
</div></li>
<li class="cnt02"><a href="#" target="_blank" title="새창열림">
<h2 class="tit">테스트를 위해서 사용</h2>
<p class="txt"><span>테스트를 위해서 사용</span>테스트를 위해서 사용</p>
</a></li>
