2019/09/19 - [HTML | CSS] - <이공계기술전문연수> 9. CSS 스타일 속성 기본(1)(크기, 색상, 가시, 박스, 테두리)
<이공계기술전문연수> 9. CSS 스타일 속성 기본(1)(크기, 색상, 가시, 박스, 테두리)
1. 크기 단위 단위 설명 % 백분율 em 배수 px 픽셀 2. 색상 단위 단위 설명 #000000 HEX 코드 rgb(red,green,blue) RGB 색상 rgba(red,green,blue,alpha) RGBA 색상 hsl(hue,saturation,lightness) HSL 색상 hsla(..
jiaaan90.tistory.com
2019/09/19 - [HTML | CSS] - <이공계기술전문연수> 10. CSS 스타일 속성 기본(2)(폰트, 위치, float, clear:both, 그림자, 그라디언트)
<이공계기술전문연수> 10. CSS 스타일 속성 기본(2)(폰트, 위치, float, clear:both, 그림자, 그라디언트)
1. 폰트 속성 글자의 크기를 지정하는 스타일 속성이다. 크기 단위 등을 사용한다. font-size:30px; font-size:3em; font-size:large; font-size:small; font-family 속성 폰트를 지정하는 스타일 속성이다. font-..
jiaaan90.tistory.com
<<실습>>
tistory html 모드에서 코드를 올렸을때, 같은 클래스가 존재해서 글이 오류가 생겨 코드블럭만 올림
1.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<style>
#div1{
width :300px;
height: 300px;
border: 1px solid black;
}
#div2{
width:20%;
height:20%;
border: 1px solid red;
}
#div3{
width:50%;
height:50%;
border: 1px solid blue;
}
a{
border : 1px solid black;
}
</style>
<div id = "div1">
<div id = "div3">
<div id = "div2">
</div>
</div>
</div>
<hr>
<style>
.display-test{
width: 200px;
height: 200px;
background: orange;
}
#div4:active{
display: none;
}
a{
border : 1px solid black;
width: 400px;
height: 300px;
display : block;
}
#div5{
background: red;
display: inline-block;
height: 100px;
}
#div6{
background: yellow;
display: inline-block;
}
#div7{
background: green;
display: inline-block;
}
#div8{
background: blue;
display: inline-block;
}
</style>
<a href="#"> A태그 테스트 </a>
<hr><br>
<h3>디스플레이 속성(none) </h3>
<div id="div4" class="display-test">테스트 문구</div>
<a href="#">A태그 테스트</a>
<hr><br>
<div id = "div5" class ="dispaly-test">테스트</div>
<div id = "div6" class ="dispaly-test">테스트</div>
<div id = "div7" class ="dispaly-test">테스트</div>
<div id = "div8" class ="dispaly-test">테스트</div>
<hr>
<style>
.border-test{
width: 200px;
height: 200px;
border-width: 5px;
}
#border1{border-style: dashed;
border-top-width: 20px;
border-bottom-color: red;
}
#border2{border-style: dotted;
border-right-width: 20px;
border-color: red;
}
#border3{border-style: double;
border-left-width: 20px;
}
#border4{border-style: groove;
border-bottom-width: 20px;
}
#border5{border-style: inset;
border-top-width: thin;
}
#border6{border-style: outset;
border-top-width: medium;
}
#border7{border-style: ridge;
border-top-width: thick;
}
#border8{border-style: solid;
border-width: thick;
}
#border9{
border-bottom: 2px solid red;
}
#border10{
border: 10px dashed blue;
}
</style>
<h3>테두리</h3>
<div id="border1" class="border-test"></div><br>
<div id="border2" class="border-test"></div>
<div id="border3" class="border-test"></div>
<div id="border4" class="border-test"></div>
<div id="border5" class="border-test"></div>
<div id="border6" class="border-test"></div>
<div id="border7" class="border-test"></div>
<div id="border8" class="border-test"></div>
<br>
<div id="border9" class="border-test"></div>
<br>
<div id="border10" class="border-test"></div>
<br><br><hr><br><br>
<style>
.rad-test{
width: 100px;
height: 100px;
border-width: 3px;
border-style: solid;
}
#rad-test1{
border-top-left-radius: 50px;
}
#rad-test2{
border-top-right-radius: 50px;
}
#rad-test3{
border-bottom-left-radius: 50px;
}
#rad-test4{
border-bottom-right-radius: 50px;
}
#rad-test5{
border-radius: 50px;
}
#rad-test6{
border-radius: 20px 50px;
}
#rad-test7{
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
</style>
<div id="rad-test1" class="rad-test"></div>
<div id="rad-test2" class="rad-test"></div>
<div id="rad-test3" class="rad-test"></div>
<div id="rad-test4" class="rad-test"></div>
<div id="rad-test5" class="rad-test"></div>
<div id="rad-test6" class="rad-test"></div>
<div id="rad-test7" class="rad-test"></div>
</body>
</html>
2.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<style>
#table{
width: 500px;
height: 500px;
margin: 0 auto;
}
td{
border: 5px dashed black;
}
#top-left{
border-top-left-radius: 50px;
border-color: blue;
border-top-style: solid;
border-left-style: solid;
}
#top-right{
border-top-right-radius: 50px;
border-color : green;
border-top-style: solid;
border-right-style: solid;
}
#bottom-left{
border-bottom-left-radius: 50px;
border-color : yellow;
border-bottom-style: solid;
border-left-style: solid;
}
#bottom-right{
border-bottom-right-radius: 50px;
border-color : red;
border-bottom-style: solid;
border-right-style: solid;
}
#table tr:nth-child(2) td:nth-child(2){
border-style: dotted;
border-color : hotpink;
}
</style>
<table id = "table">
<tr>
<td id = "top-left"></td>
<td></td>
<td id = "top-right"></td>
</tr>
<tr>
<td></td>
<td></td>
<td ></td>
</tr>
<tr>
<td id = bottom-left></td>
<td></td>
<td id = bottom-right></td>
</tr>
</table>
<br>
<hr>
<style>
.margin-test{
width: 200px;
height: 200px;
border: 5px solid black;
margin-bottom: 100px;
margin-top: 100px;
margin-left: 100px;
}
#pad1{
padding-top: 100px;
}
#pad2{
padding-left: 100px;
}
#pad3{
padding: 100px;
}
</style>
<div id ="pad1" div class = "margin-test">
<p>padding-top 100px</p>
</div>
<div id ="pad2" class = "margin-test">
<p>padding-left 100px</p>
</div>
<div id = "pad3" class = "margin-test">
<p>padding 100px</p>
</div>
<hr>
<style>
.size-test{
border : 20px solid blue;
width: 200px;
height: 200px;
padding: 30px;
margin: 20px;
}
#size1{
box-sizing: border-box;
}
#size2{
box-sizing: content-box;
}
</style>
<div id="size1" class="size-test">
border-box</div>
<div id="size2" class="size-test">
content-box</div>
<hr>
<style>
#position{
position : static;
border : 5px solid blue;
width: 200px;
height: 200px;
left: 100px;
top: 100px;
}
#p1{
background: yellow;
width: 50px;
height: 50px;
position: relative;
left : 100px;
right: 100px;
}
#p2{
background: purple;
width: 50px;
height: 50px;
position: relative;
left : 100px;
right: 100px;
}
#fixed{
width:100px;
height: 100px;
background: red;
position: fixed;
border: 1px solid black;
top: 100px;
left: 100px;
z-index: 1000;
}
</style>
<div id = "position">
<p id = "p1"></p>
<p id = "p2"></p>
</div>
<div id = "fixed"></div>
<hr>
<style>
#p4{
visibility: hidden;
}
</style>
<p id = "p3">테스트</p>
<p id = "p4">테스트</p>
<p id = "p5">테스트</p>
<hr><hr>
<style>
#wrap{
border : 5px solid red;
width : 500px;
height: 500px;
position: relative;
}
.z{
position: absolute;
width: 200px;
height: 200px;
}
#z-test1{
background: yellow;
top: 50px;
left: 100px;
z-index: 13;
}
#z-test2{
background: blue;
top: 100px;
left: 150px;
z-index: 11;
}
#z-test3{
background: purple;
top: 150px;
left: 200px;
z-index: 12;
}
</style>
<div id="wrap">
<div id ="z-test1" class="z">요소1
</div>
<div id ="z-test2" class="z">요소2
</div>
<div id ="z-test3" class="z">요소3
</div>
</div>
<hr>
<hr>
<style>
.float-test{
width: 100px;
float: left;
}
.test6{
clear: left;
}
</style>
<ul>
<li class = "float-test">test1</li>
<li class = "float-test">test2</li>
<li class = "float-test">test3</li>
<li class = "float-test">test4</li>
<li class = "float-test">test5</li>
<li class = "test6">test6</li>
<li>test7</li>
</ul>
<hr>
<style>
.over-test{
height: 100px;
width: 100px;
border: 1px solid black;
margin: 50px;
font-size: 20px;
}
#d1{
overflow: scroll;
}
#d2{
overflow: auto;
}
#d3{
overflow: hidden;
}
#d4{
overflow: visible;
}
</style>
<div id ="d1" class="over-test">
자바 Framework 기반 웹 응용 SW개발자 양성과정 자바 Framework 기반 웹 응용 SW개발자 양성과정
</div>
<div id ="d2" class="over-test">
자바 Framework 기반 웹 응용 SW개발자 양성과정 자바 Framework 기반 웹 응용 SW개발자 양성과정
</div>
<div id ="d3" class="over-test">
자바 Framework 기반 웹 응용 SW개발자 양성과정 자바 Framework 기반 웹 응용 SW개발자 양성과정
</div>
<div id ="d4" class="over-test">
자바 Framework 기반 웹 응용 SW개발자 양성과정 자바 Framework 기반 웹 응용 SW개발자 양성과정
</div>
<br><br><br><br><br><br><br><br><br><br><hr>
<style>
.shadow{
width: 500px;
padding: 10px;
margin-bottom: 20px;
background: yellow;
}
#s1{
box-shadow: 5px 5px;
}
#s2{
box-shadow: 5px 5px 5px;
}
#s3{
box-shadow: 5px 5px 5px 5px;
}
#s4{
box-shadow: 5px 5px 5px 5px blue;
</style>
<div id = "s1" class="shadow">
<p>박스 그림자 효과 테스트</p>
</div>
<div id = "s2" class="shadow">
<p>박스 그림자 효과 테스트</p>
</div>
<div id = "s3" class="shadow">
<p>박스 그림자 효과 테스트</p>
</div>
<div id = "s4" class="shadow">
<p>박스 그림자 효과 테스트</p>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>'이공계전문기술연수 > HTML | CSS' 카테고리의 다른 글
| <이공계기술전문연수> 12. CSS 스타일 속성 기본(4) 실습 (0) | 2019.09.20 |
|---|---|
| <이공계기술전문연수> 11. CSS 스타일 속성 기본(3) 실습 (0) | 2019.09.20 |
| <이공계기술전문연수> 10. CSS 스타일 속성 기본(2)(폰트, 위치, float, clear:both, 그림자, 그라디언트) (0) | 2019.09.19 |
| <이공계기술전문연수> 9. CSS 스타일 속성 기본(1)(크기, 색상, 가시, 박스, 테두리) (0) | 2019.09.19 |
| <이공계기술전문연수> 8. CSS 선택자 (0) | 2019.09.16 |
