TIL 24/07/08
1. 아래 blog를 구현하시오
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<title>Hello, world!</title>
<style>
.blog-header-logo, h1, h2, h3{
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-size: 2.25rem;
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="row justify-content-between align-items-center border-bottom py-3">
<div class="col-4"><a class="text-muted" href="#">Subscribe</a></div>
<div class="col-4 text-center"><a class="text-dark blog-header-logo" href="#">Large</a></div>
<div class="col-4 d-flex justify-content-end align-items-center">
<a href="#"><i class="bi bi-search px-2 my-auto"></i></a>
<a href="#" class="btn btn-sm btn-outline-secondary">Sign up</a>
</div>
</div>
<div class="py-1 mb-2">
<nav class="nav d-flex justify-content-between flex-nowrap">
<a class="p-2 link-secondary" href="#">World</a>
<a class="p-2 link-secondary" href="#">U.S.</a>
<a class="p-2 link-secondary" href="#">Technology</a>
<a class="p-2 link-secondary" href="#">Design</a>
<a class="p-2 link-secondary" href="#">Culture</a>
<a class="p-2 link-secondary" href="#">Business</a>
<a class="p-2 link-secondary" href="#">Politics</a>
<a class="p-2 link-secondary" href="#">Opinion</a>
<a class="p-2 link-secondary" href="#">Science</a>
<a class="p-2 link-secondary" href="#">Health</a>
<a class="p-2 link-secondary" href="#">Style</a>
<a class="p-2 link-secondary" href="#">Travel</a>
</nav>
</div>
</header>
<main>
<section class="border bg-dark text-white p-4 p-md-5 mb-4 rounded">
<div class="col-md-6">
<h1 class="display-4 fst-italic">Title of a longer featured blog post</h1>
<p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
<p><a href="#" class="text-white fw-bold lead">Continue reading...</a></p>
</div>
</section>
<section class="row row-cols-md-2 row-cols-1">
<div class="col">
<div class="card mb-3">
<div class="row g-0">
<div class="col-lg-8">
<div class="card-body">
<h6 class="card-title mb-2 text-primary"><strong>World</strong></h6>
<h3 class="mb-0"><small>Featured post</small></h3>
<p class="text-body-secondary mb-1">Nov 12</p>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a class="" href="#">Countinue reading</a>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<img style="height: 230px;" src="profile.jpg" class="img-fluid rounded-end" alt="...">
</div>
</div>
</div>
</div>
<div class="col">
<div class="card mb-3">
<div class="row g-0">
<div class="col-lg-8">
<div class="card-body">
<h6 class="card-title mb-2 text-primary"><strong>World</strong></h6>
<h3 class="mb-0"><small>Featured post</small></h3>
<p class="text-body-secondary mb-1">Nov 12</p>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a class="" href="#">Countinue reading</a>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<img style="height: 230px;" src="profile.jpg" class="img-fluid rounded-end" alt="...">
</div>
</div>
</div>
</div>
</section>
<section class="row">
<div class="col-lg-8">
<h2 class="py-2 fst-italic"><small>From the Firehose</small></h2>
<hr>
<h1 class="display-5">Sample blog post</h1>
<p class="text-secondary">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>
<h4>Quoted text goes here.</h4>
<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>Example lists</h2>
<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>
<p class="fw-bold mb-0">HyperText Markup Language (HTML)</p>
<p>The language used to describe and define the content of a Web page</p>
<p class="fw-bold mb-0">Cascading Style Sheets (CSS)</p>
<p>Used to describe the appearance of Web content</p>
<p class="fw-bold mb-0">JavaScript (JS)</p>
<p>The programming language used to build advanced Web sites and applications</p>
<h1>Inline HTML elements</h1>
<p>HTML defines a long list of available inline tags, a complete list of which can be found on the <a href="#">Mozilla Developer Network.</a></p>
</div>
<div class="col-lg-4">
<div class="bg-dark text-white p-4 rounded">
<h2 class="fst-italic"><small>About</small></h2>
<p>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>
</section>
</main>
</div>
</body>
</html>
공부중