[웹 쇼핑몰] 시작페이지

부트스트랩 적용

1.네비게이션 바 

<nav class="navbar navbar-expand navbar-dark bg-dark">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="./welcome.jsp">Home</a>
        </div>
    </div>
</nav>

- navbar: 네비게이션 바를 정의하는 컨테이너입니다. navbar-dark 클래스는 네비게이션 바의 배경색을 어두운 색으로 지정합니다. bg-dark 클래스는 네비게이션 바의 배경색을 어두운 색으로 스타일링합니다.

- container: 내부 요소를 감싸는 컨테이너입니다. 이 클래스는 컨텐츠를 중앙 정렬하고 고정 너비를 제공합니다.

- navbar-header: 네비게이션 바의 헤더를 정의하는 컨테이너입니다. 네비게이션 바의 로고 또는 브랜드 이름과 같은 요소를 포함할 수 있습니다.

- navbar-brand: 네비게이션 바에서 브랜드 또는 로고를 나타내는 링크입니다. href 속성은 해당 링크가 클릭되었을 때 이동할 URL을 지정합니다. 이 예시에서는 ./welcome.jsp로 설정되어 있습니다. "Home" 텍스트는 네비게이션 바에서 표시되는 링크의 텍스트 내용입니다.

 

 

2. 문구 변수 처리 및 메인페이지

<%! String greeting = "Welcome to Web Shopping Mall";
String tagline = "Welcome to Web Market!"; %>
<div class="jumbotron">
    <div class="container">
        <h1 class="display-3">
            <%=greeting%>
        </h1>
    </div>
</div>
<main role="main">
    <div class="container">
        <div class="text-center">
            <h3>
                <%=tagline%>
            </h3>
        </div>
        <hr>
    </div>
</main>

- Jumbotron 클래스를 사용하면 콘텐츠를 중앙에 배치하고 전체 화면 너비에 표시

  부트스트랩 그리드 시스템과 함께 사용되어 반응형 디자인을 지원 다양한 화면 크기와 장치에 대해 적절한 크기로 조정

- display-3는 h1 태그에 적용되며, 일반적으로 웹 페이지에서 주요 섹션의 제목이나 눈에 띄는 텍스트를 표시하는 데 사용

3. footer 

<footer class="container">
    <p>&copy; WebMarket</p>
</footer>

- © : 저작권표시 

4. 전체 페이지