세미 프로젝트의 프론트단을 부트스트랩으로 구현 하기로 했다.
헤더영역를 html/css/jQuery로 만든 시점에서
다른 조도 부트스트랩을 사용한다고 해서 급하게 찾아봤다.
프론트 쪽에서 라이브러리를 써야할 줄 생각도 못했는데 (일일히 만드는 게 더 오래걸리는 줄도 모르고 )
부트스트랩을 사용해보니 사용방법이 쉽고 일일히 디자인을 적용할 필요가 없다는 점에서 시간을 아끼고 있다.
(사실 예쁘게 할 수 있는 디자인을 보고있자니 이것도 적용 저것도 적용 해보고 욕심이 생기는데, 시간이 턱없이
부족하고 몇몇 기능은 어쩐지 안돌아간다. 모달과 드롭다운 메뉴 같은게 잘 안되서 결국 모달창은 직접 만들게 됨.)
이 부분은 내가 따로 추가해야할 외부 링크를 연결하지 않아서 일 수도 있는데
따로 모달창과 셀렉트 옵션으로 만들고 나니 사용할 일이 없게됨..
부트스트랩 테이블의 컬럼명의 세로쓰기 되는 이슈와 해결
그중에 부트스트랩의 테이블 코드에서 행의 길이에 맞춰 열(컬럼명)의 간격도 자동 조정 되는데.
가데이터값으로 동일하게 넣고 보았을 때는 문제가 없었으나,
혹시나 하는 마음에 Y, N 같은 행의 값을 넣어보니 아래와 같이 컬럼명이 세로쓰기가 되는 문제 발생.
처음에는 CSS에 클래스를 추가하고 간격 조정을 해보는 등의 별의별 뻘짓을 하다가 구글링을 시도.
white-space:nowrap;
세로쓰기 방지로 속성 추가하니 해결이 되었다.
white-scape : nowrap; 속성은 공백을 채우지만 가로 폭의 오른쪽 끝에서 줄 바꿈을 하지않고 박스 벗어나 표시된다.
텍스트가 1줄로 표현이 되는 것.
<form>
<div class="table-scroll">
<table class="table table-hover w-auto">
<thead class="table-light">
<tr>
<th scope="col"><i class="bi bi-check-square"></i></th>
<th scope="col">회원ID</th>
<th scope="col">전화번호</th>
<th scope="col">생년월일</th>
<th scope="col">주소</th>
<th scope="col">이메일</th>
<th scope="col">구매회수</th>
<th scope="col">구독여부</th>
<th scope="col">구독기간</th>
<th scope="col">구독취향</th>
<th scope="col">등급</th>
<th scope="col">가입일</th>
<th scope="col">활동여부</th>
</tr>
</thead>
<tbody>
<!-- 테이블 내용 jstl c:forEach로 추가하기-->
<!-- 가 데이터 (확인용)-->
<tr>
<td scope="row"><input type="checkbox" name="order_no" value="1"></td>
<td>user124</td>
<td>123456789</td>
<td>123456789</td>
<td>123456789-123456789</td>
<td>123456789</td>
<td>123456789</td>
<td>123456789</td>
<td>123456789</td>
<td>123456789</td>
<td>123456789</td>
<td>123456789</td>
<td>123456789</td>
</tr>
<tr>
<td scope="row"><input type="checkbox" name="order_no" value="1"></td>
<td>user124</td>
<td>123456789</td>
<td>123456789</td>
<td>123456789-123456789</td>
<td>123456789</td>
<td>123456789</td>
<td>123456789</td>
<td>123456789</td>
<td>123456789</td>
<td>123456789</td>
<td>123456789</td>
<td>123456789</td>
</tr>
</tbody>
</table>
</div>
</form>
/* 테이블 세로쓰기 방지 */
.table {
white-space:nowrap;
text-align: center;
}
코드를 추가한 뒤 컬럼명을 가운데 정렬하니 모양이 좀더 나아졌다!
다른 방법이 있었을지도 모르지만 우선 해결되어서 너무나 다행이다.
이 테이블 폼과 사이드바를 만들고 나서 다른 팀원들과 공유하여 필요한 곳에 적재적소로 쓰고 있다.
관리페이지는 거의 이러한 조회 테이블을 쓰는 경우가 많아서 테이블 디자인을 어떻게 만들지가 제일 걱정이었는데
부트스트랩을 사용함으로써 간단히 해결되서 정말 다행이다.
그 외에 문제점들
프론트 진행하면서 문제는 코드를 너무나 재사용하지 못하고 여기저기 조금씩 추가된 점.
( a, b, c가 다 똑같은 폼의 파일이라면 b에서 수정하면 a, c를 다시 일일히 똑같이 수정하고 있다. 비효율의 극치!! )
그리고 부트스트랩으로 그리드를 나누니 만들수록 <div>가 무지막지로 감싸져 있다는 것. 이 디브가 너의 디브냐.. 얖!
jsp를 사용해 데이터를 넣고 할 때 지금의 코드에 자바 코드까지 더해지만 더욱 길어지고 보기 어려워질지 모르겠다.
그리고 css파일을 팀원들과 서로 클래스명이 겹치거나 서로 간섭을 할거라 생각해서
html과 css 파일을 1대1로 연결해서 생성했는데,
css속성이 거의 추가되지 않은 html에 대해서도 css파일이 여러개 카피본이 생기면서
이러한 방식도 적당히 융통성있게 진행해야 하는 구나 생각함.
네이밍 역시 팀원들에게 여러 번 네이밍 규칙을 정해야 할 필요가 있다고 건의했는데
아직도 언더바(_) 언더스코어 (-) 카멜표기 말만 나오고 정해지지 않음. 이걸 5명이서 투표까지나 해야 정해질까 싶다 ㅠ.
'Project' 카테고리의 다른 글
[세미 프로젝트] 구독 쇼핑몰 ERD 다이어그램 (0) | 2022.03.29 |
---|---|
[세미 프로젝트] 1DU1DU 원두 구독쇼핑몰 프로젝트 진행과정 기록 (0) | 2022.03.21 |