[개요]
Cascading Style Sheets의 약자
HTML을 웹사이트에서 화면에 표시되는 정보를 약속한 것. css는 구체적으로 어떤 스타일로 요소가 표시되는지를 정하는 규격이라고 할 수 있습니다.
초기의 웹은 HTML 하나로 문서의 뼈대로 만들고 꾸미기도 하였지만, 공통적인 디자인을 갖는 문서가 여럿 존재 할 경우 하나의 디자인이 변경되면 모든 파일을 수정해야 하는 등의 번거로움이 존재합니다.
css는 이런 문제를 해결함과 동시 웹페이지의 내용과 스타일(표현)을 분리해주어, 역할 분담도 되는 효과를 가지고 있습니다.
[사용법]
CSS 내부적으로 사용되는 문법은 동일하며, 어디에 기술하느냐의 차이가 존재합니다.
기술하는 방법은 아래의 3가지가 있습니다.
1. HTML 태그의 style 속성을 이용
2. <style> 태그를 통해 HTML 문서 내부에 기술(<style>태그는 주로 <head> 태그 내부에 사용합니다.)
3. .css 파일로 분리하여 HTML 문서에 연결
<!-- 1번 방법 -->
<div style="color: red"> this is red text </div>
<!-- 2번 방법 -->
<html>
<head>
<style type="text/css">
.my-text{ color: blue }
</style>
</head>
<body>
<div class="my-text">
this is red blue
</div>
</body>
</html>
1번처럼 사용할 경우 HTML과 CSS를 분리하는 장점이 없어지기 때문에 2,3번을 주로 활용합니다.
<style> 태그의 type="text/css"는 필수가 아니지만, 더 정확한 표현을 위해 함께 써주기도 합니다.
css파일은 아래와 같이 작성을 합니다.
<!-- 3번 방법 -->
@charset "utf-8";
h1{
font-size: 30px;
font-weight: normal;
margin: 0;
margin-bottom: 10px;
}
#progress-bar{
margin: 0;
padding: 0;
margin-bottom: 15px;
list-style: none;
}
.common-btn{
padding: 4px 6px;
background-color: #07C;
color: white;
border: none;
border-radius: 10px;
text-decoration: none;
}css 파일을 별도 작성 후 아래와 같이 HTML 문서 내에서 불러올 수 있습니다.
<head>
<link rel="stylesheet" href="경로.css" type="text/css">
</head>- css의 인코딩은 문서 맨 앞에 @charset "utf-8"; 형식의 코드를 쓰며 지정합니다.
- css에서 background image 등으로 외부 이미지나 파일 등을 참조할 때에는 웹페이지 url이 아닌 CSS 파일의 경로를 기준으로 합니다.
'STUDY > 디자인' 카테고리의 다른 글
| [CSS] id / class 선택자 (0) | 2020.11.18 |
|---|---|
| [CSS] 태그 선택자 (0) | 2020.11.17 |
| [CSS] 선택자 (0) | 2020.11.16 |
| [디자인] 저작권 걱정없는 무료 이미지 사이트 모음 (0) | 2020.09.28 |
| [트렌드]스큐어모피즘(skeuomorphism) (0) | 2020.09.16 |