jsp 코드의 html 부분이야. 해석하고 기억해놔.
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Language" content="ko">
<title>병원을 찾아드려요</title>
<link href="<c:url value='/'/>css/styles.css" rel="stylesheet"
	type="text/css">
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js"
	crossorigin="anonymous"></script>
</head>

<body>
	<noscript>자바스크립트를 지원하지 않는 브라우저에서는 일부 기능을 사용하실 수 없습니다.</noscript>
	<!-- 전체 레이어 시작 -->

	<div id="wrap">
		<!-- container 시작 -->
		<div id="main_container">

			<!-- hospital 섹션 -->
			<section class="page-section hospital" id="hospital">
			<div class="container">
				<br>

				<div class="row justify-content-center">

					<div class="col-md-6 col-lg-4 mb-5"
						style="position: relative; display: flex; justify-content: center; align-items: center; height: 100%; transform: translateY(-25px);">


						<!-- 인체 모양-->
						<c:url value='/images/human.png' var="imgSrc" />
						<img src="${imgSrc}" alt="Alternative Text"
							style="width: 90%; height: 90%;" />

						<!-- 전면 버튼 시작-->

						<!-- 머리 버튼 -->
						<div id="head-btn" class="position-absolute translate-middle"
							style="top: 7%; left: 49.9%;">
							<button class="btn btn-primary btn-opacity"
								style="width: 70px; height: 90px; border-radius: 50%;"
								data-bs-toggle="modal" data-bs-target="#hospitalModal1"></button>
						</div>

					</div>

				</div>
			</div>
			</section>

			<!-- 병원 위치 지도 섹션-->
			<section class="page-section hospital"
				style="height: 1000px;">
			<div class="row justify-content-center" style="width: 99%;">
				<div class="col-md-6 col-lg-4 mb-5"
					style="position: relative; display: flex; justify-content: center; align-items: center;">
					<h1>지도가 나오는 부분</h1>
				</div>
			</div>
			<div style= "position: relative; display: flex; justify-content: center; align-items: center;"  >
				<div style="width:1000px; height:500px;" id="map"></div>
			</div>
			</section>

		<!-- 모달창 구간 -->

		<!-- 머리 -->
		<div class="hospital-modal modal fade" id="hospitalModal1"
			tabindex="-1" aria-labelledby="hospitalModal1" aria-hidden="true">
			<div class="modal-dialog modal-xl">
				<div class="modal-content">
					<div style="position: relative;">
						<button class="btn-close" type="button" data-bs-dismiss="modal"
							aria-label="Close" style="position: absolute; right: 0;"></button>
					</div>
					<div class="modal-body text-center pb-5">
						<div class="container">
							<div class="row justify-content-center">
								<div class="col-lg-8">
									<h2
										class="hospital-modal-title text-secondary text-uppercase mb-0">머리</h2>
									<div class="divider-custom">
										<div class="divider-custom-line"></div>
										<div class="divider-custom-icon">
											<i class="fas fa-star"></i>
										</div>
										<div class="divider-custom-line"></div>
									</div>
									<button class="btn btn-primary"
										onclick="closeModalAndScrollToSection(); getUserLocation();">
										<i class="fas fa-xmark fa-fw"></i> 완료
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>