CSS는 HTML 문서 안에서 <style> 태그를 통해 직접 선언하는 방식으로 내장할 수 있습니다. 이렇게 작성된 스타일 시트를 내부 스타일 시트(Internal Stylesheet)라고 부릅니다.
내부 스타일 시트는 외부 CSS 파일을 별도로 불러올 필요가 없기 때문에 웹페이지의 초기 로딩 속도를 단축할 수 있다는 장점이 있습니다. 또한 HTML 문서 안에서 동적으로 스타일을 정의할 수 있어 유연성이 높습니다.
다만 주의할 점도 있습니다. 내부 CSS는 브라우저 캐시에 저장되지 않기 때문에, 페이지를 요청할 때마다 스타일 코드가 매번 함께 전송됩니다. 따라서 여러 페이지에서 공통으로 사용하는 스타일이라면 외부 스타일 시트를 사용하는 것이 더 효율적입니다.
내부 스타일 시트는 <head> 태그 안에 위치한 <style> 태그에 선언합니다.
문법(Syntax)
내부 스타일 시트를 작성하는 기본 문법은 다음과 같습니다.
<style>
/*스타일 선언*/
</style>예제 1
다음 예제는 CSS를 HTML 문서에 내장하여 텍스트와 박스 요소의 스타일을 지정하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
article {
font-size: 1.3em;
font-family: cursive;
}
div {
float: left;
margin-left: 20px;
width: 30px;
height: 30px;
background-color: lightgreen;
box-shadow: 8px 5px 0 2px lightcoral;
}
</style>
</head>
<body>
<article>Demo text</article>
<div></div>
<div></div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제 2
다음 예제는 인접 형제 선택자(div + div)와 내부 그림자(inset)를 활용해 두 개의 박스에 서로 다른 모양의 스타일을 적용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
float: left;
margin-left: 20px;
width: 60px;
height: 30px;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
background-color: lightgreen;
box-shadow: inset 5px 0 lightcoral;
}
div + div {
background-color: lightblue;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
