반응형
CSS 첫번째 문서에서 한번 언급을 했지만 정리하고 가면 좋을거 같아서 따로 정리한번더 하겠습니다//^.^
인라인 스타일(inline style)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 삽입 방법</title>
</head>
<body>
<h1 style="color:red; font-size:18px">Hello World</h1>
</body>
</html>
실행결과
- HTML태그에 CSS 명령을 직접 입력하는 방식
- HTML 문서에 가장 간단하게 CSS를 삽입할 수 있는 인라인 스타일
- CSS를 HTML 태그과 같은 행에 사용하여 HTML 태그가 복잡
실전에서는 거의 사용하지 않는다!! 하지만 티스토리에서 글을 작성하면서 기본모드가 아닌 HTML모드를 보게되면 인라인 스타일로 작성이 되는것을 볼수 있다.
티스토리를 하기 위해서 HTML, CSS를 배우는 중이라면 인라인스타일로도 충분히 스타일을 줄수 있다!!
티스토리를 하기 위해서 HTML, CSS를 배우는 중이라면 인라인스타일로도 충분히 스타일을 줄수 있다!!
내부 스타일 시트(internal style sheet)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 삽입 방법</title>
<style>
h1{
color:red;
font-size:18px;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
외부 스타일 시트(external style sheet)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 삽입 방법</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
h1{
color:red;
font-size:18px;
}▼ 소스코드 살펴보기
- 6행에서 외부 스타일 시트 방식은 <link> 태그를 이용하여 CSS파일의 경로를 설정한다.
- 웹페이지에서 HTML, CSS가 서로 다른 파일로 존재
- CSS를 별도로 작성하여 웹 사이트에서 CSS 부분을 모듈화하여 여러 페이지에서 공유하고 관리 용이
외부 스타일 시트가 실전에서 많이 사용된다.
브라우저마다 기본으로 적용되어 있는 CSS값들이 다 달라서 우리가 입력한대로 브라우저가 적용을 한다고 해도 원하는 대로 표현이 안될 수도 있어서 초기화해주는 CSS파일이 있다.
meyerweb.com/eric/tools/css/reset/
브라우저마다 기본으로 적용되어 있는 CSS값들이 다 달라서 우리가 입력한대로 브라우저가 적용을 한다고 해도 원하는 대로 표현이 안될 수도 있어서 초기화해주는 CSS파일이 있다.
meyerweb.com/eric/tools/css/reset/
홈페이지에 들어가서 중간 부분에 'a copy of the file' 클릭할 경우 소스가 보이지만 그걸 복사해서 파일을 하나 만들어도 되지만 ' a copy of the file'를 오른쪽마우스로 클릭하여 '다른 이름으로 링크 저장'을 하여 파일형식으로 저장하여 외부 스타일 시트 적용하는 방식으로 reset.css파일을 적용하면된다.
반응형
'Web > CSS' 카테고리의 다른 글
| CSS 선택자 - 가상요소, 가상클래스 (1) | 2020.12.19 |
|---|---|
| CSS 선택자 - 조합선택자(후손,자식,형제) (6) | 2020.12.18 |
| CSS 선택자 - id, class (4) | 2020.12.17 |
| DOM이란? (5) | 2020.12.16 |
| CSS란? (0) | 2020.10.02 |
댓글