728x90
태그마다 인라인,블록 요소를 제외하고도
css가 적용되는게 있고 안되는게 있는 것을 알았다
어떤거는 볼드만 먹히고 컬러가 안먹히는거나 백그라운드 컬러가 안먹힌다거나
처음에는 왜그러나 몇시간 동안 너무 답답했었다.
하루종일 사투 끝에 css 적용시키면서 원하는 이미지에 가까워졌다 힘들지만 뿌듯
css 파일
.nav_css{
color:#6c757d; font-weight: bold;
}
.signIn{
background-color: rgb(240, 128, 0);color: white; border-color: rgb(229, 206, 162);
}
.signUp{
color: rgb(240, 128, 0); border-color: rgb(240, 128, 0);
}
.cardInline{
display: inline-block;
}
.cardTitle{
font-size: 14px; font-weight: bold;
}
.reviewCategory{
font-size: 11px;
}
.reviewDate{
font-size: 11px; font-weight:500; color: #6c757d;
}
.reviewNormal{
font-size: 11px;
}
.reviewFeatureTitle{
font-size:12px; font-weight: bold;
}
html 파일
<!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"><strong></code>.</li>
<li><em>To italicize text</em>, use <code class="language-plaintext highlighter-rouge"><em></code>.</li>
<li>Abbreviations, like <abbr title="HyperText Markup Langage">HTML</abbr> should use <code class="language-plaintext highlighter-rouge"><abbr></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"><cite></code>.</li>
<li><del>Deleted</del> text should use <code class="language-plaintext highlighter-rouge"><del></code> and <ins>inserted</ins> text should use <code class="language-plaintext highlighter-rouge"><ins></code>.</li>
<li>Superscript <sup>text</sup> uses <code class="language-plaintext highlighter-rouge"><sup></code> and subscript <sub>text</sub> uses <code class="language-plaintext highlighter-rouge"><sub></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>
</div>
</div>
</main>
<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코딩][Java-JDBC] MVC패턴 Template클래스 - 각종 객체의 close기능 메소드 & 트랜잭션 기능 메소드 (0) | 2022.04.28 |
|---|---|
| [1일1코딩][bootstrap] 페이지네이션(Pagination) (0) | 2022.04.27 |
| [1일1코딩][bootstrap] 템플릿 적용 및 커스텀 해보기 (0) | 2022.04.25 |
| [1일1코딩][bootstrap] 시범사용2 : 스타터 코드 & 예제 템플릿 (0) | 2022.04.24 |
| [1일1코딩][JS] 배열(Array) & 배열의 메소드 (0) | 2022.04.23 |