search

sseozero / asiana

bootstrap을 이용한 아시아나항공 웹리뉴얼
0 stars 0 forks source link

bootstrap 코딩 작업 중 질문 - carousel / datepicker #1

Open sseozero opened 1 year ago

sseozero commented 1 year ago

image

질문 1 ) visual영역 : 배너 페이징 클릭시 해당되는 배너로 넘어가지 않음 ㅠ (자동롤링 할땐 넘어감)

carouselExampleAutoplaying 사용으로 자동롤링 넣은 후 페이징 코드를 추가로 삽입해서 그런지 사진에 표시된 부분 클릭하면 해당 배너로 이동하지 않네요!! 해결방법 궁금합니다

질문 2) content영역 - form : 탑승일자 선택 영역- datepicker 사용 구글링으로 검색해서 두 종류의 datepicker를 발견했고, 두개를 합쳐서 제가 원하는 ui 형태로 수정했는데 옆에 다른 form 영역처럼 label로 '출발일' 이라고 넣고 싶은데 '연도-월-일' 이라는 글씨와 겹쳐져서 출력되서 일단 <왕복> 폼 영역처럼 다른방식으로 구현했습니다

찾아봤던 두 종류의 datepicker 중 하나는 value 값을 "출발일" 로 넣으면 폼 안에 출발일이라고 들어가던데 다른 한종류의 datepicker(현재 제 코드에 적용한)는 value로 설정해도 적용되지 않고 '연도-월-일'이라고 그대로 있어서 이 부분을 바꾸고 싶은데 어떻게 바꿔야되는지 모르겠습니당!

질문 3) tap : 항목 '편도/왕복/다구간' 이 부분 클릭시 글자색 변화 or 현재 파란색으로 되어있는데 이거 다른색으로 변경하고 싶은데 이거는 custom 으로 (ex. 클릭시 글자색 변경) 별도로 작업해야 하는건지? 부트스트랩으로 바꿀수 있는건지?? 궁금합니다 ~ 그리고 hover 효과 부트스트랩 코드로 어떻게 적용하는지..?할수있는지..?

kiyoungch commented 1 year ago

좋은 질문들이네요. 제가 차근차근 확인하고 빠르게 답변 드리겠습니다!

kiyoungch commented 1 year ago

질문1에 대한 답변) data-bs-target="carouselExampleAutoplaying" 라고 작성하셨는데, 제가 문서를 찾아보니까 data-bs-taret은 "The data-bs-target attribute accepts a CSS selector to apply" 라고 표현되어있네요! 처음 적용하다보면 충분히 놓칠수 있는 부분이라고 생각이 듭니다. 그래서 내가 효과,기능을 적용하고 싶은 전체 div의 id를 css selector규칙에 따라 적어줘야 합니다.

즉, data-bs-target="carouselExampleAutoplaying" => data-bs-target="#carouselExampleAutoplaying" 처럼 id의 css selector인 "#"을 넣어주면 해당 전체 버튼들이 잘 작동할 거에요!

제가 드린 이야기를 기반으로 한번 수정해볼까요? 우리가 작업환경이였다면, 제가 코드 수정해서 pull request했겠지만 학습차원에서 이야기만 전달하겠습니다.

위의 내용은 앞으로도 코드작성시 매번 유의하게 될 사항이라, 아주 좋은 에러를 겪었다고 생각듭니다.

kiyoungch commented 1 year ago

질문 2에 대한 답변) 지금 코드에 적용되고 있는 datepicker는 기본 datepicker형식이라서 서영님께서 원하는 UI가 있다면 직접 코드를 수정해서 변경을 해야할것 같아요. (기본=> 커스터마이징)

이런 경우에 해당 dom에 javascript를 사용하여 디자인을 원하는 방향으로 직접 작동및 수정하곤 합니다. 관련된 레퍼런스들을 드릴게요! https://jobcoding.tistory.com/202 https://code-mania.tistory.com/138

쓰다가 떠올라서, 권유를 드리자면 서영님께서 위와 같은 상황을 위한 자바스크립트 라이브러리 클론을 작성해보는것도 좋을것 같습니다!

위 레퍼런스와 또 다른 검색으로 코드를 작성해보시고, 어려움이 있다면 다시 질문 주셔도 됩니다! 학습차원에서 정답보다는 길을 열어드리고 싶어 직접 코드답변말고 대략적인 내용과 레퍼런스를 드립니다~

kiyoungch commented 1 year ago

질문 3에 대한 답변) 클릭시 글자색 변화 or 현재 파란색을 다른색으로 변경 => 이런경우 기본적용을 새로운 적용으로 custom 작업해야합니다 만약에 전체 기본적용을 동일하게 수정하기를 원한다면 reset.css와 같이 파일을 생성해서, 한꺼번에 모아서 작업하는 경우도 있고, 특정 부분만 변경원한다면, custom css로 적용합니다. 다만 최근 bootstrap에서는 다음과 같은 레퍼런스가 있네요. https://getbootstrap.com/docs/5.0/helpers/colored-links/ 링크버튼색을 고정시킬 수 있습니다.

hover 효과 부트스트랩 코드는 따로 없고 custom 제작을 해야할것 같습니다.!

그래도 혹시 모르니, 이곳저곳 다니면서 부트스트랩 개정판을 탐색 해볼게요~

sseozero commented 1 year ago

@kiyoungch 감사합니다~~~!!