HTML을 효율적으로 작성할 수 있도록 정의하는 CSS에 관하여 정리하려 합니다. CSS는 일정한 기능들을 미리 지정하여 여러 부분에서 동일하게 사용하여 적용할 수 있도록 해줍니다.
CSS(Cascading stlye Sheets)로 가능한 작업은
- html 문서 내에 글자의 종류, 크기, 색, 여백 등을 미리 지정합니다.
- 글자의 정렬 방식을 결정하거나 글자에 다양한 효과를 줄 수 있습니다.
- 박스에 다양한 효과를 줄 수 있습니다.
- 사용자의 웹 브라우저 환경에 상관없이 일정한 화면을 보여줄 수 있습니다.
CSS(Cascading stlye Sheets)의 기본 형식
CSS는 설정과 스타일의 적용 두 부분으로 나누어져 적용됩니다. 새로운 스타일을 정의한 후 정의한 스타일을 HTML문서에 적용합니다.
selector {속성:값}
selector는 스타일 적용 대상입니다. 이 대상은 html 문서에서 태그로 사용됩니다. 사용되는 태그는 기존에 html에서 사용하고 있는 것이어야 합니다.
속성
기본으로 설정된 스타일 중 변경하고자 하는 속성입니다. "속성:값"과 같이 한 쌍으로 작성합니다.
적용 예) H1 {color : red}
H1은 selector에 해당되는 스타일 적용할 대상, color는 변경하고자 하는 속성, red는 color에 설정할 값입니다.
H1은 selector에 해당되는 스타일 적용할 대상, color는 변경하고자 하는 속성, red는 color에 설정할 값입니다.
여러 가지 속성을 설정할 경우 각 쌍들을 구분하기 위해 세미콜론(;)을 기술합니다.
적용 예) selector { 속성 1:속성값 1; 속성 2:속성값 2; · · · 속성 n:속성값 n}
HTML 문서에 CSS 적용하는 방법.
embedding :
- <head> 태그에 스타일 설정을 삽입하는 형식으로 html 문서의 <head>태그에 <style> 태그를 삽입하며 TYPE 속성에 "text/css"를 기술하여야 합니다.
적용 예) <html>
<head>
<STYLE TYPE = "text/css"> H1 { font-family : 굴림체; color: #FFFFFF } </STYLE> </head>
<body> <H1> 스타일 굴림체 적용</H1> </body> </html>
head 에 스타일 설정 부분.
body 에 스타일 적용 부분.
link :
- 외부 파일에 존재하는 스타일 시트 파일을 HTML에 삽입하는 형식으로 CSS를 설정 부분만 따로 파일로 작성하여 이를 html 문서로 불러와 사용하는 방법으로 <LINK> 태그를 사용하며, CSS 파일을 설정하여 저장할 때는 확장자를 "CSS"로 지정합니다
<link rel="stylesheet" type="text/css" href="경로 명+파일 명.css">
적용 예) <html>
<head>
<link rel=stylesheet type="text/css" href="sample.css"> </head>
<body> <H1> 스타일 굴림체 적용</H1> </body> </html>
head 에 스타일 설정 부분.
body 에 스타일 적용 부분.
inline :
- HTML 문서의 태그에서 직접 스타일을 설정하는 방식으로 스타일 설정하는 내용 전체를 이중 따음표로 기술하여야 합니다.
<body style="sample-text-red">
적용 예) <html>
<head> </head>
<body> <H1 STYLE="font-family: 굴림체 ; color : #FFFFFF"> inline 스타일 </H1> </body> </html>
body 에 스타일 적용 부분.
class 또는 ID 속성을 이용하기
- 특정 부분에만 스타일 적용을 원할 경우에 class 또는 ID 속성을 이용하여 설정합니다.
class 속성은 특정 태그에 설정하지 않고 "." 다음에 class 이름을 지정한 후 사용하며 class 이름은 사용자가 임의로 만들어 줄 수 있습니다.
적용 예) <html>
<head ><STYLE TYPE = "text/css">
.stylesamlpe { color : #FFFFFF }
</STYLE> </head>
<body> <H1 class = stylesample> 클래스 사용하여 스타일 지정하기 </H>
</body> </html>
클래스 이름을 설정한 후 class 키워드 다음에 선택적으로 적용하고 싶은 곳에 사용합니다.
ID 속성은 태그에 상관없이 스타일이 모두 적용될 수 있습니다. 이름을 지정할 때에는 # 기호를 새로운 이름 앞에 작성합니다. 설정된 스타일은 어느 태그에서나 ID 속성으로 적용할 수 있습니다.
적용 예) <html>
<head ><STYLE TYPE = "text/css">
#stylesamlpetype1 { color : #FFFFFF }
</STYLE> </head>
<body> <H1 ID = stylesampletype1> ID 사용하여 스타일 지정하기 </H>
</body> </html>
정리하며
스타일을 적용하는 방법에 대하여 간략하게 정리하였습니다. HTML 또는 CSS 작성하기는 어렵지만 대체적인 윤곽을 알면 흐름을 파악하는 데는 도움이 되리라고 생각합니다.
