1. 글자 관련 스타일 1) color : 글자색을 지정하는 속성
▶ 선택자 {
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속성에서 사용 가능 }
■ 11_글자관련스타일.html
■ text-style.css
#color-ul > li {
font-size : 24px ;
font-weight : bolder ;
}
#color-ul > li:nth-child ( 1 ){ color : red ;}
#color-ul > li:nth-child ( 2 ){ color : #8918F5 ;}
#color-ul > li:nth-child ( 3 ){ color : rgb ( 50 , 100 , 150 ); /* 0 ~ 255 */ }
#color-ul > li:nth-child ( 4 ){ color : rgba ( 255 , 0 , 0 , 0.6 ); /* 0 ~ 1 */ }
#color-ul > li:nth-child ( 5 ){ color : hsl ( 360 , 100% , 50% )}
#color-ul > li:nth-child ( 6 ){ color : hsla ( 240 , 100% , 50% , 0.1 );}
☞ rgba속성을 사용할 때 투명도는 0~1을 지정한다. (hsla도 이와 같다.)
ex) rgba(255, 0, 0, 0.6 );
☞ hsl속성은 뒤에 %를 이용
2) text-decoration : 텍스트에 줄을 긋는 속성
■ 11_글자관련스타일.html
■ text-style.css
#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 ;}
/* id=deco-ul이면서 li태그의 4번쨰 자식이면서 a태그인것 */
#deco-ul > li:nth-child ( 4 ) > a { text-decoration : none ; color : black ;}
☞ id=deco-ul이면서 li태그의 n번째 자식
☞ text-decoation은 줄을 없앨 때 많이 사용한다. (하이퍼링크 밑줄 제거할 때 많이 사용 )
3) text-align : 글자(+inline)를 정렬하는 속성(왼쪽, 오른쪽, 양쪽, 가운데)
■ 11_글자관련스타일.html
■ text-style.css
#align-test {
width : 350px ;
border : 2px solid black ;
}
/* align-test의 후손 span의 배경색 바꿈 */
#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 ) {
/* jsutify => 양쪽 정렬 */
text-align : justify ;
}
/* block를 문자열(inline)으로 변경시
문자열 정렬이 똑같이 적용된다. */
#div1 {
text-align : center ;
}
#div1 > div {
width : 50px ;
height : 50px ;
background-color : yellow ;
}
☞ 맨 마지막 "inline-block"을 내가 원하는 위치로 변경을 하고싶다면?
=> 블록요소를 inline-block 요소로 만들면 된다 !!! 이 요소로 만들게 되면 문자열로 취급
■ text-style.css (#div1 > div{} 에 inline-block; 추가)
4) line-height : 줄 간격을 지정하는 속성
- 줄 사이 간격을 지정한 만큼 벌리는게 아니라 한 줄의 높이를 지정하는 속성 ※ 줄의 높이가 글자의 크기보다 큰 경우 글자는 해당 줄 세로 가운데에 배치된다.
■ 11_글자관련스타일.html
■ text-style.css
#line-test > p:last-child {
/* 줄간의 간격을 조정 */
line-height : 30px ;
}
#center-test {
width : 200px ;
height : 200px ;
border : 1px solid black ;
text-align : center ;
line-height : 200px ;
}
#center-test > span { background-color : pink ;}
/* letter-spacing */
#letter-test {
font-size : 24px ;
font-weight : bold ;
/* 글자 자간 지정 */
letter-spacing : -1.5px ;
}
#letter-test2 {
letter-spacing : 10px ;
width : 100px ;
text-align : center ;
}
5) text-shadow : 텍스트에 그림자 효과를 추가하는 속성
■ 11_글자관련스타일.html
■ text-style.css
/* 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 : 3px 3px white ;
/* 가로 세로 색상 */
}
#shadow-test > p:nth-child ( 2 ){
color : white ;
text-shadow : 5px 5px 5px #bbb ;
/* 가로 세로 번짐 색상 */
}
#shadow-test > p:nth-child ( 3 ){
/* 투명도 넣어줌 */
color : rgba ( 255 , 255 , 255 , 0.9 );
text-shadow : 0px 0px 10px magenta
/* 가로 세로 번짐 색상 */
}
#shadow-test > p:nth-child ( 4 ){
/* 투명도 넣어줌 */
text-shadow : 0px 0px 4px #ccc ,
0px -5px 4px #ff3 ,
2px -10px 6px #fd3 ,
-2px -15px 11px #f80 ,
2px -20px 18px #f20 ;
/* 가로 세로 번짐 색상 */
}
