안녕하세요 모빌리티 입니다.
오늘은 CSS로 글자 스타일을
꾸며 보려고합니다.
CSS가 뭐냐구요?
오늘의 키워드
"CSS"
Cascading
Style
Sheet의 약어입니다.
HTML 문서에서 자주 사용되는
글자의 글꼴, 글자 색상, 글자 사이의 간격
정렬 등의 스타일들을 자주 사용하는 형식으로
만들어 놓고 나중에 사용하는 것이랍니다.
그때 그때 만들어 쓰지 않고 CSS를 사용하는 이유는?
소스를 수정하거나 관리가 쉽습니다.
소스가 간결해져서 문서를 읽어드리는 속도가
빨라집니다.
문서를 만드는 시간이 줄어 듭니다.
CSS 글꼴 속성
글꼴의 종류를 지정
{font-family:돋움}
글꼴의 크기 지정
{font-size: 12pt}
기울임 표시
{font-style: Italic}
대문자 변환
{font-variant: small-caps}
normal, small-caps
글자의 굵기를 지정
{font-weight: bold}
400(normal), bold, bolder, lighter
글자의 간격 지정
{letter-spacing: 30pt}
숫자,단위
줄사이의 간격을 지정
{line-height: 20pt}
숫자, 단위
CSS 문자열 속성
텍스트 정렬
{text-align: center}
left, right, center, justify(양쪽정렬)
단락의 들여쓰기
{text-indent: 20}
숫자
텍스트의 링크 줄 지정
{text-decoration: none}
none, underline, overline, link(깜박임)
영문자의 대소 문자 지정
{text-transform: capitalize}
none, capitalize(첫 대문자),
uppercase(대문자), lowercase(소문자)
그럼 이런 속성들을 어떻게 사용할까요?
내부 스타일 시트 만들어 보시죠
<style type="text/css">
<!--
태그 {속성: 값 ; 속성: 값}
-->
</style>
어떻게 사용하냐구요?
<HTML>
<HEAD>
<TITLE> 내부 스타일 시트</TITLE>
<STYLE type="text/css">
<!--
H1{font-size:20pt; color:green}
H2{font-size:30pt; color:red}
-->
</STYLE>
</HEAD>
<BODY topmargin="50">
<H1>안녕하세요 </H1>
<H2>모빌리티입니다.</H2>
<H1>오늘은 CSS에 대해서 </H1>
<H2>배우고 계십니다.</H2>
</BODY>
</HTML>
CSS.html
위에 대한 결과 물입니다.
H1행에는 그린색과 폰트사이즈 20을 적용
H2행에는 빨간색과 폰트사이즈 30을 적용
을 하였습니다.
HTML로 각 행마다 색상과 크기를 지정
하셔도 되지만 이렇게 한꺼번에 적용이
가능하도록 CSS를 배우시는 것입니다.
다음편도 기대해 주세요.
나눔은 
최고의 기쁨입니다.
이글이 도움이 되셨다면 아래
♡ 빈 하트를 채워주세요.
'IT' 카테고리의 다른 글
| [HTML #22] CSS 인라인 방식 (0) | 2017.06.27 |
|---|---|
| [어린이 교육앱] 재미있는 음식 2 (0) | 2017.06.26 |
| [HTML #20] 동영상 집어 넣기 (0) | 2017.06.25 |
| [돈버는 앱] 핸드폰으로 돈버는 앱 4가지 (0) | 2017.06.24 |
| [HTML # 19] 배경음악을 지정하는 법 (0) | 2017.06.24 |
