1. 문법
css의 문법은 간단하다.
선택자 {
속성: 값;
속성: 값;
}
/* ex */
<div>hello world</div>
div {
color: red;
font-size: 20px;
border: 1px solid blue;
}가독성이 좋게 이런 식으로 작성해주면 된다.
2. 선언방식
inline 방식
<div style="width: 300px; height: 300px; background: red;"></div>위처럼 태그 내에 직접적으로 스타일 속성을 사용해서 넣어주는 방식으로 유지보수하기가 까다롭기 때문에 사용시 주의가 필요하다!
내장방식
<html>
<head>
<style>
div {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<div>hello world<div>
</body>
</html>
위처럼 <head> 태그 내부에 <style> 태그를 사용해서 작성하는 방식
link 방식
<head>
<link rel="stylesheet" href="경로">
</head><link> 태그를 사용해서 외부에 있는 css 파일을 직접적으로 연결해주는 방식
@import 방식
@import url("경로")css 파일내부에서 다른 css 파일을 가져와서 연결한다.
'css' 카테고리의 다른 글
| css 요소를 띄워주고 위치를 지정해주는 속성! (0) | 2020.10.04 |
|---|---|
| css 박스 모델 속성 ! (0) | 2020.10.03 |
| css의 중요한 단위 ! (0) | 2020.10.03 |
| css 상속과 우선순위 ! (0) | 2020.10.02 |
| css의 선택자의 종류 ! (0) | 2020.10.02 |