글자 관련 스타일
📍 선택자{ color : 색상명(영문) | 16진수 숫자 RGB(#fff, #ffffff)
| rgb(255 ,255 ,255) | rgba(255, 255, 255, 1)
| hsl(360, 100, 100) | hsla(360, 100, 100, 1)
- rgba에서 a는 투명도(0: 투명, 1: 불투명)
- hsl(색조, 채도, 밝기)
📍 text-decoration : 텍스트에 줄을 긋는 속성
- text-decoration: underline - 아랫줄 긋기
- text-decoration: line-through - 중간줄 긋기
- text-decoration: overline - 윗줄 긋기
- text-decoration: none - 줄 없애기
📍 text-align : 글자(+inlne)를 정렬하는 속성(왼쪽, 오른쪽, 가운데, 양쪽)
- text-align: left
- text-align: right
- text-align: center
- text-align: justify (양쪽 끝 붙이고 정렬)
📍 line-height : 줄 간격(장평)을 지정하는 속성
(줄의 높이가 글자의 크기보다 큰 경우 글자는 해당 줄 세로 가운데에 배치된다.)
📍 letter-spacing : 글자 사이 간격(자간) 지정 속성
📍 text-shadow : 텍스트에 그림자 효과를 추가하는 속성
text-shadow: 0px 0px 10px #D13848; 가로 세로 번짐 색상
글꼴 관련 스타일
📍 font-size : 글꼴의 크기를 지정하는 속성
-
px : 픽셀(화면 해상도)
-
pt : 포인트(1pt = 0.72인치)
-
% : 상위요소 크기에 대한 백분율
-
em : 1em == 100%
📍 font-weight : 글꼴의 굵기(두께)를 지정하는 속성
-
숫자 : (얇음) 100~900 (두꺼움) (100단위)
-
normal : 폰트에 지정된 기본 두께
-
bold : 굵게(700)
-
bolder : 상속받은 두께보다 더 굵게
-
lighter : 상속받은 두께보다 더 얇게
📍 font-family : 글꼴을 지정하는 속성
-
구글 웹폰트 사이트
https://fonts.google.com -
눈누 상업용 무료 한글폰트 사이트
https://noonnu.cc/
변형 관련 스타일
📍 transform : 변형과 관련된 속성
📍 css 속성 작성 시 크로스 브라우저(브라우저가 달라지는 경우) 처리 방법
- -ms- : 마이크로 소프트(익스플로러, 엣지)
- -webkit- : 크롬, 사파리
- -o- : 오페라
- -moz- : 파이어폭스
12_글자관련스타일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>12_글자관련스타일1</title>
<link rel="stylesheet" href="css/text-style.css">
</head>
<body>
<h1>글자 관련 스타일</h1>
<h3>color : 글자 색을 지정하는 속성</h3>
<pre>
선택자{ color : 색상명(영문) | 16진수 숫자 RGB(#fff, #ffffff)
| rgb(255 ,255 ,255) | rgba(255, 255, 255, 1)
| hsl(360, 100, 100) | hsla(360, 100, 100, 1) }
* rgba에서 a는 투명도(0: 투명, 1: 불투명)
* hsl(색조, 채도, 밝기)
* 6개 색상 지정 방법은 색과 관련된 모든 css 속성에서 사용 가능
</pre>
<ul id="color-ul">
<li>색상명으로 지정</li>
<li>16진수 rgb로 지정</li>
<li>rgb로 지정</li>
<li>rgba로 지정</li>
<li>hsl로 지정</li>
<li>hsla로 지정</li>
</ul>
<hr>
<h3>text-decoration : 텍스트에 줄을 긋는 속성</h3>
<ul id="deco-ul">
<li>아랫줄 긋기</li>
<li>중간줄 긋기</li>
<li>윗줄 긋기</li>
<li><a href="#">줄 없애기</a></li>
</ul>
<hr>
<h3>text-align : 글자(+inlne)를 정렬하는 속성(왼쪽, 오른쪽, 가운데, 양쪽)</h3>
<div id="align-test">
<p>안녕하세요? <span>반갑습니다!</span> 오늘 점심 뭐 먹죠?</p>
<p>안녕하세요? <span>반갑습니다!</span> 오늘 점심 뭐 먹죠?</p>
<p>안녕하세요? <span>반갑습니다!</span> 오늘 점심 뭐 먹죠?</p>
<p>Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!
</p>
<div id="div1">
<div>inline-block</div>
</div>
</div>
<hr>
<h3>line-height : 줄 간격(장평)을 지정하는 속성</h3>
<pre>
줄 사이의 간격을 지정한 만큼 벌리는 게 아니라
한 줄의 높이를 지정하는 속성이다.
* 줄의 높이가 글자의 크기보다 큰 경우
글자는 해당 줄 세로 가운데에 배치된다.
</pre>
<div id="line-test">
<p>
동해물과 백두산이 마르고 닳도록 <br>
하느님이 보우하사 우리나라 만세 <br>
무궁화 삼천리 화려 강산 <br>
대한 사람 대한으로 길이 보전하세
</p>
<p>
동해물과 백두산이 마르고 닳도록 <br>
하느님이 보우하사 우리나라 만세 <br>
무궁화 삼천리 화려 강산 <br>
대한 사람 대한으로 길이 보전하세
</p>
</div>
<hr>
<h3>글자를 요소 정중앙에 배치하기</h3>
<div id="center-test">
<span>정중앙</span>
</div>
<h3>letter-spacing : 글자 사이 간격(자간) 지정 속성</h3>
<p id="letter-test">
Hello World!!!
</p>
<button id="letter-test2">클릭</button>
<hr>
<h3>text-shadow : 텍스트에 그림자 효과를 추가하는 속성</h3>
<div id="shadow-test">
<p>HTML5</p>
<p>HTML5</p>
<p>HTML5</p>
<p>HTML5</p>
</div>
</body>
</html>text-style
/* color 속성 */
#color-ul > li{
font-size: 24px;
font-weight: bold;
}
/* https://www.w3schools.com/colors/colors_hsl.asp */
#color-ul > li:nth-child(1){ color: red;}
#color-ul > li:nth-child(2){ color: #20F79B;}
#color-ul > li:nth-child(3){ color: rgb(1, 101, 233); } /* 0~255 */
#color-ul > li:nth-child(4){ color: rgba(230, 182, 252, 0.5)}
/* a(투명도) : (투명)0 ~ (불투명)1 */
#color-ul > li:nth-child(5){ color: hsl(42, 92%, 58%)}
#color-ul > li:nth-child(5){ color: hsla(42, 92%, 58%, 0.5)}
/* text-decoration */
#deco-ul > li:nth-child(1){text-decoration: underline;}
#deco-ul > li:nth-child(2){text-decoration: line-through;}
#deco-ul > li:nth-child(3){text-decoration: overline;}
#deco-ul > li:nth-child(4) > a{text-decoration: none;}
/* text-align */
#align-test{
width: 350px;
border: 2px solid black;
}
#align-test span{background-color: pink;}
#align-test > p:nth-child(1){text-align: left;} /* 기본값 */
#align-test > p:nth-child(2){text-align: right;}
#align-test > p:nth-child(3){text-align: center;}
#align-test > p:nth-child(4){text-align: justify;} /* 양쪽 끝 붙이고 정렬 */
/* flexbox의 space-between과 같음 */
#div1{text-align: center;}
/* inline-block에도 적용되는지 확인 */
#div1 > div{
width: 50px;
height: 50px;
background-color: chartreuse;
display: inline-block;
}
/* line-height */
#line-test > p:last-child{
line-height: 30px;
}
#center-test{
width: 200px;
height: 200px;
border: 1px solid black;
line-height: 200px;
text-align: center;
}
#center-test > span {
background-color: brown;
}
/* letter-spacing */
#letter-test{
font-size: 24px;
font-weight: bold;
letter-spacing: -2px;
}
#letter-test2{
letter-spacing: 10px;
}
/* text-shadow */
#shadow-test{
background-color: black;
padding: 30px;
}
#shadow-test>p{
font-size: 75px;
font-weight: bold;
}
#shadow-test>p:nth-child(1){
color: orange;
text-shadow: 5px 5px white;
/* 가로 세로 색상 */
}
#shadow-test > p:nth-child(2){
color: white;
text-shadow: 4px 4px 4px #bbb;
/* 가로 세로 번짐 색상 */
}
#shadow-test > p:nth-child(3){
color: rgba(255, 255, 255, 0.9);
text-shadow: 0px 0px 10px #D13848; /* 네온사인 */
/* 가로 세로 번짐 색상 */
}
#shadow-test > p:nth-child(4){
text-shadow: 0px 0px 4px #ccc,
0px -5px 4px #ff3,
2px -19px 6px #fd3,
-2px -15px 11px #f80,
2px -20px 18px #f20;
}13_글꼴관련스타일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>13_글꼴(폰트)관련 스타일</title>
<link rel="stylesheet" href="css/font-style.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Gasoek+One&display=swap');
</style>
</head>
<body>
<h1>글꼴(폰트) 관련 스타일</h1>
<h3>font-size : 글꼴의 크기를 지정하는 속성</h3>
<pre>
px : 픽셀(화면 해상도)
pt : 포인트(1pt = 0.72인치)
% : 상위요소 크기에 대한 백분율
em : 1em == 100%
</pre>
<ul id="size-test">
<li>픽셀(px)</li>
<li>포인트(pt)</li>
<li>퍼센트(%)</li>
<li>em</li>
</ul>
<hr>
<h3>font-weight : 글꼴의 굵기(두께)를 지정하는 속성</h3>
<pre>
숫자 : (얇음) 100~900 (두꺼움) (100단위)
normal : 폰트에 지정된 기본 두께
bold : 굵게(700)
bolder : 상속받은 두께보다 더 굵게
lighter : 상속받은 두께보다 더 얇게
</pre>
<ul id="weight-test">
<li>테스트1</li>
<li>테스트2</li>
<li>테스트3</li>
<li>테스트4</li>
<li>테스트5</li>
</ul>
<hr>
<h3>font-family : 글꼴을 지정하는 속성</h3>
<ul id="family-test1" class="cls">
<li>가나다라, ㄱㅎㅈ, ABCD, abcd, 1234, !@#@</li>
<li>가나다라, ㄱㅎㅈ, ABCD, abcd, 1234, !@#@</li>
<li>가나다라, ㄱㅎㅈ, ABCD, abcd, 1234, !@#@</li>
</ul>
<h3>웹 폰트 사용</h3>
<p>웹 폰트 제공 사이트1 : <a href="https://fonts.google.com" target="_blank">구글 웹폰트 사이트로</a> </p>
<p>웹 폰트 제공 사이트2 : <a href="https://noonnu.cc/" target="_blank">눈누 상업용 무료 한글폰트 사이트로</a>
<ul id="family-test2" class="cls">
<li>가나다라, ㄱㅎㅈ, ABCD, abcd, 1234, !@#@</li>
<li>가나다라, ㄱㅎㅈ, ABCD, abcd, 1234, !@#@</li>
<li>가나다라, ㄱㅎㅈ, ABCD, abcd, 1234, !@#@</li>
</ul>
</body>
</html>font-style
@import url('https://fonts.googleapis.com/css2?family=Diphylleia&family=Gasoek+One&display=swap');
#size-test > li:nth-child(1){font-size: 24px;}
#size-test > li:nth-child(2){font-size: 18px;}
#size-test > li:nth-child(3){font-size: 150%px;}
#size-test > li:nth-child(4){font-size: 1.5em;}
/* 크롬 브라우저 기준
기본 글꼴 크기 : 16px
*/
/* font-weight */
#weight-test>li{
font-size: 34px;
}
#weight-test > li:nth-child(1){font-weight: 600;}
#weight-test > li:nth-child(2){font-weight: bold;}
#weight-test > li:nth-child(3){font-weight: bolder;}
#weight-test > li:nth-child(4){font-weight: lighter;}
#weight-test > li:nth-child(4){
font-weight: normal;
font-style: oblique;
/* font-style : 글꼴의 모양을 지정하는 속성 */
/* italic : 폰트에서 제공하는 비스듬한 글자 */
/* oblique : 강제로 글자를 비스듬한게 변경 */
}
/* font-family */
.cls > li {font-size: 24px;}
#family-test1 > li:nth-child(1){
font-family : '궁서'; /* 설치된 폰트인 경우 */
}
#family-test1 > li:nth-child(2){
font-family : '동서남북체';
/* 없는 폰트인 경우, 기본 폰트로 설정됨 */
}
#family-test1 > li:nth-child(3){
font-family : '동서남북체', '굴림체';
}
/* 웹 폰트 */
/* link 태그를 이용한 방법 */
#family-test2 > li:nth-child(1){
font-family: 'Gasoek One', sans-serif;
}
/* @import는 css파일 제일 상단에 작성해야 한다. */
/* link 태그를 이용한 방법 */
#family-test2 > li:nth-child(2){
font-family: 'Diphylleia', serif;
}
@font-face {
font-family: 'Dovemayo_gothic';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.1/Dovemayo_gothic.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
/* @font-face 이용 */
#family-test2 > li:nth-child(3){
font-family: 'Dovemayo_gothic';
}14_변형관련스타일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>14_변형관련스타일</title>
<link rel="stylesheet" href="css/transform-style.css">
</head>
<body>
<h1>2차원 변형</h1>
<h3>좌우로 움직이기</h3>
<img src="../images/cats/cat1.jpg" class="trans-x-2d">
<h3>상하로 움직이기</h3>
<img src="../images/cats/cat2.jpg" class="trans-y-2d">
<h3>대각선(diagnal)로 움직이기</h3>
<img src="../images/cats/cat3.jpg" class="trans-d-2d">
<h3>가로 방향 확대/축소</h3>
<img src="../images/cats/cat4.jpg" class="trans-x-scale-2d">
<h3>세로 방향 확대/축소</h3>
<img src="../images/cats/cat5.jpg" class="trans-y-scale-2d">
<h3>요소 확대/축소</h3>
<img src="../images/cats/cat1.jpg" class="trans-scale-2d">
<h3>요소 회전</h3>
<img src="../images/cats/cat2.jpg" class="trans-rotate">
<hr>
<h1>3차원 변형</h1>
<h3>x, y, z축 이동</h3>
<img src="../images/dogs/dog1.jpg" class="trans-3d">
<h3>x축 회전</h3>
<img src="../images/dogs/dog2.jpg" class="trans-rotate-x-3d">
<h3>y축 회전</h3>
<img src="../images/dogs/dog3.jpg" class="trans-rotate-y-3d">
<h3>z축 회전</h3>
<img src="../images/dogs/dog4.jpg" class="trans-rotate-z-3d">
<h3>x, y, trans-rotate-z-3d 회전</h3>
<img src="../images/dogs/dog5.jpg" class="trans-rotate-3d">
<hr>
<h1>변형 사이에 지연시간 추가하기(transition)</h1>
<div class="box test1"></div>
<hr>
<div class="box test2">여기가 위쪽</div>
<hr>
<h4>스타일 변형 진행속도 조정</h4>
<div class="box test3">여기가 위쪽</div>
<h4>스타일 변형 딜레이(일정 시간 후 변형)</h4>
<div class="box test4">여기가 위쪽</div>
</body>
</html>transform-style
img{
width: 250px;
height: auto; /* 안 해도 됨 */
/* 이미지는 원래 자신만의 너비/높이를 가지고 있어
한 방향의 크기만 지정해도
남은 방향은 자동적으로 비율에 맞춰서 지정된다.
*/
}
/* transform : 변형과 관련된 속성 */
/* css 속성 작성 시 크로스 브라우저(브라우저가 달라지는 경우) 처리 방법
-ms- : 마이크로 소프트(익스플로러, 엣지)
-webkit- : 크롬, 사파리
-o- : 오페라
-moz- : 파이어폭스
*/
/* 좌우 이동 */
.trans-x-2d:hover{
-ms-transform: translateX(100px);
-webkit-transform: translateX(100px);
transform: translateX(100px);
/* translate: 바꾸다 */
}
/* 상하 이동 */
.trans-y-2d:hover{
-ms-transform: translateY(100px);
-webkit-transform: translateY(100px);
transform: translateY(100px);
/* translate: 바꾸다 */
}
/* 대각선 이동 */
.trans-d-2d:hover{
-ms-transform: translate(100px, -100px);
-webkit-transform: translate(100px, -100px);
transform: translate(100px, -100px);
/* translate: 바꾸다 */
}
/* scale(배율) */
/* 가로방향 확대/축소 */
.trans-x-scale-2d:hover{
transform: scaleX(2);
margin-left: 200px;
}
/* 세로방향 확대/축소 */
.trans-y-scale-2d:hover{
transform: scaleY(2);
margin: 100px 0;
/* 세로 가로 */
}
/* 요소 확대/축소 */
.trans-scale-2d:hover{
transform: scale(3, 2);
margin : 150px, 150px;
/* 세로 가로 */
}
/* 요소 회전 */
/* rotate(각도 deg) */
.trans-rotate:hover{
transform: rotate(180deg);
}
/* x, y, z축 이동 */
.trans-3d:hover{
/* perspective(z축의 길이) : 원근법 적용 */
/* transform: perspective(400px) translateZ(300px); /* z축 범위 주의 */
transform: translate3d(50px, 50px, 100px);
/* x y z */
}
/* x축 회전 */
.trans-rotate-x-3d{
transform: perspective(300px) rotateX(45deg);
}
/* y축 회전 */
.trans-rotate-y-3d{
transform: perspective(300px) rotateY(45deg);
}
/* z축 회전 */
.trans-rotate-z-3d{
transform: perspective(300px) rotateZ(45deg);
}
/* x, y, z 축 회전 */
.trans-rotate-3d{
transform: perspective(300px) rotate3d(0.5, 0.5, 0.5, 45deg);
/* rotate(x,y,z,회전각도)
x, y, z는 0~1 사이의 숫자
*/
}
/* transition */
.box{
width: 150px;
height: 150px;
border: 1px solid black;
background-color: red;
/* 스타일이 변경되는 시간 지정 */
transition-duration: 1s ;
}
.test1:hover{
background-color: yellow;
}
.test2{
transition-duration: 3s;
}
.test2:hover{
transform: rotate(360deg);
background-color: darkslateblue;
/* 테두리 모서리 곡률 속성 */
border-radius: 50%;
}
.test3{
transition-duration: 3s;
/* linear | ease(기본값) | ease-in | ease-out | ease-in-out | cublic-bezier(n,n,n,n) */
/* transition-timing-function: cubic-bezier(0.3, 0.3, 1, 0.5); */
transition-timing-function: ease-in-out ;
}
.test3:hover{
background-color: aqua;
transform: rotate(720deg);
}
.test4{
transition-delay: 1s;
}
.test4:hover{
transform: translateX(100px);
}
개발 일지