글자 관련 스타일

글자 색을 지정하는 속성

선택자 {
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(aloha)는 투명도 (0 : 투명, 1 : 불투명)
• rgb는 0~255 사이
  0, 0, 0 검정색 255, 255, 255 흰색
• hsl(색상, 채도, 명도)
  채도와 명도는 % 사용
• 6개의 색상 지정 방법은 색과 관련된 모든 css 속성에서 사용 가능
• google 색상 선택 도구 이용

html code

<ul id="color-ul">
	<li>색상명으로 지정</li>
	<li>16진수 rgb로 지정</li>
	<li>rgb로 지정</li>
	<li>rgba로 지정</li>
	<li>hsl로 지정</li>
	<li>hsla로 지정</li>
</ul>

css code

#color-ul > li {
    font-size: 24px;
    font-weight: bold;
}

#color-ul > li:nth-child(1) {
    color: red;
}

#color-ul > li:nth-child(2) {
    color: #8918f5;
}

#color-ul > li:nth-child(3) {
    color: rgb(142, 209, 202);
}

#color-ul > li:nth-child(4) {
    color: rgba(50, 100, 150, 0.3);
}

#color-ul > li:nth-child(5) {
    color: hsl(360, 100%, 50%);
    /* 색상, 채도, 명도 */
    /* 채도, 명도는 %로 사용 */
}

#color-ul > li:nth-child(6) {
    color: hsla(360, 100%, 50%, 0.5);
}

text-decoration : 텍스트에 줄 긋는 속성

html code

<ul id="deco-ul">
	<li>아랫줄 긋기</li>
	<li>중간줄 긋기</li>
	<li>윗줄 긋기</li>
	<li> <a href="#">줄 없애기</a> </li>
</ul>

css code

#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

글자(+inline)를 정렬하는 속성 (왼쪽, 가운데, 오른쪽 양쪽)

html code

<div id="align-test">
	<p>안녕하세요? 오늘 점심 뭐먹지?</p>
	<p>안녕하세요? 오늘 점심 뭐먹지?</p>
	<p>안녕하세요? 오늘 점심 뭐먹지?</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!
	</p>

	<div id="div1">
		<div>inline-block</div>
	</div>
</div>

css code

#align-test {
    width: 350px;
    border: 2px solid black;
}

#align-test > p:nth-child(1) {
    text-align: left;
}

#align-test > p:nth-child(1) {
    text-align: right;
}

#align-test > p:nth-child(1) {
    text-align: center;
}

#align-test > p:nth-child(4) {
    text-align: justify;
}

#div1 > div {
    width: 50px;
    height: 50px;
    background-color: red;
    display: inline-block;
}

#div1 {
    text-align: center;
}

text-align: justify;
양쪽 끝에 텍스트가 붙어서 출력됨

line-height : 줄 간격(장평)을 지정하는 속성

줄 사이 간격을 지정한 만큼 벌리는게 아니라 한 줄의 높이를 지정하는 속성
(글자 자체 높이 변경. 글자와 글자 사이 간격 아님 )

html code

<div id="line-test">
	<p>
		동해물과 백두산이 마르고 닳도록<br>
		하느님이 보우하사 우리 나라 만세<br>
		무궁화 삼천리 화려 강산<br>
		대한사람 대한으로 길이 보전하세
	</p>
	<p>
		동해물과 백두산이 마르고 닳도록<br>
		하느님이 보우하사 우리 나라 만세<br>
		무궁화 삼천리 화려 강산<br>
		대한사람 대한으로 길이 보전하세
	</p>
</div>

css code

#line-test > p:last-child {
    line-height: 30px;
}

글자를 요소 정중앙에 배치하기

html code

<div id="center-test">
	<span>정중앙</span>
</div>

css code

#center-test{
    width: 200px;
    height: 200px;
    border: 1px solid black;
    text-align: center;
}

#center-test > span {
    background-color: pink;
    line-height: 200px;
}

박스에 text-align: center;를 하고
line-height를 박스 높이만큼 쓰면 됨

letter-spacing

글자 사이 간격(자간) 지정 속성

html code

<p id="letter-test">Hello world!!!</p>

css code

#letter-test {letter-spacing: 10px;}

text-shadow

텍스트에 그림자 효과 추가하는 속성

html code

<div id="shadow-test">
	<p>HTML5</p>
	<p>HTML5</p>
	<p>HTML5</p>
	<p>HTML5</p>
</div>

css code

#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;
}