1. 태그에 직접 작성하기(인라인)
이방법은 HTML 태그에 직접 작성하기 때문에 선택자가 필요하지 않는다.
<div style = 'color : red;'>태그에 직접 작성1</div>단점으로는 우리가 직접 찾아서 값을 넣어줘야하는데 만약 넣어줘야하는 값이 많아지면 곤란해진다. 그래서 최대한 피해야한다. 그리고 수정하는데에도 굉장히 비효율적이다. 그렇다고헤서 이것 자체는 나쁜 방식은 아니다.
2.HTML에 포함하기(내장) --> embeded방식
CSS만 따로 작성하기 때문에 선택자가 필요하다.
CSS코드가 HTML의 <style></style>안에 포함되어 있다. (style태그는 head태그안에 설정을하는 속성이다.)
<head>
<style> //스타일태그는 해드태그안에 있는 일종의 CSS코드라고 보면된다
div{ //이렇게 하면 div 태그를 다 찾아준다.
color : red;
}
</style>
</head>
<body>
<div>HTML에 포함1</div>
<div>HTML에 포함2</div>
<div>HTML에 포함3</div>
</body>
3. HTML 외부에서 불러오기 (link)
외부에서 문서를 가져오는 방식이다. CSS 코드를 완전히 분리할 수 있다. 분리된 하나의 CSS 파일을 여러 HTML 파일이 불러와서 사용 할 수 있다.
cf. 상대경로와 절대경로가 있다. 절대경로 같은 경우에는 맨앞에 '/'가 있다.
<head> //정보
<link rel = "stylesheet" (<- css를 뜻한다) href="/css/main.css"(<-절대경로)>
</head>
<body>
<div>HTML에 외부에서 불러오기1</div> <-- 빨간색 적용
</body>
//main.css에 의미
div{ //div 태그를 선택하고 그 div에는 글자 색상에는 빨간색으로 선언하겠다.
color : red;
}'HTML > 기초' 카테고리의 다른 글
| HTML 문법 (0) | 2020.12.22 |
|---|---|
| 크로스 브라우징 및 웹 접근성 이란? (0) | 2020.12.22 |
| 웹 표준 검사하기 (0) | 2020.06.02 |
| HTML 문서의 구조 (0) | 2020.05.31 |
| HTML 문서의 범위 및 기초 코딩방법 (0) | 2020.05.31 |