🔮 1. CSS에서의 스타일 시트
CSS를HTML문서에 적용할 때 사용하는 3가지 방법이 있습니다.
1. 인라인 스타일(Inline style)
2. 내부 스타일 시트(Internal style sheet)
3. 외부 스타일 시트(External style sheet)
1.1 인라인 스타일
- 인라인 스타일이란,
HTML요소 내부에style속성을 사용하여 CSS 스타일을
적용시키는 방법, 태그 안에 사용하는 방법
<body>
<p style="color:brown"> HTML 내부 요소에서 스타일 사용 </p>
</body>
<-- 내부 요소에 사용하는 방식은 권장하지 않습니다.
외부 스타일 시트 문서를 가져와 적용 하더라도, 인라인에서 적용한 스타일은 변경되지 않습니다.
이로 인해 스타일시트를 사용하는 이점을 잃게 되고, 필요한 경우에만 사용하길 권장합니다. -->1.2 내부 스타일 시트
HTML문서 내부에서 적용하는 스타일 시트HEAD태그 안에서 사용되며, 이러한 내부 스타일은 현재 문서 페이지에만 적용 됩니다.
<head>
<style>
p {
color: red;
}
</style>
</head>
<-- 현재 페이지에서 p 태그를 사용하는 모든 태그가 스타일에 영향받음 -->1.3 외부 스타일 시트
- 외부 스타일 문서로 웹 페이지 문서 파일에 스타일을 관리할 수 있는 스타일 시트
- 스타일만 코딩된 외부파일로, 여러 문서에 적용시킬 수 있습니다.
- 외부 스타일 시트의 파일 확장자는
.css로 저장해야 합니다.
html 문서 파일
<head>
<link rel="stylesheet" href="./htmlstyle.css" />
</head>
<-- href의 경로에는 외부 스타일 시트의 파일 경로를 지정해주면 현재 문서에 적용 됩니다. -->css 문서 파일
h2 {
color: red;
}
<-- css 파일은 선택자와 선언부로만 구성 됩니다. -->
프론트엔드 개발자가 되기 위한 학습 과정을 정리하는 블로그