화면 구현하기 질문있습니다.

Question

선배님들 지도 화면에서 옆에 사이드 바 처럼 생긴 화면을 구현해보고 싶은데 도저히 어떻게 하는지를 모르겠는데 어떻게 해야지 구현 할 수 있을 궁금해서 질문 드립니다.

제목

메뉴 클릭 시 실행될 화면

이런식으로 bootstrap을 이용해서 만들고 있는데 크기 조절이 안되는데 어떻게 해야 할지 답답해서 질문 드립니다.

kenu,전독시 · Answer

지도 화면에 사이드바 처럼 생긴 화면을 구현하려면, HTML과 CSS를 사용하여 레이아웃을 구성하고, 필요에 따라 JavaScript를 사용하여 동적 기능을 추가할 수 있습니다. 아래는 간단한 예시로, 사이드바와 메인 콘텐츠 영역을 가진 레이아웃을 구현하는 방법을 설명합니다.HTML 마크업먼저, 사이드바와 메인 콘텐츠 영역을 구성하는 HTML 마크업을 작성합니다.

엘리먼트 내부에

엘리먼트를 사이드바로,

엘리먼트를 메인 콘텐츠 영역으로 사용합니다.

CSS 스타일링CSS를 사용하여 레이아웃을 디자인합니다. 데스크탑에서는 사이드바와 메인 콘텐츠 영역을 나란히 배치하고, 모바일에서는 사이드바를 숨기는 등의 반응형 디자인을 구현할 수 있습니다./* 데스크탑 스타일링 */ main { display: flex; gap: 32px; padding: 48px 0; } aside { flex: 1; background: white; padding: 24px; border-radius: 0 16px 16px 0; } article { flex: 3; background: white; padding: 32px; border-radius: 16px 0 0 16px; } /* 모바일 스타일링 */ @media (max-width: 40rem) { aside { display: none; } article { border-radius: 16px; } main { padding: 24px; } } 이 예시에서는 데스크탑에서는 사이드바와 메인 콘텐츠 영역을 나란히 배치하고, 모바일에서는 사이드바를 숨기는 방식으로 반응형 디자인을 구현했습니다. 사이드바와 메인 콘텐츠 영역의 너비를 조정하거나, 배경색, 패딩 등의 스타일을 변경하여 원하는 디자인을 적용할 수 있습니다.이 방법을 사용하면, 지도 화면에 사이드바 처럼 생긴 화면을 구현할 수 있습니다. 필요에 따라 JavaScript를 사용하여 사용자 상호작용을 추가하거나, 데이터를 동적으로 로드하는 등의 기능을 구현할 수 있습니다.from: https://www.phind.com/search?cache=tclt4yf0deuwjfplv05r9sgi

화면 구현하기 질문있습니다.

1개의 답변

기술 목록