고정 헤더 영역
상세 컨텐츠
본문
728x90
반응형
liline-block
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles/main.css" />
<title>CSS</title>
</head>
<body>
<input type="text" value="1" />
<input type="text" value="2" />
<input type="text" value="3" />
</body>
</html>
CSS
input {
width: 50px;
height: 100px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles/main.css" />
<title>CSS</title>
</head>
<body>
<div class="box1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, similique
reiciendis sequi culpa quo veniam aperiam natus vitae, magni itaque
distinctio dolores earum delectus laboriosam obcaecati eaque animi? Est,
veniam?
</div>
<div class="box2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, similique
reiciendis sequi culpa quo veniam aperiam natus vitae, magni itaque
distinctio dolores earum delectus laboriosam obcaecati eaque animi? Est,
veniam?
</div>
<div class="box3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, similique
reiciendis sequi culpa quo veniam aperiam natus vitae, magni itaque
distinctio dolores earum delectus laboriosam obcaecati eaque animi? Est,
veniam?
</div>
</body>
</html>
CSS
div {
height: 200px;
border: solid;
}
.box2 {
visibility: hidden;
}
.box1 {
background-color: darkgoldenrod;
}
.box2 {
background-color: tomato;
}
.box3 {
background-color: yellow;
}
span {
display: block;
width: 30px;
height: 40px;
display: inline-block;
background-color: blue;
}
728x90
반응형
'IT > CSS' 카테고리의 다른 글
| CSS 소개 (1) | 2023.09.09 |
|---|---|
| CSS를 적용하는 방법 (1) | 2023.09.08 |
