320x100
정 중앙 정렬 - 실패
하지만 외 적으로 유의미한 활용 코드가 있어서 주석과 함께 가져왔다.
# index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<!-- local css link -->
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="wrapper__head">
<h1 class="wrapper__head__title">
나만의 일기장
</h1>
<p class="wrapper__head__sub-title">
나만의 일기장입니다.<br>
원하는 색과 사이즈로 일기장을 커스텀 해보세요.<br>
<span id="point">
have a Good Day😀
</span>
</p>
</div>
<div class="wrapper__body">
<div class="wrapper__body__content">
<p class="diary-title">
🌂쭈꾸미의 일기(제목)
</p>
<p>
오늘은 <span class="kimchi">김치찜</span>을 먹었다(내용)<br>
<span class="highlight">내일은 이나니와 요스케를 먹고싶다.</span>
</p>
<p class="diary-date">
2022년 7월 5일<br>
날씨 흐림⭐️
</p>
</div>
</div>
</div>
</div>
</body>
</html># index.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
div.container {
background-color: aquamarine;
/* 수평정렬 셋트 start */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
/* 수평정렬 셋트 end */
/* 위와 아래에는 50px씩, 왼쪽과 오른쪽에는 각각 0씩 이라는 의미 */
padding: 50px 0;
}
.wrapper {
width: 620px;
padding: 40px 30px;
background-color: white;
border: 1px solid gray;
/* 모서리를 둥글게 하는 작업 */
border-radius: 10px;
}
.wrapper__head {
/* border를 기준으로 아래쪽에 옵션을 주기 */
/* 만약 border라고 하고 값을 입력하게 되면
border라고 설정된 곳의 사방에 값이 입력된다. */
border-bottom: 1px dashed gray;
/* border를 기준하여 padding을 아랫쪽에 20px 추가 */
padding-bottom: 20px;
/* margin을 기준하여 아랫쪽에 20px 추가 */
margin-bottom: 20px;
}
.wrapper__head__title {
font-size: 32px;
background-color: orange;
color: white;
/* 글씨 정렬 */
text-align: center;
padding: 5px;
margin-bottom: 10px;
}
.wrapper__head__sub-title {
font-size: 18px;
padding: 10px 0;
}
#point {
color: orange;
font-size: 22px;
font-weight: bold;
text-decoration: underline;
/* 속성을 변경 */
display: block;
}
.wrapper__body {
border: 1px solid #dddddd;
padding: 20px 30px;
}
.diary-title {
font-size: 18px;
font-weight: 600;
background-color: #f4f4f4;
margin-bottom: 20px;
}
.kimchi {
color: red;
font-weight: 600;
}
.highlight {
font-size: 22px;
color: blue;
font-weight: 600;
font-style: italic;
}
.diary-date {
color: #919191;
font-size: 14px;
text-align: right;
}300x250
'Web > Css' 카테고리의 다른 글
| CSS - padding의 재발견 (클릭 영역) (0) | 2023.01.09 |
|---|---|
| CSS - 선택자(first-child, last-child, nth-child)N번째에 css 적용 (0) | 2023.01.08 |
| (*매우중요) CSS - block요소, inline요소 (1) | 2023.01.07 |
| (*매우중요) CSS - box model(박스 모델) (0) | 2023.01.07 |
| CSS - css적용해도 변하지 않을때, %원리, 셋트로 이용하는css, css적용 확인 (1) | 2023.01.07 |
