문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

======Bootstrap Jumbotron======
<WRAP left notice 80%>
  * description : Bootstrap Jumbotron
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-23
</WRAP>
<WRAP clear></WRAP>
\\
======Bootstrap Jumbotron and Page Header======
=====Creating a Jumbotron=====
점보트론은 특별한 콘텐츠 또는 정보에 특별한 주의를 기울이게 하는 큰 상자를 나타냅니다.\\
\\
점보트론은 둥근 모서리의 회색 상자로 표시됩니다. 또한 내부 텍스트의 글꼴 크기를 확대합니다.\\
\\
**Tip:** jumbotron 안에는 다른 Bootstrap 요소 / 클래스를 포함하여 거의 모든 유효한 %%HTML%%을 넣을 수 있습니다.\\
\\
''%%.jumbotron%%'' 클래스와 함께 ''%%<div>%%'' 요소를 사용하여 jumbotron을 만듭니다.\\
\\
=====Jumbotron Inside Container=====
점보트론이 화면 가장자리까지 확장되지 않도록 하려면 ''%%<div class = "container">%%'' 내부에 점보트론을 배치합니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <div class="jumbotron">
            <h1>Bootstrap Tutorial</h1>
            <p>
                Bootstrap is the most popular HTML, CSS and JS framework for developing responsive, mobile-first projects on the web.
            </p>
        </div>
        <p>This is some text.</p>
        <P>This is another text.</P>
    </div>

</body>
</HTML>
\\
=====Jumbotron Outside Container=====
점보트론을 화면 가장자리까지 확장하려면, 점보트론을 ''%%<div class = "container">%%'' 외부에 배치합니다.\\
====예제====
<HTML>
<body>

    <div class="jumbotron">
        <h1>Jumbotron outside the container</h1>
        <p>Bootstrap is the most popular HTML, CSS, and JS Framework for developing responsive, mobile-first projects on the web.</p>
    </div>

    <div class="container">
        <p>This is some text.</p>
        <p>This is another text.</p>
    </div>

</body>
</HTML>
\\
=====Creating a Page Header=====
페이지 헤더(page header)는 섹션 구분자(section divider)와 같습니다.\\
\\
''%%.page-header%%'' 클래스는 제목 아래에 수평선을 추가합니다 (+ 요소 주위에 약간의 여분 공간을 추가):\\
\\
======Example Page Header======
''%%.page-header%%'' 클래스와 함깨 ''%%<div>%%''를 사용하여 페이지 헤더를 만듭니다:\\
====예제====
<HTML>
<body>

    <div class="container">
        <div class="page-header">
            <h1>Example Page Header</h1>
        </div>
    </div>
    <p>This is some text.</p>
    <p>This is another text.</p>

</body>
</HTML>







{{tag>오션 Bootstrap Jumbotron}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구