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
<<실습>>
1.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
<style>
body{
background-color: orange;
}
#div1,#div2{
background-color: white;
width:300px;
height:300px;
margin: 10px;
border: 30px solid black;
padding: 30px;
background-clip: content-box;
}
</style>
<div id = "div1">
안녕하세요<br>
CSS재미있나요?</div>
<div id = "div2"></div>
<br><br>
<style>
#div3{
background-color: white;
width : 500px;
height : 500px;
background-image: url(img/kakao.jpg);
background-repeat: no-repeat;
background-position: 20% 70%;
}
</style>
<div id = "div3"></div>
<br><br>
<style>
body{
background-image: url(img/99B18F445A6BF8791EF18A.gif);
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
-->
<style>
.gradient{
width : 300px;
height: 300px;
border: 1px solid black;
}
#gr1{
background: linear-gradient(to bottom, blue, white);
}
#gr2{
background: linear-gradient(45deg,blue,white);
}
#gr3{
background: linear-gradient(red,orange 15%, yellow 30%, green 45%, blue 60%, navy 75%, purple 90%);
}
#gr4{
background: repeating-linear-gradient(to right, blue, red 25%);
}
</style>
<h1>선형 그라데이션</h1>
<p>색상이 수직, 수평, 대각선으로 일정하게 변하는 것</p>
<h4>색상만 지정</h4>
<div id="gr1" class="gradient"></div>
<h4>각도를 지정</h4>
<div id="gr2" class="gradient"></div>
<h4>중간색 지정</h4>
<div id="gr3" class="gradient"></div>
<h4>그라데이션 반복</h4>
<div id="gr4" class="gradient"></div>
<br><br><hr>
<h1> 원형 그라데이션 </h1>
<p> 색상이 원이나 타원의 중심부터 동심원을 그리며 바깥방향으로 색상 변경</p>
<p>모양 circle 원형, elipse 타원형</p>
<p>
크기<br>
closet-side : 중심에서 가장 가까운 변과 중심거리가 원형의 반지름<br>
closet-corner : 중심에서 가장 가까운 모서리와 중심거리가 원형의 반지름
farthest-side : 중심에서 가장 먼 변과 중심거리가 원형의 반지름<br>
farthest-conner : 중심에서 가장 먼 모서리와 원형 중심거리가 원형의 반지름
</p>
<style>
.circle{
width: 500px;
height: 300px;
border: 1px solid black;
}
#gr5{
background: radial-gradient(purple,navy,blue,green,yellow,orange,red);
}
#gr6{
background: radial-gradient(circle,white,blue,red);
}
#gr7{
background: -webkit-radial-gradient(90% 90%,circle,white,blue,red);
}
#gr8{
background: -webkit-radial-gradient(30% 40%,circle closest-side,white,blue,red);
}
#gr9{
background: -webkit-radial-gradient(30% 40%, circle closest-corner, white,blue,red);
}
#gr10{
background: -webkit-radial-gradient(30% 40%, circle farthest-side, white,blue,red);
}
#gr11{
background: -webkit-radial-gradient(30% 40%, circle farthest-corner, white,blue,red);
}
#gr12{
background: -webkit-repeating-radial-gradient(white,blue,red 5%);
}
</style>
<h4>색상만 지정</h4>
<div id="gr5" class="circle"></div>
<h4>모양 지정</h4>
<div id="gr6" class="circle"></div>
<h4>시작점 지정</h4>
<div id="gr7" class="circle"></div>
<h4>원크기 지정</h4>
<div id="gr8" class="circle"></div>
<h4>원크기 지정</h4>
<div id="gr9" class="circle"></div>
<h4>원크기 지정</h4>
<div id="gr10" class="circle"></div>
<h4>원크기 지정</h4>
<div id="gr11" class="circle"></div>
<h4>원형그라데이션 반복</h4>
<div id="gr12" class="circle"></div>
</body>
</html>
2.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<style>
#font2{
font-family: cursive;
}
#font3{
font-family: fantasy;
}
#font4{
font-family: inherit;
}
#font6{
font-family: serif;
}
</style>
<h1>글꼴 관련 스타일</h1>
<hr>
<h3>font-family 속성 : 텍스트의 글꼴을 지정 할 대 사용한다.</h3>
<p id = "font1">선택자 {font-family : 글꼴이름;}의 형식으로 사용된다.</p>
<p id = "font2">글꼴 변경 테스트1</p>
<p id = "font3">글꼴 변경 테스트2</p>
<p id = "font4">글꼴 변경 테스트3</p>
<h3>**웹 폰트 사용하는 방법</h3>
<p id = "font5">웹 폰트 제공 사이트 예시 : <a href="
https://fonts.google.com/">구글 웹폰트 사이트로</a></p>
<p id = "font6">font style test</p>
<hr><hr>
<style>
#px{
font-size: 50px;
}
#em{
font-size: 2em;
}
#percent{
font-size: 5%;
}
</style>
<h3>font-size 속성 : 텍스트의 크기를 변경할 때 사용한다.</h3>
<p>선택자{font-size:크기;}의 형식으로 사용된다.</p>
<ul>
<li id ="px">고정크기 px 테스트</li>
<li id ="em">가변크기 em 테스트</li>
<li id ="percent">가변크기 % 테스트</li>
</ul>
<hr><hr>
<style>
#weighttest1{
font-weight: bold;
}
#weighttest2{
font-weight: lighter;
}
#weighttest3{
font-weight: bolder
}
</style>
<h3>font-weight 속성 : 두꺼운 글씨를 표현 할 때 사용한다.</h3>
<p>선택자{font-weight : namal|bold|bolder|lighter|100|400|900;}의 형식으로 표현한다.</p>
<ul>
<li id="weighttest1">굵은 글꼴로 변경</li>
<li id="weighttest2">원래 굵기보다 더 가늘게</li>
<li id="weighttest3">원래 굵기보다 더 굴게</li>
</ul>
<hr><hr>
<style>
#variant2{
font-variant: normal;
}
#variant3{
font-variant: small-caps;
}
</style>
<h3>font-variant속성 : 작은 대문자로 변경할 때 사용한다.</h3>
<p id = "variant1">선택자 {font-variant : 속성값;} 의 형식으로 사용된다.</p>
<p id = "variant2">i love you</p>
<p id = "variant3">i love you</p>
<hr><hr>
<style>
#fontstyle1{
font-style: italic;
}
#fontstyle2{
font-style: oblique;
}
</style>
<h3>font-style 속성 : 텍스트의 기울임을 지정할 때 사용한다.</h3>
<p>선택자 {font-style : normal | italic | oblique;}의 형식으로 사용한다.</p>
<ul>
<li id ="fontstyle1">italic 기울임 글꼴</li>
<li id ="fontstyle2">oblique 기울임 글꼴</li>
</ul>
<hr><hr>
<style>
#font1{
font: italic small-caps;
}
#font2{
font: italic
}
</style>
<h3>font 속성 : 글꼴 관련 스타일을 한번에 지정 할 때 사용한다.</h3>
<p>선택자 {font : font-style font-variant font-weght font-size/line-height font-family; 의 형식으로 사용한다.</p>
<ul>
<li id ="font1">글꼴 관련 스타일 테스트1</li>
<li id ="font2">글꼴 관련 스타일 테스트2</li>
</ul>
'이공계전문기술연수 > HTML | CSS' 카테고리의 다른 글
| <이공계기술전문연수> 13. CSS 스타일 속성 기본(5) 실습 (0) | 2019.09.20 |
|---|---|
| <이공계기술전문연수> 12. CSS 스타일 속성 기본(4) 실습 (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 |
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
<<실습>>
1.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
<style>
body{
background-color: orange;
}
#div1,#div2{
background-color: white;
width:300px;
height:300px;
margin: 10px;
border: 30px solid black;
padding: 30px;
background-clip: content-box;
}
</style>
<div id = "div1">
안녕하세요<br>
CSS재미있나요?</div>
<div id = "div2"></div>
<br><br>
<style>
#div3{
background-color: white;
width : 500px;
height : 500px;
background-image: url(img/kakao.jpg);
background-repeat: no-repeat;
background-position: 20% 70%;
}
</style>
<div id = "div3"></div>
<br><br>
<style>
body{
background-image: url(img/99B18F445A6BF8791EF18A.gif);
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
-->
<style>
.gradient{
width : 300px;
height: 300px;
border: 1px solid black;
}
#gr1{
background: linear-gradient(to bottom, blue, white);
}
#gr2{
background: linear-gradient(45deg,blue,white);
}
#gr3{
background: linear-gradient(red,orange 15%, yellow 30%, green 45%, blue 60%, navy 75%, purple 90%);
}
#gr4{
background: repeating-linear-gradient(to right, blue, red 25%);
}
</style>
<h1>선형 그라데이션</h1>
<p>색상이 수직, 수평, 대각선으로 일정하게 변하는 것</p>
<h4>색상만 지정</h4>
<div id="gr1" class="gradient"></div>
<h4>각도를 지정</h4>
<div id="gr2" class="gradient"></div>
<h4>중간색 지정</h4>
<div id="gr3" class="gradient"></div>
<h4>그라데이션 반복</h4>
<div id="gr4" class="gradient"></div>
<br><br><hr>
<h1> 원형 그라데이션 </h1>
<p> 색상이 원이나 타원의 중심부터 동심원을 그리며 바깥방향으로 색상 변경</p>
<p>모양 circle 원형, elipse 타원형</p>
<p>
크기<br>
closet-side : 중심에서 가장 가까운 변과 중심거리가 원형의 반지름<br>
closet-corner : 중심에서 가장 가까운 모서리와 중심거리가 원형의 반지름
farthest-side : 중심에서 가장 먼 변과 중심거리가 원형의 반지름<br>
farthest-conner : 중심에서 가장 먼 모서리와 원형 중심거리가 원형의 반지름
</p>
<style>
.circle{
width: 500px;
height: 300px;
border: 1px solid black;
}
#gr5{
background: radial-gradient(purple,navy,blue,green,yellow,orange,red);
}
#gr6{
background: radial-gradient(circle,white,blue,red);
}
#gr7{
background: -webkit-radial-gradient(90% 90%,circle,white,blue,red);
}
#gr8{
background: -webkit-radial-gradient(30% 40%,circle closest-side,white,blue,red);
}
#gr9{
background: -webkit-radial-gradient(30% 40%, circle closest-corner, white,blue,red);
}
#gr10{
background: -webkit-radial-gradient(30% 40%, circle farthest-side, white,blue,red);
}
#gr11{
background: -webkit-radial-gradient(30% 40%, circle farthest-corner, white,blue,red);
}
#gr12{
background: -webkit-repeating-radial-gradient(white,blue,red 5%);
}
</style>
<h4>색상만 지정</h4>
<div id="gr5" class="circle"></div>
<h4>모양 지정</h4>
<div id="gr6" class="circle"></div>
<h4>시작점 지정</h4>
<div id="gr7" class="circle"></div>
<h4>원크기 지정</h4>
<div id="gr8" class="circle"></div>
<h4>원크기 지정</h4>
<div id="gr9" class="circle"></div>
<h4>원크기 지정</h4>
<div id="gr10" class="circle"></div>
<h4>원크기 지정</h4>
<div id="gr11" class="circle"></div>
<h4>원형그라데이션 반복</h4>
<div id="gr12" class="circle"></div>
</body>
</html>
2.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<style>
#font2{
font-family: cursive;
}
#font3{
font-family: fantasy;
}
#font4{
font-family: inherit;
}
#font6{
font-family: serif;
}
</style>
<h1>글꼴 관련 스타일</h1>
<hr>
<h3>font-family 속성 : 텍스트의 글꼴을 지정 할 대 사용한다.</h3>
<p id = "font1">선택자 {font-family : 글꼴이름;}의 형식으로 사용된다.</p>
<p id = "font2">글꼴 변경 테스트1</p>
<p id = "font3">글꼴 변경 테스트2</p>
<p id = "font4">글꼴 변경 테스트3</p>
<h3>**웹 폰트 사용하는 방법</h3>
<p id = "font5">웹 폰트 제공 사이트 예시 : <a href="
https://fonts.google.com/">구글 웹폰트 사이트로</a></p>
<p id = "font6">font style test</p>
<hr><hr>
<style>
#px{
font-size: 50px;
}
#em{
font-size: 2em;
}
#percent{
font-size: 5%;
}
</style>
<h3>font-size 속성 : 텍스트의 크기를 변경할 때 사용한다.</h3>
<p>선택자{font-size:크기;}의 형식으로 사용된다.</p>
<ul>
<li id ="px">고정크기 px 테스트</li>
<li id ="em">가변크기 em 테스트</li>
<li id ="percent">가변크기 % 테스트</li>
</ul>
<hr><hr>
<style>
#weighttest1{
font-weight: bold;
}
#weighttest2{
font-weight: lighter;
}
#weighttest3{
font-weight: bolder
}
</style>
<h3>font-weight 속성 : 두꺼운 글씨를 표현 할 때 사용한다.</h3>
<p>선택자{font-weight : namal|bold|bolder|lighter|100|400|900;}의 형식으로 표현한다.</p>
<ul>
<li id="weighttest1">굵은 글꼴로 변경</li>
<li id="weighttest2">원래 굵기보다 더 가늘게</li>
<li id="weighttest3">원래 굵기보다 더 굴게</li>
</ul>
<hr><hr>
<style>
#variant2{
font-variant: normal;
}
#variant3{
font-variant: small-caps;
}
</style>
<h3>font-variant속성 : 작은 대문자로 변경할 때 사용한다.</h3>
<p id = "variant1">선택자 {font-variant : 속성값;} 의 형식으로 사용된다.</p>
<p id = "variant2">i love you</p>
<p id = "variant3">i love you</p>
<hr><hr>
<style>
#fontstyle1{
font-style: italic;
}
#fontstyle2{
font-style: oblique;
}
</style>
<h3>font-style 속성 : 텍스트의 기울임을 지정할 때 사용한다.</h3>
<p>선택자 {font-style : normal | italic | oblique;}의 형식으로 사용한다.</p>
<ul>
<li id ="fontstyle1">italic 기울임 글꼴</li>
<li id ="fontstyle2">oblique 기울임 글꼴</li>
</ul>
<hr><hr>
<style>
#font1{
font: italic small-caps;
}
#font2{
font: italic
}
</style>
<h3>font 속성 : 글꼴 관련 스타일을 한번에 지정 할 때 사용한다.</h3>
<p>선택자 {font : font-style font-variant font-weght font-size/line-height font-family; 의 형식으로 사용한다.</p>
<ul>
<li id ="font1">글꼴 관련 스타일 테스트1</li>
<li id ="font2">글꼴 관련 스타일 테스트2</li>
</ul>
'이공계전문기술연수 > HTML | CSS' 카테고리의 다른 글
| <이공계기술전문연수> 13. CSS 스타일 속성 기본(5) 실습 (0) | 2019.09.20 |
|---|---|
| <이공계기술전문연수> 12. CSS 스타일 속성 기본(4) 실습 (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 |
