Notice

Recent Posts

Recent Comments

Link

Today

Total

05-08 18:48

Archives

관리 메뉴

Jeongchul Kim

CSS 02 CSS 스타일링 본문

Web프로그래밍

CSS 02 CSS 스타일링

김 정출 2016. 4. 26. 13:07

CSS 02 CSS 스타일링

텍스트 관련 스타일

1. 글꼴 스타일

텍스트 관련 스타일

CSS3에서는 여러 가지 속성들을 이용하여 텍스트 및 레이아웃을 스타일링 할 수 있습니다. 텍스트 관련 스타일은 글꼴이나, 글자크기, 이탤릭체 표현여부 등을 지정하는 글꼴 스타일과 텍스트의 방향이나 정렬, 줄 표시여부 등을 지정하는 텍스트 스타일로 구분 됩니다. 이에 대해 자세히 알아보겠습니다.

글꼴 스타일에서 font-family는 글꼴을 지정하는 속성입니다. 사용자가 웹 문서에서 사용할 글꼴을 지정할 때 font-family 속성을 이용하면 됩니다. Font-family 속성은 <body> 태그를 비롯해 <p> 태그나 <hn> 태그처럼 텍스트를 사용하는 요소들에서 주로 사용하는 속성입니다. 웹 문서에서는 글꼴을 지정할 때 한 가지 글꼴만 지정하기도 하지만, 지정한 글꼴이 없는 경우를 대비하여 두 번째, 세 번째 글꼴까지도 지정할 수 있습니다. 또한 font-family 속성은 상속되기 때문에 <body> 스타일에 한 번 정의하면 문서 전체에 적용되고, 문서 안의 모든 자식 요소에 계속해서 같은 글꼴이 사용됩니다. font-family 속성의 사용법은 다음과 같이 선택자를 지정하고 속성을 font-family로 지정한 다음 속성 값으로 글꼴 이름을 입력합니다. 지정한 글꼴이 없을 경우를 대비하여 기본 속성값 다음 두 번째, 세 번째 글꼴을 지정할 수 있습니다.

@font-face는 웹 폰트를 사용하는 속성입니다. CSS3에서는 웹 폰트를 표준으로 채택하였는데, 웹 폰트는 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보를 함께 저장하는 방식으로 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템에 다운받게 합니다. 결국 사용자가 시스템에 없는 글꼴이더라도 웹 문서를 통해 필요한 글꼴들을 사용자 컴퓨터에 다운로드 해놓고 표시하기 때문에 언제든지 사용자가 의도한 대로 텍스트를 표시할 수 있습니다. @font-face 의 사용법은 다음과 같이 @font-face 를 선택자로 하고 font-family와 src, 그리고 format 속성이 포함됩니다.

Font-family 속성에서 글꼴 이름을 정하고, src 속성에서 폰트의 위치를 지정합니다. Src 의 속성값으로 local과 url을 지정하게 되는데, local은 사용자의 컴퓨터 내부에 있는 폰트를 선택하고, url은 사용자의 컴퓨터에 존재하지 않는 폰트를 지정합니다. 그리고 format에서는 파일유형을 지정하는데, 웹 폰트 파일 유형과 해당 확장자에 대한 내용은 다음의 ‘웹 폰트 파일 유형과 확장자’ 버튼을 눌러 확인해 보세요.

font-size는 글자 크기를 조절하는 속성으로 사용자는 이 속성을 이용하여 글자의 크기를 조절할 수 있습니다. Font-size는 픽셀이나 포인트를 비롯해 여러 단위로 크기를 지정할 수 있으며, 백분율 크기를 사용할 수도 있습니다. Font-size의 사용법은 다음과 같이 font-size 의 속성 값을 입력해주면 되는데, 이때 사용할 수 있는 값은 상대 크기, 크기 값, 백분율 입니다. 상대 크기는 글자 크기로 사용하도록 미리 약속해 놓은 키워드 중 하나를 사용합니다. 상대 크기 값을 사용할 경우 사용할 수 있는 키워드를 순서대로 나열해 보면 XX-small<x-small<small<medium< large<x-large<xx-large입니다. 각 단계 사이의 글꼴 크기는 1.2배씩 커지거나 작아집니다. 크기 값은 직접 글꼴 크기를 지정하는 것으로 음수 값은 사용할 수 없습니다. 크기 값으로 많이 사용하는 단위는 pt, px, em, ex가 있습니다. 백분율은 부모 요소의 글꼴 크기를 기준으로 계산되며, 이때 부모 요소의 글꼴 크기는 몇 pt 또는 몇 px과 같이 크기 값으로 표현되어 있어야 합니다.

font-style은 글자를 이탤릭체로 표시하는 속성으로 사용자는 이 속성을 이용하여 글자를 이탤릭체로 표현할지 여부를 결정할 수 있습니다. 사용법은 font-style의 속성 값을 입력하면 되는데, 이때 속성 값으로는 Normal, Italic, Oblicque 세 가지의 속성 값을 가집니다. Nomal은 일반 적인 형태를 의미하며, Italic은 이탤릭체로 표시 하는 것을, 그리고 Oblicque는 기울어진 모양을 의미합니다.

2. font-family 실습

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

p { font-family:'Open Sans' ; }

</style>

<body>

font-family를 사용하지 않은 일반적인 텍스트 !!!

<p> font-family를 이용하여 폰트를 적용한 텍스트 !!! </p>

</body>

</html>

3. @font-face 실습

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

@font-face {

font-family: "Bitstream Vera Serif Bold";

src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");

}

p { font-family: "Bitstream Vera Serif Bold", serif }

</style>

<body>

@font-face를 사용하지 않은 일반적인 텍스트 !!!

<p> @font-face를 사용한 텍스트 !!! </p>

</body>

</html>

4. font-size, font-style 실습

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

.no1 {

font-size: 20px;

font-style: normal;

}

.no2 {

font-size: 30px;

font-style: italic;

}

.no3 {

font-size: 40px;

font-style: oblique;

}

</style>

<body>

<p class = "no1"> font-style 속성 값 : normal </p>

<p class = "no2"> font-style 속성 값 : italic </p>

<p class = "no3"> font-style 속성 값 : oblique </p>

</body>

</html>

5. 텍스트 스타일

이번에는 텍스트 관련 스타일에서 텍스트 스타일에 대해 알아보겠습니다. Direction 속성은 텍스트의 쓰기 방향을 지정할 때 사용합니다. 기본적으로 텍스트는 왼쪽에서 오른쪽으로 표시가 되는데, direction의 다른 속성 값을 사용하여 오른쪽에서 왼쪽으로 표시되도록 할 수 있습니다. Diection 속성은 다음과 같이 선택자를 지정하고 속성 값을 지정해 주면 되는데, 이때 속성 값으로 ltr과 rtl을 갖습니다. ltr은 기본 값으로 텍스트를 왼쪽에서 오른쪽으로 표시하며, direction에 속성 값을 지정하지 않으면 ltr로 표시됩니다. rtl은 텍스트를 오른쪽에서 왼쪽으로 표시하는 속성 값입니다.

text-align은 텍스트를 정렬하는 속성입니다. 사용자가 문단의 텍스트 정렬 방법을 지정하는 속성으로 다음과 같이 속성 값을 입력하면 됩니다. text-align은 다음과 같이 left, right, center, justify 4가지의 속성값을 갖는데, 각각은 어떤 정렬을 의미하는지 블록을 드래그하여, 뜻이 알맞도록 완성해보세요.

그렇습니다. Left는 왼쪽 정렬, right는 오른쪽 정렬 cente는 가운데 정렬이며, justify는 양쪽 정렬을 하는 속성 값입니다.

text-decoration은 텍스트에 줄을 표시하는 속성입니다. text-decoration 의 속성값에 따라 텍스트에 밑줄을 긋거나 가로지르는 줄을 표시할 수 있으며, 주로 텍스트 링크의 밑줄을 없앨 때 사용합니다. text-decoration의 속성값으로는 none, underline, overline, line-through가 있는데, none은 밑줄을 표시하지 않으며, underline은 밑줄을 표시하는 속성 값입니다. overline은 영역 위로 선을 그리며, line-through는 영역을 가로지르는 선을 그리는 속성 값입니다.

6. direction 실습

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

.direction1 {

direction: ltr;

}

.direction2 {

direction: rtl;

}

</style>

<body>

<p class = "direction1"> 텍스트를 왼쪽에서 오른쪽으로 표시 </p>

<p class = "direction2"> 텍스트를 오른쪽에서 왼쪽으로 표시 </p>

</body>

</html>

7. text-align 실습

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

.aligh_left {

text-align: left;

}

.aligh_right {

text-align: right;

}

.aligh_center {

text-align: center;

}

.aligh_justify {

text-align: justify;

}

</style>

<body>

</body>

</html>

8. text-decoration 실습

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

.decoration1 {

text-decoration: none;

}

.decoration2 {

text-decoration: underline;

}

.decoration3 {

text-decoration: overline;

}

.decoration4 {

text-decoration: line-through;

}

</style>

<body>

<p class = "decoration4"> 텍스트 영역을 가로지르는 선 표시!!! </p>

</body>

</html>

테두리 관련 스타일

1. 박스 관련 스타일

테두리 관련 스타일

테두리 관련 스타일은 박스의 여백이나 모서리 등을 설정하는 박스 관련 스타일과 테두리의 두께나 색상, 선 스타일 등을 지정하는 테두리 관련 스타일로 구분 됩니다. 이에 대해 자세히 알아보겠습니다.

박스 관련 스타일 속성 중에서 margin은 요소 바깥쪽 여백을 설정하는 속성입니다. margin-top, margin-right, margin-bottom, margin-left 를 이용하여 요소의 바깥 위쪽, 오른쪽 아래쪽, 왼쪽의 여백을 설정할 수 있습니다. margin 속성 사용 시 네 가지 속성을 한 번에 사용할 수 있으며, 각 속성의 사용법은 다음과 같이 설정하고 싶은 방향의 속성과 속성 값을 입력하면 됩니다.

padding은 콘텐츠 영역과 테두리 사이의 여백을 설정하는 속성입니다. padding-top, padding-right, padding-bottom, padding-left를 이용하여 요소의 위쪽, 오른쪽, 아래쪽, 왼쪽 패딩을 설정합니다. padding 속성 사용 시 네 가지 속성을 한 번에 사용할 수 있으며, 속성의 사용법은 다음과 같이 설정하고 싶은 방향의 속성과 속성값을 입력하면 됩니다.

border-radius는 박스 모서리를 둥글게 만드는 속성입니다. 지금까지 박스의 모서리를 부드럽게 만들 때에는 그래픽이나 자바스크립트를 이용하였는데, CSS3에서는 border-radius 속성을 이용하여 모서리 부분을 손쉽고 다양하게 처리할 수 있게 되었습니다. 각 모서리를 똑같은 모양으로 만들 수도 있고, 각각의 모서리 별로 다르게 만들 수도 있습니다. 속성 값을 하나만 입력하면 네 개의 모서리가 똑같은 모양이 되고, 각각의 모서리 값을 입력하면 모서리 별로 다르게 만들 수 있는데, 속성 값을 적는 순서는 그림의 ①②③④ 순입니다.

2. margin 실습

박스 관련 스타일 중 margin을 이용한 예제를 살펴보겠습니다. margin은 텍스트의 텍스트 바깥 여백을 지정하는 속성으로 예제에서는 p값을 선택자로 하였으며, margin의 속성값을 위와 아래는 각각 50px로, 오른쪽과 왼쪽은 각각 100px을 주었고, 그 결과 해당 텍스트가 입력한 값 만큼 여백이 생긴 것을 확인 할 수 있습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

p {

margin-top: 50px;

margin-right: 100px;

margin-bottom: 50px;

margin-left: 100px;

}

</style>

<body>

</body>

</html>

박스 관련 스타일 중 border-radius를 이용한 예제를 살펴보겠습니다. border-radius는 둥근 모서리를 지정하는 속성으로 예제에서는 radius1 부터 3까지 다른 속성 값을 주었습니다. 화면의 border 속성은 테두리의 굵기와 종류, 색상을 지정할 수 있는 속성으로 radius1 부터 3까지는 모두 굵기가 3px이고 실선인 테두리를 공통으로 가지고 있습니다. 여기에 radius1은 반지름이 5px인 둥근 모서리를 지정하였고, radius2는 반지름이 10px인 둥근 모서리를 지정하였습니다. 그리고 radius3은 반지름이 20px인 둥근 모서리를 지정하였습니다. radius1부터 3까지는 class명으로 지정하여 간편하게 해당 속성값을 지정한 것을 확인할 수 있습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

.radius1 {

border-radius: 5px;

border: 3px solid;

}

.radius2 {

border-radius: 10px;

border: 3px solid;

}

.radius3 {

border-radius: 20px;

border: 3px solid;

}

</style>

<body>

</body>

</html>

3. 테두리 관련 스타일

테두리 관련 스타일에 대해 알아보겠습니다. 테두리 관련 스타일은 다음과 같이 Border-width, Border-color, Border-style을 사용하여 스타일링 할 수 있습니다. boder-width는 테두리 두께를 지정하는 속성입니다. Border-top-width, border-right-width, border-bottom-width, border-left-width 를 이용하여 위쪽, 오른쪽, 아래쪽, 왼쪽의 테두리 두께를 지정할 수 있습니다. Border-width 속성 사용 시 네 가지 속성을 한 번에 사용할 수 있으며, 두께를 지정할 때 키워드를 이용하거나 직접 입력하면 됩니다. 키워드에는 얇은 선을 그리는 thin과 보통 선을 그리는 medium, 그리고 굵은 선을 그리는 thick이 있습니다.

boder-color는 테두리 색상을 지정하는 속성입니다. border-top-color, border-right-color, border-bottom-color, border-left-color를 이용하여 위쪽, 오른쪽, 아래쪽, 왼쪽의 테두리 색상을 지정할 수 있습니다. Border-color 속성 사용 시 네 가지 속성을 한 번에 사용할 수 있으며, border-color 의 사용법은 속성 값에 색상을 값을 지정해 주면 되는데, 색상 값을 지정할 때에는 색상 이름이나 16진수 값, 또는 rgb 값 등을 이용하여 지정할 수 있습니다. 아무런 값을 지정하지 않으면 투명하게 나타나기 때문에 화면에는 보이지가 않습니다. 그렇기 때문에 반드시 색상을 지정하고 웹 문서에서 확인 해야 합니다.

border-style은 테두리 선 스타일을 지정하는 속성입니다. border-top-style, border-right-style, border-bottom-style, border-left-style을 이용하여 위쪽, 오른쪽, 아래쪽, 왼쪽의 테두리 선 스타일을 지정할 수 있습니다. Border-style 사용 시 네 가지 속성을 한 번에 사용할 수 있으며, 기본 값이 none 이므로 스타일시트에 테두리 스타일을 따로 지정하지 않으면 테두리가 화면에 표시되지 않습니다. Border-style의 속성 값에 대한 자세한 내용은 border-style 속성 값 버튼을 눌러 확인해 보시기 바랍니다.

저작자표시

'Web프로그래밍' 카테고리의 다른 글

CSS 04 CSS3 선택자 (0)	2016.04.27
CSS 03 CSS 레이아웃 및 HTML5 적용 (0)	2016.04.27
CSS 01 CSS의 개요 (0)	2016.04.26
HTML5 09 W3C HTML 웹 표준 및 간단한 웹 페이지 만들기 (0)	2016.04.21
HTML5 08 변화된 태그 (0)	2016.04.21

'Web프로그래밍' Related Articles

Comments

Jeongchul Kim

CSS 02 CSS 스타일링 본문

CSS 02 CSS 스타일링

1. 글꼴 스타일

2. font-family 실습

3. @font-face 실습

4. font-size, font-style 실습

5. 텍스트 스타일

6. direction 실습

7. text-align 실습

8. text-decoration 실습

1. 박스 관련 스타일

2. margin 실습

3. 테두리 관련 스타일

'Web프로그래밍' 카테고리의 다른 글

티스토리툴바