<!DOCTYPE html>
<html>
<head>
<title>My Blog</title>
<link rel="stylesheet" type="text/css" href="blog.css">
</head>
<body>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic|Source+Code+Pro:400,700'
rel='stylesheet' type='text/css'>
<!-- 이렇게 각문단에 class적용, post로 묶어서 어디까지가 첫 문단인지 나타내주면 깔끔한 코드를 할 수 있음. -->
<div class="post">
<!-- date도 똑같은 css를 적용해 줄 거니까 class로 묶어주고 -->
<div class="date">November 23 2015</div>
<h2>This Is My First Article</h2>
<!-- 문단 부분은 제목과 폰트가 다르므로 따로 클래스를 적용해주면 css 적용시키기가 또 쉬워진다. -->
<p class="quote">
Bacon ipsum dolor amet capicola strip steak landjaeger, biltong spare ribs rump cow ground round andouille
sirloin pork. Short ribs pig prosciutto swine. Flank turducken turkey rump, leberkas shoulder bresaola ham hock
tail drumstick corned beef. Venison pork chop beef jowl short ribs.
</p>
<p>Bresaola short ribs pastrami, beef ribs spare ribs kielbasa ham tongue kevin landjaeger chicken ball tip.
Pork chop beef kevin strip steak, chicken pork belly pastrami ham hock flank shoulder chuck turkey ribeye
andouille ball tip. Leberkas ham ham hock pork loin. Filet mignon bacon pancetta leberkas turducken fatback tongue
frankfurter jowl. Shoulder tenderloin chicken shank bacon shankle sirloin.</p>
<p>Pork pig pork loin prosciutto meatball turkey beef ribs ground round. Pork belly salami shank pork chop
turducken ribeye swine shoulder tri-tip fatback cupim short loin chuck strip steak. Rump pork chop t-bone.</p>
<hr>
</div>
<!-- <hr> -->
<div class="post">
<div class="date">December 11 2015</div>
<h2>This Is Another Article</h2>
<p class="quote">
Bacon ipsum dolor amet capicola strip steak landjaeger, biltong spare ribs rump cow ground round andouille
sirloin pork. Short ribs pig prosciutto swine. Flank turducken turkey rump, leberkas shoulder bresaola ham hock
tail drumstick corned beef. Venison pork chop beef jowl short ribs.
</p>
<p>Shankle beef ribs tongue strip steak flank landjaeger capicola hamburger chuck pancetta kevin. Sirloin
landjaeger chicken, bresaola brisket swine short ribs turkey short loin ball tip porchetta ham hock. Capicola
frankfurter jowl short loin. Kevin flank hamburger, beef venison shankle short loin bresaola frankfurter</p>
<p>Bresaola short ribs pastrami, beef ribs spare ribs kielbasa ham tongue kevin landjaeger chicken ball tip.
Pork chop beef kevin strip steak, chicken pork belly pastrami ham hock flank shoulder chuck turkey ribeye
andouille ball tip. Leberkas ham ham hock pork loin. Filet mignon bacon pancetta leberkas turducken fatback
tongue frankfurter jowl. Shoulder tenderloin chicken shank bacon shankle sirloin.</p>
</div>
</body>
</html>
- css
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);
/* 구글폰트에서 폰트 가져오기 */
body {
width: 80%;
border: 20px solid #bdc3c7;
font-family: 'Source Sans Pro', sans-serif;
padding: 20px;
margin: 20px auto;
max-width: 700px; /*Don't go any wider than 700px*/
}
body에 max-width 설명함으로써, 최대 700px까지 늘어나고 줄이면
.post {
margin-bottom: 20px;
}
.date {
color: #3498db;
letter-spacing: 0.2rem;
text-transform: uppercase;
}
/* 글자 사이의 간격: letter-spacing으로! */
.quote{
border-left: 5px solid #bdc3c7;
padding-left: 5px;
}
h2 {
font-size: 2.0rem;
font-weight: bold;
color: #2c3e50;
}
hr{
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
