728x90

 

부트스트랩 공홈의 예제 템플릿 중 블로그형 템플릿 하나를 골라서

이것저것 적용해보았다 

 

맛조 - 양식
양식 이미지
중화요리 팔공 리뷰
중식
중화요리 팔공

22.02.22 | 조회수 50회

위치 : 서울 관악구 신림동 10-621 지하 1층

간단 소개

푸짐한 양과 아낌없는 재료

중화요리 팔공 리뷰
중식
짜장면집

20.02.10 | 조회수 50회

위치 : 서울 관악구 신원로 16 1층

간단 소개

이보다 쌀 수 있을까? 극한의 가성비

...
중화요리 팔공

22.02.22 | 조회수 50회

위치 : 서울 관악구 신림동 10-621 지하 1층

간단 소개

푸짐한 양과 아낌없는 재료

중식

중화요리 팔공

22.02.22 | 조회수 50회

위치 : 서울 관악구 신림동 10-621 지하 1층

간단 소개

아낌 없는 재료와 푸짐한 양

중화요리 팔공 내돈내산 후기
PlaceholderThumbnail
중식

Post title

Nov 11

This is a wider card with supporting text below as a natural lead-in to additional content.

Continue reading
PlaceholderThumbnail

From the Firehose

Sample blog post

January 1, 2021 by Mark

This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

Blockquotes

This is an example blockquote in action:

Quoted text goes here.

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

Example lists

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout. This is an example unordered list:

  • First list item
  • Second list item with a longer description
  • Third list item to close it out

And this is an ordered list:

  1. First list item
  2. Second list item with a longer description
  3. Third list item to close it out

And this is a definition list:

HyperText Markup Language (HTML)
The language used to describe and define the content of a Web page
Cascading Style Sheets (CSS)
Used to describe the appearance of Web content
JavaScript (JS)
The programming language used to build advanced Web sites and applications

Inline HTML elements

HTML defines a long list of available inline tags, a complete list of which can be found on the Mozilla Developer Network.

  • To bold text, use <strong>.
  • To italicize text, use <em>.
  • Abbreviations, like HTML should use <abbr>, with an optional title attribute for the full phrase.
  • Citations, like — Mark Otto, should use <cite>.
  • Deleted text should use <del> and inserted text should use <ins>.
  • Superscript text uses <sup> and subscript text uses <sub>.

Most of these elements are styled by browsers with few modifications on our part.

Heading

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

Sub-heading

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

Example code block

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.

Another blog post

December 23, 2020 by Jacob

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

Longer quote goes here, maybe with some emphasized text in the middle of it.

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

Example table

And don't forget about tables in these posts:

Name Upvotes Downvotes
Alice 10 11
Bob 4 3
Charlie 7 9
Totals 21 23

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.

New feature

December 14, 2020 by Chris

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

  • First list item
  • Second list item with a longer description
  • Third list item to close it out

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.

About

Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.

Archives

  1. March 2021
  2. February 2021
  3. January 2021
  4. December 2020
  5. November 2020
  6. October 2020
  7. September 2020
  8. August 2020
  9. July 2020
  10. June 2020
  11. May 2020
  12. April 2020

Elsewhere

  1. GitHub
  2. Twitter
  3. Facebook
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>맛조 - 양식</title>


<!-- <link href="css/foods_styling.css" rel="stylesheet"> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<link rel="stylesheet" href="css/foods_styling.css" >

<style>
  .bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    }

    @media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }
</style>

</head>
<body>
  




  
<div class="container">
<header class="blog-header py-3">
  <div class="row flex-nowrap justify-content-between align-items-center">
    <div class="col-4 pt-1">
      <a class="link-secondary" href="#"> </a>
    </div>
    <div class="col-4 text-center">
      <a class="blog-header-logo text-dark" href="#">맛조(이미지 대체)</a>
    </div>
    <div class="col-4 d-flex justify-content-end align-items-center">
      <a class="link-secondary" href="#" aria-label="Search">
      </a>
      </a>
      <a class="btn btn-sm btn-outline-secondary signIn" href="#">Sign in</a>
      <a class="btn btn-sm btn-outline-secondary signUp" href="#">Sign up</a>
    </div>
  </div>
</header>

<div class="bbb nav-scroller py-1 mb-2 ">
  <nav class="nav d-flex justify-content-between" >
    <a class="p-2 text-decoration-none nav_css" href="#">한식</a>
    <a class="p-2 text-decoration-none nav_css" href="#">중식</a>
    <a class="p-2 text-decoration-none nav_css" href="#">양식</a>
    <a class="p-2 text-decoration-none nav_css" href="#">일식</a>
    <a class="p-2 text-decoration-none nav_css" href="#">디저트</a>
    <a class="p-2 text-decoration-none nav_css" href="#">공지사항</a>
  </nav>
</div>
</div>

<main class="container">
<div class="p-4 p-md-5 mb-4 text-white bg-dark">
  양식 이미지
</div>


<div class="card mb-3 cardInline" style="max-width: 380px;"> <!-- 380px -->
  <div class="row g-0">
    <div class="col-md-6">
      <img src="img/review01 palgong.png" class="img-fluid rounded-start" alt="중화요리 팔공 리뷰">
    </div>
    <div class="col-md-6">
      <div class="card-body">
        <strong class="d-inline-block mb-lg-1 text-success reviewCategory">중식</strong>
        <h5 class="card-title cardTitle">중화요리 팔공</h5>
        <p class="card-text mb-1 reviewDate">22.02.22 | 조회수 50회</p>
        <p class="card-text mb-auto reviewNormal">위치 : 서울 관악구 신림동 10-621 지하 1층</p>
        <p class="card-text mt-3 mb-auto reviewFeatureTitle">간단 소개</p>
        <p class="card-text reviewNormal">푸짐한 양과 아낌없는 재료</p>
        <!-- <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> -->
      </div>
    </div>
  </div>
</div>

<div class="card mb-3 cardInline" style="max-width: 380px;"> <!-- 380px -->
  <div class="row g-0">
    <div class="col-md-6">
      <img src="img/review02 zzangjang.png" class="img-fluid rounded-start" alt="중화요리 팔공 리뷰">
    </div>
    <div class="col-md-6">
      <div class="card-body">
        <strong class="d-inline-block mb-1 text-success reviewCategory">중식</strong>
        <h5 class="card-title cardTitle">짜장면집</h5>
        <p class="card-text mb-1 reviewDate">20.02.10 | 조회수 50회</p>
        <p class="card-text mb-auto reviewNormal">위치 : 서울 관악구 신원로 16 1층</p>
        <p class="card-text mt-3 mb-auto reviewFeatureTitle">간단 소개</p>
        <p class="card-text reviewNormal">이보다 쌀 수 있을까? 극한의 가성비</p>
        <!-- <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> -->
      </div>
    </div>
  </div>
</div>


<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="img/review01 palgong.png" class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title ">중화요리 팔공</h5>
        <p class="card-text mb-1 reviewDate">22.02.22 | 조회수 50회</p>
        <p class="card-text mb-auto reviewNormal">위치 : 서울 관악구 신림동 10-621 지하 1층</p>
        <p class="card-text mt-3 mb-auto reviewFeatureTitle">간단 소개</p>
        <p class="card-text reviewNormal">푸짐한 양과 아낌없는 재료</p>
        <!-- <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> -->
      </div>
    </div>
  </div>
</div>



<div class="row mb-2">
  <div class="col-md-6">
    <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
      <div class="col p-4 d-flex flex-column position-static">
        <strong class="d-inline-block mb-2 text-success ">중식</strong>
        <h3 class="mb-0 ">중화요리 팔공</h3>
        <div class="mb-1 text-muted reviewDate">22.02.22 | 조회수 50회</div>
        <p class="card-text mb-auto reviewLocation">위치 : 서울 관악구 신림동 10-621 지하 1층</p>
        <pre class="reviewFeatureTitle">간단 소개</pre>
        <p class="mb-auto">아낌 없는 재료와 푸짐한 양</p>
        <a href="https://zingunt2.tistory.com/82" target="_blank" class="stretched-link">중화요리 팔공 내돈내산 후기</a>
      </div>
      <div class="col-auto d-none d-lg-block">
        <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>

      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
      <div class="col p-4 d-flex flex-column position-static">
        <strong class="d-inline-block mb-2 text-success" >중식</strong>
        <h3 class="mb-0">Post title</h3>
        <div class="mb-1 text-muted">Nov 11</div>
        <p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="stretched-link">Continue reading</a>
      </div>
      <div class="col-auto d-none d-lg-block">
        <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>

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

<div class="row g-5">
  <div class="col-md-8">
    <h3 class="pb-4 mb-4 fst-italic border-bottom">
      From the Firehose
    </h3>

    <article class="blog-post">
      <h2 class="blog-post-title">Sample blog post</h2>
      <p class="blog-post-meta">January 1, 2021 by <a href="#">Mark</a></p>

      <p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.</p>
      <hr>
      <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
      <h2>Blockquotes</h2>
      <p>This is an example blockquote in action:</p>
      <blockquote class="blockquote">
        <p>Quoted text goes here.</p>
      </blockquote>
      <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
      <h3>Example lists</h3>
      <p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout. This is an example unordered list:</p>
      <ul>
        <li>First list item</li>
        <li>Second list item with a longer description</li>
        <li>Third list item to close it out</li>
      </ul>
      <p>And this is an ordered list:</p>
      <ol>
        <li>First list item</li>
        <li>Second list item with a longer description</li>
        <li>Third list item to close it out</li>
      </ol>
      <p>And this is a definition list:</p>
      <dl>
        <dt>HyperText Markup Language (HTML)</dt>
        <dd>The language used to describe and define the content of a Web page</dd>
        <dt>Cascading Style Sheets (CSS)</dt>
        <dd>Used to describe the appearance of Web content</dd>
        <dt>JavaScript (JS)</dt>
        <dd>The programming language used to build advanced Web sites and applications</dd>
      </dl>
      <h2>Inline HTML elements</h2>
      <p>HTML defines a long list of available inline tags, a complete list of which can be found on the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">Mozilla Developer Network</a>.</p>
      <ul>
        <li><strong>To bold text</strong>, use <code class="language-plaintext highlighter-rouge">&lt;strong&gt;</code>.</li>
        <li><em>To italicize text</em>, use <code class="language-plaintext highlighter-rouge">&lt;em&gt;</code>.</li>
        <li>Abbreviations, like <abbr title="HyperText Markup Langage">HTML</abbr> should use <code class="language-plaintext highlighter-rouge">&lt;abbr&gt;</code>, with an optional <code class="language-plaintext highlighter-rouge">title</code> attribute for the full phrase.</li>
        <li>Citations, like <cite>— Mark Otto</cite>, should use <code class="language-plaintext highlighter-rouge">&lt;cite&gt;</code>.</li>
        <li><del>Deleted</del> text should use <code class="language-plaintext highlighter-rouge">&lt;del&gt;</code> and <ins>inserted</ins> text should use <code class="language-plaintext highlighter-rouge">&lt;ins&gt;</code>.</li>
        <li>Superscript <sup>text</sup> uses <code class="language-plaintext highlighter-rouge">&lt;sup&gt;</code> and subscript <sub>text</sub> uses <code class="language-plaintext highlighter-rouge">&lt;sub&gt;</code>.</li>
      </ul>
      <p>Most of these elements are styled by browsers with few modifications on our part.</p>
      <h2>Heading</h2>
      <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
      <h3>Sub-heading</h3>
      <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
      <pre><code>Example code block</code></pre>
      <p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.</p>
    </article>

    <article class="blog-post">
      <h2 class="blog-post-title">Another blog post</h2>
      <p class="blog-post-meta">December 23, 2020 by <a href="#">Jacob</a></p>

      <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
      <blockquote>
        <p>Longer quote goes here, maybe with some <strong>emphasized text</strong> in the middle of it.</p>
      </blockquote>
      <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
      <h3>Example table</h3>
      <p>And don't forget about tables in these posts:</p>
      <table class="table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Upvotes</th>
            <th>Downvotes</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Alice</td>
            <td>10</td>
            <td>11</td>
          </tr>
          <tr>
            <td>Bob</td>
            <td>4</td>
            <td>3</td>
          </tr>
          <tr>
            <td>Charlie</td>
            <td>7</td>
            <td>9</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>Totals</td>
            <td>21</td>
            <td>23</td>
          </tr>
        </tfoot>
      </table>

      <p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.</p>
    </article>

    <article class="blog-post">
      <h2 class="blog-post-title">New feature</h2>
      <p class="blog-post-meta">December 14, 2020 by <a href="#">Chris</a></p>

      <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
      <ul>
        <li>First list item</li>
        <li>Second list item with a longer description</li>
        <li>Third list item to close it out</li>
      </ul>
      <p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.</p>
    </article>

    <nav class="blog-pagination" aria-label="Pagination">
      <a class="btn btn-outline-primary" href="#">Older</a>
      <a class="btn btn-outline-secondary disabled">Newer</a>
    </nav>

  </div>

  <div class="col-md-4">
    <div class="position-sticky" style="top: 2rem;">
      <div class="p-4 mb-3 bg-light rounded">
        <h4 class="fst-italic">About</h4>
        <p class="mb-0">Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.</p>
      </div>

      <div class="p-4">
        <h4 class="fst-italic">Archives</h4>
        <ol class="list-unstyled mb-0">
          <li><a href="#">March 2021</a></li>
          <li><a href="#">February 2021</a></li>
          <li><a href="#">January 2021</a></li>
          <li><a href="#">December 2020</a></li>
          <li><a href="#">November 2020</a></li>
          <li><a href="#">October 2020</a></li>
          <li><a href="#">September 2020</a></li>
          <li><a href="#">August 2020</a></li>
          <li><a href="#">July 2020</a></li>
          <li><a href="#">June 2020</a></li>
          <li><a href="#">May 2020</a></li>
          <li><a href="#">April 2020</a></li>
        </ol>
      </div>

      <div class="p-4">
        <h4 class="fst-italic">Elsewhere</h4>
        <ol class="list-unstyled">
          <li><a href="#">GitHub</a></li>
          <li><a href="#">Twitter</a></li>
          <li><a href="#">Facebook</a></li>
        </ol>
      </div>
    </div>
  </div>
</div>

</main>

<footer class="blog-footer">
<p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p>
  <a href="#">top</a>
</p>
</footer>





<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
728x90
반응형
저작자표시

'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글

[1일1코딩][bootstrap] 페이지네이션(Pagination)  (0) 2022.04.27
[1일1코딩][bootstrap] 템플릿 적용 + css 적용  (0) 2022.04.26
[1일1코딩][bootstrap] 시범사용2 : 스타터 코드 & 예제 템플릿  (0) 2022.04.24
[1일1코딩][JS] 배열(Array) & 배열의 메소드  (0) 2022.04.23
[1일1코딩][bootstrap] 시범사용 & 연결  (0) 2022.04.22
728x90

어떻게 나오는지 한번씩 시험삼아 해 본 코드

 

Hello, world!

Hello, world!

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + , This text is meant to be treated as sample output from a computer program. 볼드체 적용?

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
primary
secondary
success
primary secondary ... primary secondary



Example heading New

728x90
반응형
저작자표시

'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글

[1일1코딩][bootstrap] 템플릿 적용 + css 적용  (0) 2022.04.26
[1일1코딩][bootstrap] 템플릿 적용 및 커스텀 해보기  (0) 2022.04.25
[1일1코딩][JS] 배열(Array) & 배열의 메소드  (0) 2022.04.23
[1일1코딩][bootstrap] 시범사용 & 연결  (0) 2022.04.22
[1일1코딩][HTML,CSS,JS] 로그인 만들어보기1  (0) 2022.04.21

+ Recent posts

티스토리툴바