텍스트 관련 스타일

 웹 문서에서 가장 많은 부분을 차지하는 부분은 텍스트이다. 텍스트 스타일에 따라서 디자인이 많이 달라지므로 자세하게 알아보자.

 

1. 글꼴 관련 스타일

 글꼴을 지정하는 방법은 설치되어있는 폰트를 이용하는 방법과 구글 웹 폰트를 사용하는 방법이 있다. 또한, 글자 크기, 굵기, 속성, 스타일도 원하는 대로 지정할 수 있다.

<style>
    font-family:<글꼴 이름>
</style>

<style>
    @font-face {
    	font-family: 글꼴 이름;
    	src:url(글꼴 파일 경로) format(파일 유형);
    }
</style>

 

2. 텍스트 스타일 

 글자 색, 밑줄, 대/소문자 변환, 그림자 효과 등 다양한 효과를 주어 텍스트 스타일을 변경할 수 있다.

<style>
    text-shadow : none | <가로 거리> <세로 거리> <번짐 정도> <색상> 
</style>

 

3. 문단 스타일

 글자 쓰기 방향, 정렬, 줄간격 등 다양하게 문단 스타일을 변경할 수 있다.

텍스트 정렬

<style>
    .align-left /*왼쪽 정렬*/
    .align-right /*오른쪽 정렬*/
    .align-center /*가운데 정렬*/
    .align-justify /*양쪽 정렬*/
</style>

 

4. 목록 스타일

 목록의 불릿과 번호 스타일, 불릿 대신 이미지 넣기 등 다양하게 디자인 할 수 있다.

<style>
    ul {
    list-style-position : <이미지> | none
    <이미지> = url(이미지 파일 경로)
    }
</style>

---

본 내용은 이지스퍼블리싱의 'Do it! HtML5 + CSS3 웹 표준의 정석'을
참고하여 작성한 내용입니다.