css를 사용하는 이유는 웹문서의 내용과 상관없이 문서안의 디자인만 바꿀 수 있기 때문입니다. stylesheet는 웹 브라우저에서 만들어지는 "브라우저 기본 스타일"과 사이트 제작자가 직접 디자인을 꾸밀 수 있는 "사용자 스타일"로 나누어 집니다. css는 사용자 스타일을 사용하며 직접 css파일 안의 코드를 작성하여 디자인을 꾸며줍니다.
css의 장점
css의 장점은 HTML로는 웹사이트의 내용을 나열하고 문서의 구조를 만들어 내는데, css를 사용하여 HTML로 만들어진 웹문서의 디자인을 구성하고 웹 표준을 지켜내며, 사용자의 화면 편의성을 다양하게 꾸밀수 있습니다.
css의 기본 사용 형식
css의 기본사용 형식은 대체로 사용되어지는 사용방법 입니다.
선택자 {속성1 : 속성값; 속성2: 속성값;} 이런식의 기본형으로 사용가능합니다.
css의 3가지 사용 형식
css의 사용 형식을 3가지로 분류해서 만듭니다. 각각의 형식에 따라 사용방법을 달리 하면 스타일이 지정되는 우선순위나 해당 스타일을 지정해야 하는 곳에만 별도로 지정해 줄 수 있습니다.
1. 인라인스타일
2. 내부 스타일 시트
3. 외부 스타일 시트
css의 인라인 스타일 사용방법
css의 인라인 스타일 사용 방법은 HTML문서 내부에서 작성하면 된다.
html의 태그를 작성할 때 태그명 "<>"안에 style을 지정하여 만들어 줍니다.
이런 식으로 만들게 되면 각각의 태그마다 스타일을 다르게 지정할 수 있어 특정해야 요소에 스타일을 입혀줄수 있습니다.
기본 사용 방법은
<태그명 style="스타일 규칙에 맞춰 작성">이런식으로 작성하면 된다.
css의 내부 스타일 시트 사용 방법
css의 내부 스타일 시트 또한 HTML문서내부에서 작성하면 된다. 내부 스타일을 사용하기 위해서는 <head>태그안쪽에 <style></style>태그를 선언하고 style태그 안에 만들고 싶은 스타일을 만들어서 지정하여 준다. style 안쪽에서 사용하기 위해서는 각각의 스타일을 지정하여 만들고 스타일이 적용될 수 있는 요소를 지정해 주면 스타일이 적용된다.
사용방법으로는
<head>
<style>
/* 이 안쪽에 스타일을 작성한다.*/
</style>
</head>이렇게 선언을 해줘야 합니다.
스타일을 선언하여 준 후 스타일을 각각의 요소에 지정하는 방법은
요소에 기본 적용 하는 방법
1. 태그에 직접 지정
태그명{ 스타일 규칙 }
2. class를 이용하여 복수의 스타일 지정
.class명{ 스타일 규칙 }
=> 사용방법
<p class="class명"></p>
3. id를 이용하여 요소에 단일 스타일을 지정
#id명 { 스타일 규칙 }
=> 사용방법
<p id="id명"></p>이런 형식으로 내부 스타일 시트를 사용하게 됩니다.
css의 외부스타일 시트를 사용하는 방법
css의 외부 스타일 시트를 사용하는 이유는 css의 스타일을 하나의 파일로 저장하여 여러개의 HTML에 모두 지정하기가 용이하기 때문입니다. 외부 파일로 스타일 시트를 작성하게 된다면 웹사이트에 여러개로 나뉘어지는 HTML의 중복된 스타일을 외부 파일로 연결하여 한 번에 공통된 스타일을 지정 할 수 있기 때문입니다.
css외부 스타일의 사용 방법으로는
<head>
<link rel="Stylesheet" href="외부 스타일 시트 파일 경로">
</head>이런식으로 head태그 사이에 link태그를 이용하여 외부파일의 경로를 불러와서 사용합니다.
외부 파일에서의 스타일을 만드는 형식은 내부에서 사용하는 방법과 동일합니다.
요소에 기본 적용 하는 방법
1. 태그에 직접 지정
태그명{ 스타일 규칙 }
2. class를 이용하여 복수의 스타일 지정
.class명{ 스타일 규칙 }
=> 사용방법
<p class="class명"></p>
3. id를 이용하여 요소에 단일 스타일을 지정
#id명 { 스타일 규칙 }
=> 사용방법
<p id="id명"></p>이런 식으로 사용하며 경로를 이용하여 지정해 주는 방법이 다른 것 뿐입니다.
이렇게 태그나 class, id 같은 요소를 특정하는 부분을 선택자라고 하며 css에서 selector라고 말합니다.
어떠한 요소를 선택하느냐에 따라 css의 스타일이 적용되는 부분이나 영역이 달라질 수 있기 때문에 css를 사용하기 위해서 반드시 "선택자"를 신중하게 고려해야 합니다.
'국비훈련' 카테고리의 다른 글
| [HTML]html이란 무엇일까 (0) | 2024.03.25 |
|---|