HTML
CSS와 함께 HTML 사용하기
수색…
소개
CSS 는 페이지의 HTML 요소에 스타일을 제공합니다. 인라인 스타일은 태그에서 스타일 속성을 사용하는 것을 포함하며 권장하지 않습니다. 내부 스타일 시트는 <style>
태그를 사용하며 페이지의 지정 부분에 대한 규칙을 선언하는 데 사용됩니다. 외부 스타일 시트는 CSS의 외부 파일을 취하여 문서에 규칙을 적용하는 <link>
태그를 통해 사용될 수 있습니다. 이 주제에서는 세 가지 첨부 메소드 사용에 대해 다룹니다.
통사론
-
<link rel="stylesheet" type="text/css" href="stylesheet.css">
-
<style></style>
외부 스타일 시트 사용
문서 head
에 link
속성을 사용하십시오.
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
웹 사이트에서 제공하는 스타일 시트를 콘텐츠 전달 네트워크 또는 CDN을 통해 사용할 수도 있습니다. (예 : 부트 스트랩) :
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
일반적으로 웹 사이트에서 프레임 워크에 대한 CDN 지원을 찾을 수 있습니다.
내부 스타일 시트
<style>
태그를 사용하여 내부적으로 CSS 요소를 포함 할 수도 있습니다.
<head>
<style type="text/css">
body {
background-color: gray;
}
</style>
</head>
여러 개의 내부 스타일 시트가 프로그램에도 포함될 수 있습니다.
<head>
<style type="text/css">
body {
background-color: gray;
}
</style>
<style type="text/css">
p {
background-color: blue;
}
</style>
</head>
인라인 스타일
style
속성을 사용하여 특정 요소의 스타일을 지정할 수 있습니다.
<span style="color: red">This text will appear in red.</span>
참고 : CSS를 사용하면 콘텐츠를 프레젠테이션과 분리하는 것이 좋습니다.
여러 스타일 시트
여러 스타일 시트를로드 할 수 있습니다.
<head>
<link rel="stylesheet" type="text/css" href="general.css">
<link rel="stylesheet" type="text/css" href="specific.css">
</head>
이후의 파일과 선언은 이전 파일과 선언을 덮어 씁니다 . 따라서 general.css
에 다음 내용이 포함되어있는 경우
body {
background-color: red;
}
specific.css
에는 다음이 포함됩니다.
body {
background-color: blue;
}
둘 다 사용하면 문서의 배경이 파란색으로 표시됩니다.
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow