CSS 방식
- Inline Sytle 방식
- 태그 내부에 속성값으로써 Style을 작성하는 방식
- html 태그와 섞어 사용하기 때문에 잘 안 씀
- 대상 태그를 지정해 줌
▽ 예제 코드 1 ▽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Internal Style-->
</head>
<body>
<!-- inline Style-->
<p style="color:red;">Welcome to Style Sheet</p>
</body>
</html>▽ 예제 코드 1 - 결과 ▽
- Internal Style 방식
- Head 영역 내부에 Style 영역을 구성하여 Style을 작성하는 방식
- Selector 문법을 사용하여 element에 접근함
▽ 예제 코드 2 ▽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
color: dodgerblue;
background-color: pink;
}
</style>
</head>
<body>
<p>Hello</p>
<p>CSS</p>
</body>
</html>▽ 예제 코드 2 - 결과 ▽
- External Style 방식
- style 코드가 너무 많을 시 가독성이 떨어지므로 css 파일을 따로 생성하여 import하는 방식
'Web > HTML' 카테고리의 다른 글
| [HTML] HTML 기본 예제 - form(input submit, input reset, required), audio, video, fieldset, legend (0) | 2020.04.23 |
|---|---|
| [HTML] HTML 예제 - 게시판 글쓰기 창 (0) | 2020.04.23 |
| [HTML] HTML 예제 - 자유 게시판 (0) | 2020.04.23 |
| [HTML] HTML 예제 - 간단 로그인 창 (0) | 2020.04.23 |
| [HTML] HTML 기본 개념 - Table(th, tr, td, colspan, rowspan), Input, Textarea, Select (0) | 2020.04.23 |