※ 강의를 듣고 제가 이해한 것을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.
1. 태그에 직접 작성하기(인라인)
<div style="color: red;">태그에 직접 작성1</div> <!-- red -->
<div style="color: red;">태그에 직접 작성2</div> <!-- red -->
<div style="color: red;">태그에 직접 작성3</div> <!-- red -->태그에 직접 작성하기 때문에 선택자가 필요하지 않고 style= 을 써준 뒤 속성과 값을 적어주면 된다.
인라인 선언 방식의 단점: 코드수가 많을때 많은 코드들에 일일히 써줘야하고 수정할때도 일일히 수정
해야해서 비효율적이다. 그러므로 이 방식은 되도록이면 피하는 것이 좋다.
하지만 그렇다고 아예 이 방식이 쓰이지 않는 것은 아닌데 자바스크립트가 HTML에 CSS를 강제로
삽입 할때 인라인 작성 방식을 자바스크립트가 활용한다.
또한 자바스크립트는 반복문같은 제어문이 있기 때문에 그것을 이용하면 되기 때문이다.
2. HTML에 포함하기(내장)
<head>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>HTML에 포함1</div> <!-- red -->
<div>HTML에 포함2</div> <!-- red -->
<div>HTML에 포함3</div> <!-- red -->
</body>HTML의 style 태그안에 CSS 코드가 따로 있기에 선택자가 필요하며
이 방식으로 선언 할 경우 전체 div태그에 일일히 CSS를 작성 하지 않아도 한번에 적용되기 때문에 편리하다.
3. HTML 외부에서 불러오기
<head>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<div>HTML에 외부에서 불러오기1</div> <!-- red -->
</body>/* main.css */
div {
color: red;
}HTML과 완전히 분리된 CSS파일을 link 태그로 불러와서 사용하는 방식이다.
이 방식의 장점은 여러개의 HTML의 파일이 하나의 CSS파일을 불러와서 사용할 수 있다는 것이다.
'개발 공부한 내용 정리 > HTML & CSS' 카테고리의 다른 글
| CSS기초- 속성- 크기, 여백, 색상 (0) | 2020.08.04 |
|---|---|
| CSS- 선택자 (0) | 2020.08.03 |
| CSS기초-기본 문법 (0) | 2020.08.03 |
| HTML - HTML 문서의 범위와 정보 및 구조 (0) | 2020.07.29 |
| 부모 요소와 자식 요소 (0) | 2020.07.29 |