웹 페이지 따라 만들기 2
목표
어제 만든 페이지를 이어서 만들기
- 어제 만든 버튼 다듬기
- 틀만 잡아둔 배경과 텍스트 완성하기
- 맛집 카드를 추가할 수 있도록 입력창 만들기
개발 진행 내용 기록
-
어제 만든 버튼들에 보이지 않는 클릭 가능한 범위가 텍스트의 절반 만큼 우측으로 치우쳐있었다.
사유는 텍스트의 위치가<button>내부의<span>에 있지만<button>에<style>을 넣음으로써 발생하였다.
<button>내에 몰려있는<style>들이 너무 많아 코드가 난잡하여 발견이 늦었다.
이를<head>로 빼서<style>을 정리하였다.
이런 상황에서는 주석을 붙이더라도 난잡해 보일 수 있을 듯 하다.
앞으로는 같은<style>을 공유하는 것들을 묶어서 정리하도록 해야겠다. -
이미지와 붙어있는 foodcourt 버튼이 웹 페이지의 왼쪽을 기준으로 붙어있는데 목표에서는
중앙을 기준으로 위치가 고정되었다.
이를style = ustify-content: center;사용하여 웹 페이지 중앙 정렬을 하였다.
<button id="star_btn" class="btn btn-outline-secondary dropdown-toggle home_main_star_2"
type="button" data-bs-toggle="dropdown" aria-expanded="false">별점 선택
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">별점 선택</a></li>
<li><button class="dropdown-item" type="button" onclick="select_star('⭐')">⭐</button></li>-
부트스트랩에서 드롭다운을 사용하여 별점을 선택하면 1~5을 선택할 수 있게 하였다.
-
<a>를<button>으로 바꾸어서onclick으로 클릭시 함수가 발동하여 '별점 선택'의 택스트가 별점으로 바뀌게 하였다. -
이후 배경의 이미지 좌우에 여백이 생기는 문제가 발생했다.
여백 제거, 테두리 등에서 오류를 찾다 원인을 발견했다.
부트스트랩에서 가져온 코드들은class에 여러 코드가 붙어있다.
이를 무시하고 css를 추가로 입혀서 발생했던 것
class="p-5 mb-4 bg-body-tertiary rounded-3"에서p-5만 지우면 되는 아주 간단한 일이였다.
앞으로는 css를 조작할 필요가 있을 시 부트스트랩이 아닌 taiwind나 MUI를 사용해야겠다.
