CSS 스타일링
1. 텍스트 관련 스타일
1) 글꼴 스타일
● font-family : 글꼴 지정하기
- 웹 문서에서 사용할 글꼴을 지정
- <body> 태그, <p> 태그, <hn>(n=1,2,3,4,5,6) 태그처럼 텍스트를 사용하는 요소들에서 주로 사용
- 지정한 글꼴이 없을 경우를 대비해 두 번째, 세 번째 글꼴 지정 가능
- <body> 스타일에서 한 번 정의하면 문서 전체에 적용(상속됨)
p { font-family : "글꼴이름" ["글꼴 이름", 글꼴 이름"]}
● @font-face : 웹 폰트 사용하기
- CSS3에서는 웹폰트를 표준으로 채택
- 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보를 함께 저장
- 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템에 다운로드 하게 함
@font-face {font-family : 글꼴 이름; src:url(글꼴 파일 경로) format (파일유형); }
● font-size : 글자 크기 조절하기
- CSS3에서는 웹 폰트를 표준으로 채택
- 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보를 함께 저장
- 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템에 다운로드 하게 함
● font-style : 글자를 이탤릭체로 표시하기
- 글자를 이탤리체로 표현할지 여부 결정
font-style : 속성 값;
2) font-family 실습
● font-family를 사용하여 폰트를 변경하는 실습 예제
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 무제 문서 </title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css" />
<style type="text/css">
p { font-family:'Open Sans' ;}
</style>
</head>
<body>
font-family를 사용하지 않은 일반적인 텍스트 !!!
<p> font-family를 이용하여 폰트를 적용한 텍스트 !!! </p>
</body>
</html>
3) @font-face 실습
● @font-face를 사용하여 폰트를 변경하는 실습 예제
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 무제 문서 </title>
<style type="text/css">
@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>
</head>
<body>
@font-face를 사용하지 않은 일반적인 텍스트 !!!
<p> @font-face를 사용한 텍스트 !!! </p>
</body>
</html>
4) font-size, font-style 실습
● font-size, font-style을 사용하여 폰트를 변경하는 실습 예제
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 무제 문서 </title>
</head>
<style type="text/css">
.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 속성을 이용하여 오른쪽에서 왼쪽으로 표시 가능
p { direction : 속성값; }
● text-align : 텍스트 정렬하기
- 문단의 텍스트 정렬 방법 지정
text-align : 속성 값;
● text-decoration : 텍스트에 줄 표시하기
- 텍스트에 밑줄을 긋거나 가로지르는 줄을 표시
- 텍스트 링크의 밑줄을 없앨 때 주로 사용
text-decoration : 속성 값;
6) direction 실습
● direction을 사용하여 텍스트를 이동시키는 실습 예제
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 무제 문서 </title>
</head>
<style type="text/css">
.direction1 {
direction : ltr;
}
.direction2 {
direction : rtl;
}
</style>
<body>
<p class = "direction1"> 텍스트를 왼쪽에서 오른쪽으로 표시 </p>
<p class = "direction2"> 텍스트를 오른쪽에서 왼쪽으로 표시 </p>
</body>
</html>
7) text-align 실습
● text-align을 사용하여 텍스트를 이동시키는 실습 에제
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 무제 문서 </title>
</head>
<style type="text/css">
.aligh_left {
text-align: left;
}
.aligh_right {
text-align: right;
}
.aligh_center {
text-align: center
}
.aligh_justify {
text-align: justify;
}
</style>
<body>
<p class = "aligh_left"> 텍스트 왼쪽 정렬!!! </p>
<p class = "aligh_right"> 텍스트 오른쪽 정렬!!! </p>
<p class = "aligh_center"> 텍스트 가운데 정렬!!! </p>
<p class = "aligh_justify"> 텍스트 양쪽 정렬!!! </p>
</body>
</html>
8) text-decoration 실습
● text-decoration을 사용하여 텍스트를 이동시키는 실습 에제
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 무제 문서 </title>
</head>
<style type=t"ext/css">
.decoration1 {
text-decoration: none;
}
.decoration2 {
text-decoration: underline;
}
.decoration3 {
text-decoration: overline;
}
.decoration4 {
text-decoration: line-through;
}
</style>
<body>
<p class = decoration1> 텍스트 밑줄표시하지 않기!!! </p>
<p class = decoration2> 텍스트 밑줄 표시!!! </p>
<p class = decoration3> 텍스트 영역 위로 선 표시!!! </p>
<p class = decoration4> 텍스트 영역을 가로지르는 선 표시!!! </p>
</body>
</html>
2. 테두리 관련 스타일
1) 박스 관련 스타일
● margin : 요소 바깥쪽 여백 설정하기
- margin-top, margin-right, margin-bottom, margin-left
- 요소의 바깥 위쪽, 오른쪽, 아래쪽, 왼쪽 margin 설정
- 네 가지 속성을 한 번에 사용할 수 있음
● padding : 콘텐츠 영역과 테두리 사이 여백 설정하기
- padding-top, padding-right, padding-bottom, padding-left
- 요소의 위쪽, 오른쪽, 아래쪽, 왼쪽 padding 설정
- 네 가지 속성을 한번에 사용할 수 있음
● border-radius : 박스 모서리 둥글게 만들기
- 지금까지 박스의 모서리를 부드럽게 만들 때 그래픽이나 자바스크립트를 이용함
- border-radius 속성을 이용하여 모서리 부분을 손쉽고 다양하게 처리 가능
- 각각의 모서리 별로 다르게 만들 수 있음
2) margin 실습
- margin을 사용하여 텍스트를 배치하는 실습 예제
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 무제 문서 </title>
</head>
<style type="text/css">
p {
margin-top: 50px;
marginright: 100px;
margin-bottom: 50px;
margin-left: 100px;
}
</style>
<body>
<p> 마진 속성 값 실습하기 !!! </p>
</body>
</html>
3) border-radius 실습
● border-radius를 사용하여 둥근모서리의 사각형을 만드는 실습 예제
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 무제 문서 </title>
</head>
<style type=text/css">
.radius1 {
border-radius: 5px;
border: 3px solid;
}
.radius2 {
border-radius: 10px;
border: 3px solid;
}
.radius3 {
border-radius: 20px;
border: 3px solid;
}
</style>
<body>
<div class="radius1">반지름이 5px인 둥근 사각형</div><br>
<div class="radius2">반지름이 10px인 둥근 사각형</div><br>
<div class="radius3">반지름이 20px인 둥근 사각형</div><br>
</body>
</html>
4) 테두리 관련 스타일
● border-width : 테두리 두께 지정학
- border-top-width, border-right-width, border-bottom-width, border-left-width
- 위쪽, 오른쪽, 아래쪽, 왼쪽의 테두리 두께를 지정
- 네 가지 속성을 한 번에 사용할 수 있음
border-width : 키워드 | 크기 값;
● border-color : 테두리 색상 지정하기
- border-top-color, border-right-color, border-bottom-color, border-left-color
- 위쪽, 오른쪽, 아래쪽, 왼쪽의 테두리 색상을 지정
- 불필요함
- 네 가지 속성을 한번에 사용할 수 있음
border-color : 속성 값;
● border-style : 테두리 선스타일 지정하기
- border-top-style, border-right-style, border-bottom-style, border-left-style
- 위쪽, 오른쪽, 아래쪽, 왼쪽의 테두리 선스타일을 지정
- 네 가지 속성을 한 번에 사용할 수 있음
- 기본 값은 none-따로 지정하지 않으면 테두리가 화면에 표시되지 않음
border-style : 속성 값;
5) 테두리 관련 속성 실습
● border-width, border-color, border-style을 활용하여 테두리 속성을 변경해보는 실습 예제
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 무제 문서 </title>
</head>
<style type="text/css">
p {
border-width: thick;
border-color: blue;
border-style: solid;
}
</style>
<body>
<p> 테두리 관련 속성들 실습하기 !!! </p>
</body>
</html>
