반응형
디스플레이 스타일
<!DOCTYPE html>
<html>
<head>
<title>디스플레이 테스트</title>
<style>
.box{width: 500px;
height: 100px;
border: 2px solid #000;
margin-bottom: 20px;
}
.none{display: none; background-color: red;}
.block{display: block; background-color: blue;}
.inline{display: inline;background-color: orange;}
.inblock{display:inline-block;background-color: pink;}
.bg{width:80%; height: 300px;
border: 2px solid #000;
background-color: orange;
background-image: url('resource/img/bg_img2.jpg');
background-repeat: no-repeat;
/*background-size:contain;*/
background-size:100% auto;
background-position: center center;
}
</style>
</head>
<body>
<div class="bg">
test123
</div>
<div class="box">
<div class="none">display-test</div>
<div class="none">display-test</div>
</div>
<div class="box">
<div class="block">display-test</div>
<div class="block">display-test</div>
</div>
<div class="box">
<div class="inline">display-test</div>
<div class="inline">display-test</div>
</div>
<div class="box">
<div class="inblock">display-test</div>
<div class="inblock">display-test</div>
</div>
</body>
</html>폰트스타일
<!DOCTYPE html>
<html>
<head>
<title>글자테스트</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Nanum+Pen+Script&display=swap');
body{font-family: 'Black Han Sans', sans-serif;font-size:25px;}
.info{width:150px; border:1px solid #000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
<h3>폰트를 적용합시다</h3>
<span>보통</span><br/>
<span style="font-weight: bold;">굵게</span><br/>
<span style="line-height:60px;">글자높이</span><br/>
<span style="font-family: 'Nanum Pen Script', cursive;">폰트</span><br/>
</div>
<div class="info">
글자를 길게 쓰는 경우에는 디자인에서 잘라서 보여주는 것이 좋습니다.
</div>
</body>
</html>
displayTest.html
0.00MB
fontTest.html
0.00MB
resource.zip
10.23MB
반응형
'웹프로그래밍 기초 > B반소스자료' 카테고리의 다른 글
| slider (4) | 2023.06.01 |
|---|---|
| 위치속성과 변형,애니메이션 (0) | 2023.05.11 |
| CSS TEST (4) | 2023.04.06 |
| 레이아웃 & css (1) | 2023.03.30 |
| Table & Form Tag (176) | 2023.03.23 |
댓글