CSS 스타일 시트 (CSS) 이해하기
페이지 정보
조회 2회 작성일 26-02-25 22:17
본문
스타일 시트 (CSS) 이해하기
스타일 시트
브라우저 기본 스타일
브라우저에서 기본으로 적용하는 스타일
웹 문서에서 아무 스타일도 적용하지 않고 HTML만 사용해도 그 기능에 따라 크기에 맞게 보여줌
<h1>제목 (기본적으로 크고 굵게 표시됨)</h1>
<p>본문 (기본 글꼴과 크기로 표시됨)</p>
인라인 스타일
스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시
스타일을 적용하고 싶은 태그에 style 속성을 사용해 style="속성: 속성 값;" 형태로 스타일 적용
<p style="color: blue; font-size: 20px;">이 글자는 파란색입니다.</p>
내부 스타일 시트
웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것
모든 스타일 정보는 <head> 태그와 </head> 태그 안에서 정의
<style> 태그와 </style> 태그 사이에 작성
<head>
<style>
p {
color: green;
}
</style>
</head>
<body>
<p>이 문서의 모든 문단은 초록색이 됩니다.</p>
</body>
외부 스타일 시트
여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용
<style> 태그 없이 <link> 태그만 사용해 미리 만들어 놓은 외부 스타일 시트 파일 연결
CSS
/* 외부 파일 내용 */
div { background-color: yellow; padding: 10px; }
HTML
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>이 박스는 노란색 배경을 가집니다.</div>
</body>
- 이전글HTML5 란 무엇인가? 26.02.25
- 다음글스타일 형식 알아보기 26.02.25