반응형
디스플레이 속성
<!DOCTYPE html>
<html>
<head>
<title>디스플레이 테스트</title>
<style>
.box{
width: 500px;
height: 150px;
border:2px solid #000;
margin-bottom: 20px;
}
.none{display: none; background-color:red;}
.block{display:block; background-color: blue;}
.inline{display:inline;background-color: pink;}
.inblock{display:inline-block;background-color: orange;}
.bg{
width: 80%; height: 500px;
border:2px solid #000;
background-color: pink;
background-image: url('resource/img/bg_img2.jpg');
background-repeat:no-repeat;
background-size:110% auto;
background-position: center center;
}
</style>
</head>
<body>
<div class="bg">
</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: 35px;}
.text{
width:150px;
border: 1px solid #000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}l
</style>
</head>
<body>
<div class="text">
글자수를 잘라야하는데 그러려면 길게써야하는데 아무렇게 써보세요.
</div>
<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>
</body>
</html>
displayTest.html
0.00MB
fontTest.html
0.00MB
resource.zip
7.18MB
반응형
'웹프로그래밍 기초 > A반소스자료' 카테고리의 다른 글
| 실습소스 (0) | 2023.05.12 |
|---|---|
| 위치속성과 변형/애니메이션 (0) | 2023.05.11 |
| CSS 테스트 (0) | 2023.04.06 |
| 레이아웃 & CSS (3) | 2023.03.30 |
| table & form Tag (0) | 2023.03.23 |
댓글