CSS란?
종속형 시트라고 하며, Cascading Style Sheets 의 약자이다.
HTML과 같이 사용하며, HTML이 정보를 표현한다면, CSS는 HTML의 정보를 시각적으로 꾸며주는 역할을 한다.
즉, HTML의 style 부분을 담당하고 있다고 생각하면 쉽고 간단하다.
CSS 작성방식
CSS 작성방식에는 총 3가지가 있다.
| 방식 | 직역 | 우선순위 |
| External | 외부 스타일 시트 | 3 |
| Internal | 내부 스타일 시트 | 2 |
| Inline | HTML 안에 스타일지정 | 1 |
External 방식은 적용 우선순위가 제일 낮으며, 제일 먼저 적용이 된다.
즉, 가장 먼저 적용이 되기때문에 다른 작성방식에 의해 덮어씌워질 수 있다.
아래는 CSS 파일이 프로젝트 내에 외부 파일이 있을때에 적용하는 코드이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> CSS External </title>
<link type="text/css" rel="stylesheet" href="./mystyle.css">
</head>
<body>
</body>
</html>Internal 방식은 우선순위가 두번째 이며, 외부가 적용된 후 그위에 덮어서 적용이 된다.
아래는 CSS 파일이 따로 존재하지 않으며, HTML 파일에 바로 사용되는 코드이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> CSS External </title>
<style type="text/css">
/*CSS 내용 작성*/
</style>
</head>
<body>
</body>
</html>Inline 방식은 우선순위가 제일 높으며, 제일 마지막에 적용되어, 외부 스타일 시트와 내부 스타일 시트를 덮어 적용이 된다.
아래는 CSS가 Inline 방식으로 적용된 코드이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> CSS External </title>
</head>
<body>
<p style="font-size: 10pt">이부분의 글자크기는 10포인트입니다.</p>
</body>
</html>inline 방식은 직접적이지만 코드가 길어질 경우 가독성이 떨어지게 되므로 주의하여 사용해야한다.
또한 직접적용 되므로 특정 부분을 수정할때에 유용하게 사용할 수 있다.
'Language > CSS' 카테고리의 다른 글
| CSS id, class, name, 문자 크기, 간격조절, 색상, 폰트 (0) | 2020.01.10 |
|---|