CSS란?
- CSS란 HTML 등의 마크업 언어로 작성된 문서가 웹사이트에 표현되는 방법을 정해주는 언어
- 레이아웃, 폰트, 색상처리 등의 디자인 요소를 HTML과 완전히 분리시켜 구조화된 HTML을 만들기 위한 언어
- 디자인에 필요한 부분은 CSS가 전담하기 때문에 웹 퍼블리셔와 웹 프로그래머 간의 협업이 훨씬 용이하다.
- HTML문서에 CSS를 적용하는 방법은 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 3가지 종류가 있다.
`````````
<body>
<ul style="list-style: none;">
<li style="color: red; margin: 10px; height: 20px;">사과</li>
<li style="color: red;">딸기</li>
<li style="color: red;">석류</li>
<li style="color: red;">체리</li>
</ul>
<!-- -->
</body>
`````````
위처럼 body 내부에 직접 적용하는 스타일들을 인라인 스타일 이라고 한다.
```````````
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
list-style: none;
padding: 0;
}
li {
color: orange;
}
</style>
</head>
`````````````
위와 같이 html 파일안 head부분에 따로 입력하는 것을 내부 스타일이라 한다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 외부 css 파일 불러오기 -->
<link rel="stylesheet" href="style.css">
</head>
위 코드는 외부스타일로 style.css 파일을 따로 만들어 link 태그를 이용해 불러오는 형식이다. 주로 실무에 사용된다.
tips
인라인 스타일은 실무에서 거의 적용안되는 편이며, 내부 스타일도 마찬가지 이지만 리액트의 경우에 컴파일 된 후 외부스타일로 변경 되기 때문에 내부스타일이 사용되기도 한다.
'CSS' 카테고리의 다른 글
| [중앙정보처리학원] CSS* background, float (0) | 2024.03.13 |
|---|---|
| [중앙정보처리학원] CSS* 글꼴, 문자 (0) | 2024.03.13 |
| [중앙정보처리학원] CSS* 상속과 우선순위 (0) | 2024.03.12 |
| [중앙정보처리학원] CSS* 가상 수도 클래스 선택자 (0) | 2024.03.12 |
| [중앙정보처리학원] CSS* 기본선택자 (0) | 2024.03.12 |