320x100
# 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.0">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div class="container">
<div class="item">Apple</div>
<div class="item">Banana</div>
<div class="item">Cherry</div>
</div>
</body>
</html># css영역
.container .item {
color: yellowgreen;
border: 2px solid black;
# 위에를 기준으로 설정된 2만큼 글자가 아래로 내려온다.
line-height: 2;
font-size: 24px;
font-style: italic;
# 글씨를 정 중앙으로 맞춰준다.
text-align: center;
}
.container .item:nth-child(2) {
font-weight: bold;
text-decoration: underline;
}300x250
'Web > Css' 카테고리의 다른 글
| css 활용4 배치 (0) | 2022.09.06 |
|---|---|
| css 활용3 배경 (0) | 2022.09.05 |
| css 활용1 박스 모델 (0) | 2022.09.05 |
| css 기초4 가상 요소 (0) | 2022.09.05 |
| css 기초3 가상 클래스 hover,active,nth-child 등 (0) | 2022.09.05 |