CSS 강좌 04강 - CSS 텍스트 스타일
※SPAN 태그
▷특정한 텍스트 영역에 특정한 스타일을 주기위해 SPAN태그를 이용합니다.
▷SPAN태그 시작태그와 종료태그 사이에 있는 요소에 스타일을 지정할 수 있습니다.
사용법)
스타일을 지정하지 않고자 하는 요소
<span id="memo">스타일을 지정하는 요소</span>
스타일을 지정하지 않고자 하는 요소
예제)
<style type="text/css">
#memo{
color:blue;font-size:30px;
}
</style>
<body>
스타일을 지정하지 않고자 하는 요소
<span id="memo">스타일을 지정하는 요소</span>
스타일을 지정하지 않고자 하는 요소
</body>
※색상 지정
▷지금까지 많이 사용했던 스타일 코드입니다. 특정 텍스트에 색상을 지정합니다.
▷색상을 지정하는 방법은 다음과 같이 세 가지 방법이 있습니다.
(1)Hex : 16진수를 이용한 표현 (예제 : #ff0000, #00ff00, #0000ff)
(2)RGB : red, blue, green의 값을 조합한 RGB를 이용한 표현 (예제 : RGB(255,0,0), RGB(0,255,0), RGB(0,0,255))
(3)영문명 : red, blue, green등 색상의 영문명
주로 자주 사용 지정방식은 Hex 입니다.
참고사이트 바로가기
http://www.somacon.com/p142.php
예제)
<style type="text/css">
#hexMemo{
color:#ff0000;
}
#rgbMemo{
color:RGB(1,0,255);
}
#nameMemo{
color:green;
}
</style>
<body>
<p id="hexMemo">
#ff0000
</p>
<p id="rgbMemo">
RGB(1,0,255)
</p>
<p id="nameMemo">
green
</p>
</body>
※정렬
▷text-align을 이용하여 특정한 방향으로 텍스트를 정렬할 수 있습니다.
▷text-align을 이용한 4가지 정렬방식
(1)left : 왼쪽 정렬
(2)right : 오른쪽 정렬
(3)center : 가운데 정렬
(4)justify : 양쪽 정렬, 텍스트 간의 간격을 조정해서 행의 간격을 일치시킴
예제)
<style type="text/css">
div {
margin: 30px;
width: 500px;
border:1px solid blue;
}
#leftDiv {
text-align: left;
}
#rightDiv {
text-align: right;
}
#centerDiv {
text-align: center;
}
#justifyDiv {
text-align: justify;
}
</style>
<body>
<div id="leftDiv">
동해물과 백두산이 <br />
마르고 닳도록 <br />
하나님이 보우하사 <br />
우리나라 만세 <br />
</div>
<div id="rightDiv">
무궁화 삼천리 <br />
화려강산 <br />
대한사람 대한으로 <br />
길이 보전하세 <br />
</div>
<div id="centerDiv">
동해물과 백두산이 <br />
마르고 닳도록 <br />
하나님이 보우하사 <br />
우리나라 만세 <br />
</div>
<div id="justifyDiv">
무궁화 삼천리 <br />
화려강산 <br />
대한사람 대한으로 <br />
길이 보전하세 <br />
</div>
</body>
※텍스트 꾸미기
▷text-decoration : 텍스트에 선을 추가합니다.
(1)overline : 윗줄
(2)line-through : 취소선
(3)underline : 밑줄
예제)
<body>
<p style="text-decoration:overline;">Go Learning!</p>
<p style="text-decoration:line-through;">Go Learning!</p>
<p style="text-decoration:underline;">Go Learning!</p>
</body>
▷line-height : 글자들 간에 행간격을 지정합니다.
예제)
<style type="text/css">
div {
margin: 30px;
width: 500px;
border:1px solid blue;
}
#divOne {
line-height:20px;
}
#divTwo {
line-height:40px;
}
</style>
<body>
<div id="divOne">
동해물과 백두산이 <br />
마르고 닳도록 <br />
하나님이 보우하사 <br />
우리나라 만세 <br />
</div>
<div id="divTwo">
무궁화 삼천리 <br />
화려강산 <br />
대한사람 대한으로 <br />
길이 보전하세 <br />
</div>
</body>
▷letter-spacing : 문자 사이의 간격을 지정합니다.
예제)
<style type="text/css">
div {
margin: 30px;
width: 500px;
border:1px solid blue;
}
#divOne {
letter-spacing:5px;
}
#divTwo {
letter-spacing:20px;
}
</style>
<body>
<div id="divOne">
동해물과 백두산이 <br />
마르고 닳도록 <br />
하나님이 보우하사 <br />
우리나라 만세 <br />
</div>
<div id="divTwo">
무궁화 삼천리 <br />
화려강산 <br />
대한사람 대한으로 <br />
길이 보전하세 <br />
</div>
</body>
▷vertical-align : 텍스트의 수직 정렬을 지정합니다.
예제)
이제부터는<span style="background-color:yellow;vertical-align:10px;">Go Learning!</span> <br />
이제부터는<span style="background-color:yellow;vertical-align:-10px;">Go Learning!</span> <br />
모든 코드는 직접 코딩하면서 테스트를 해보세요 :)
'코딩이야기 > CSS' 카테고리의 다른 글
| CSS 강좌 06강 - CSS 링크/표/배경 스타일 (0) | 2016.03.05 |
|---|---|
| CSS 강좌 05강 - CSS font 스타일 (0) | 2016.03.03 |
| CSS 강좌 03강 - CSS 선택자 조합 (1) | 2016.03.03 |
| CSS 강좌 02강 - CSS 선택자 (0) | 2016.03.02 |
| CSS 강좌 01강 - CSS 시작하기(CSS개념) (7) | 2016.03.02 |