모바일 메인페이지에 게시판이 이렇게 깨져보여요
본문
안녕하세요!
왼쪽이 모바일 화면이고 오른쪽이 f12 눌렀을때 화면입니다.
공지사항 /1단지 /2단지 ... 게시판을 한줄에 하나씩 똑같은 크기로 정렬을 하고 싶습니다.
left를 center로 하면 될거같은데 저거를 수정하는 파일이 어디에 있는지 모르겠습니다...
도와주실분 간절히 부탁드립니다 ㅠㅠㅠ
답변 4
index.php 에서 최신글 시작 주석 채크해보세요.
그리고 너비가 지정되어있지 않은 float:left 상태인데 양옆으로 가득차게 하려면
모바일에서 width:100% 를 줘야해요..
mobile의 index.php를 바꿔주어야 할까요?
위에 보시는데로 모바일css 에서 width 값을 지정해보세요.
1. float 은 center가 없습니다.
2. 해당 파일은 css가 아니라, php 파일 안에 직접 설정 되어있습니다.
3. 작성하신 최근 게시물 소스에 보면 경로 적혀 있습니다.
덧. float 공부하지마시고 flex / grid 공부하세요 ..
답변 너무 감사드립니다. 혹시 index.php 말씀하시는걸까요!?
최근 게시물이라면 보통 테마/베이직/모바일/인덱스.php 파일에 작성되어있을꺼에요
거기에 이런 코드가 있습니다.
echo latest('theme/basic', $row['bo_table'], 12, 25);
그럼 테마에 베이직 찾아가야 합니다.
테마 > 베이직 > 모바일 > 스킨 > 라테스트(latest) > 베이직 > latest.skin.php 파일 열어보세요
소스에서 직접 css 를 준것 같은데,
float:left 를 삭제해보세요.
※ 게시판 항목들을 감싸는 <div>에 CSS 클래스를 추가하여 스타일을 적용하여 보세요.
- /mobile/skin/board/basic/list.skin.php
<div class="board-list">
<?php foreach ($list as $item): ?>
<div class="board-item">
<span><?php echo $item['subject']; ?></span>
<a href="<?php echo $item['href']; ?>">자세히 보기</a>
</div>
<?php endforeach; ?>
</div>
- 파일 내에서 인라인 스타일로 CSS 스타일을 적용 (테스트후, 메인 스타일시트에 넣으세요)
<style>
.board-list {
display: flex;
flex-direction: column; /* 세로 정렬 */
gap: 10px; /* 항목 간 간격 */
}
.board-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f9f9f9;
box-sizing: border-box;
width: 100%; /* 동일한 너비 */
}
</style>
- float: left는 아래의 레이아웃 방식으로 대체하세요.
<div class="board-item" style="float: none; display: flex; justify-content: space-between;">
<span><?php echo $item['subject']; ?></span>
<a href="<?php echo $item['href']; ?>">자세히 보기</a>
</div>