editForm의 형태가 이상하게 나옵니다!
68
작성한 질문수 1
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요.
1. 강의 내용과 관련된 질문을 남겨주세요.
2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요.
(자주 하는 질문 링크: https://bit.ly/3fX6ygx)
3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요.
(질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG)
질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요.
=========================================
[질문 템플릿]
1. 강의 내용과 관련된 질문인가요? (예/아니오)
2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오)
3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오)
[질문 내용]
여기에 질문 내용을 남겨주세요.
강의를 들으면서 하고있는데 상품 등록은 문제 없이 되는데상품 등록한 이후에 상품 수정을 하려고 들어가면 ui가 좀 깨지는 모습이 있습니다.
위의 사진처럼 가격의 크기가 너무 압도적으로 큽니다. 일단 영한님의 코드를 그대로 복사 붙히기를 해도 같은 결과가 나옵니다. 그래도 저의 editForm 코드도 같이 첨부합니다.
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link href="../css/bootstrap.min.css"
th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<style>
.container {
max-width: 560px;
}
</style>
</head>
<body>
<div class="container">
<div class="py-5 text-center">
<h2>상품 수정 폼</h2>
</div>
<form action="item.html" th:action method="post">
<div>
<label for="id">상품 ID</label>
<input type="text" id="id" name="id" class="form-control" value="1" th:value="${item.id}" readonly>
</div>
<div>
<label for="itemName">상품명</label>
<input type="text" id="itemName" name="itemName" class="formcontrol" value="상품A" th:value="${item.itemName}">
</div>
<div>
<label for="price">가격</label>
<input type="text" id="price" name="price" class="form-control" th:value="${item.price}">
</div>
<div>
<label for="quantity">수량</label>
<input type="text" id="quantity" name="quantity" class="formcontrol" th:value="${item.quantity}">
</div>
<hr class="my-4">
<div class="row">
<div class="col">
<button class="w-100 btn btn-primary btn-lg" type="submit">저장</button>
</div>
<div class="col">
<button class="w-100 btn btn-secondary btn-lg"
onclick="location.href='item.html'" th:onclick="|location.href='@{/basic/items/{itemId}(itemId=${item.id})}'|" type="button">취소</button>
</div>
</div>
</form>
</div> <!-- /container -->
</body>
</html>
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. 김태민님.
상품 수정 폼에서 UI가 다르게 보이는 문제에 대해 문의 주셨군요. 일반적으로 이러한 경우에는 CSS 클래스나 스타일시트 로드 부분에서 문제가 생길 수 있습니다.
- CSS 클래스 문제: 첨부된 코드에서 여러 input 태그가
formcontrol이라는 잘못된 class 속성을 사용하고 있습니다. 이를 모두form-control로 수정해 주세요.
<input type="text" id="itemName" name="itemName" class="form-control" value="상품A" th:value="${item.itemName}">
스타일시트 경로: 기본적으로
bootstrap.min.css는form-control클래스를 정의하고 있습니다. 만약 이 스타일시트가 제대로 로드되지 않는다면 UI가 깨질 수 있습니다. 스타일시트 경로가 올바른지 확인하세요.추가적인 스타일 적용 여부: 추가적인 스타일이 적용되었는지 확인해 보세요. 예를 들어, 브라우저의 개발자 도구를 사용하여 input 요소에 적용된 스타일을 확인할 수 있습니다.
아래는 유사한 문제에 대한 해결 방법이 안내된 다른 게시물입니다:
- 섹션7 상품 수정이 페이지가 연결이 안됩니다. - 이 게시물에서는 템플릿 파일의 이름이나 경로 확인에 관련된 참고 사항을 확인할 수 있습니다.
만약 위의 수정으로도 해결이 되지 않는다면, 원본 코드와 차이를 비교하거나 브라우저의 개발자 도구로 CSS가 제대로 로드되는지 확인해 볼 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
servlet과 container에 대한 질문입니다
0
25
1
api를 어느 컨트롤러에 작성해야하는지는 어떤 기준으로 해야하나요?
0
64
1
jsp 의존성 수정 요청
0
79
2
요즘 웹 서버가 주로 사용되는 이유는 SPA 구조 때문일까요 ?
0
143
1
save() 메서드 문의
0
67
1
절대 경로로 templates/basic 하위 파일 열면 css 적용 안되는 현상
0
101
1
request-body-json
0
83
2
MVC 패턴의 적용 단위
0
97
1
RequestMapping을 이용한 핸들러, 어댑터
0
119
2
save 후 결과화면
0
89
2
jsp를 이용한 view
0
97
1
application.properties에 debug 추가해도 결과가 똑같습니다.
0
178
1
수업 코드 제공 관련 문의
0
97
2
RequestMappingHandlerAdapter의 Controller 호출 과정
0
100
3
파일 오픈 시
0
70
1
스프링 배치 관련
0
78
1
@RequestParam의 defaultValue가 blank 값도 처리하는 지 여부
0
112
1
postman으로 /request-body-json-v1 호출시 500 error
0
96
1
프론트엔드와 백엔드의 mvc, rest api에 대한 질문
0
79
1
모델의 역할과 계층 분리에 대한 이해 차이 + 추가질문
0
111
1
console log 출력 관련 질문입니다.
0
75
1
애플리케이션이 실행 되지 않습니다 ㅠㅠㅠ
0
139
1
html 변경하는 부분 적용 문제
0
103
1
한글 깨짐
0
76
2