[CSS] Style 적용
1. 인라인 스타일 (Inline Style)
태그 안에 직접 지정하여 사용. HTML과 섞어 사용
<p style='background-color:#fff; color:#000'>테스트</p>- 태그에 직접 스타일을 지정
- 인라인 스타일을 많이 작성할 경우 유지보수 어려움, 가급적 사용 자제
2. 내부 스타일 시트 (Internal Style Sheet)
HTML 파일 안에 별도 영역으로 스타일 사용
일반적으로, <head> ... <head> 안에 <style>을 사용
...
<head>
<style>
h1 {
font-family: '고딕', serif;
font-size: 10px;
}
</style>
</head>
...- HTML 문서 하나가 고유한 CSS 스타일을 가진다고 생각이 될 때 사용
- <style> 태그를 사용하여 지정
- HTML 페이지 안에 위치하므로 영향을 주는 범위는 페이지 안의 전체 태그
- 다른 HTML페이지에서 똑같은 내용으로 사용하고 싶다면 복사하여 사용
3. 외부 스타일 시트 (External Style Sheet)
css 파일을 만들어 해당 HTML 파일에서 불러오는 방식
index.html
...
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>테스트1</h1>
<h2>테스트2</h2>
</body>
...style.css
h1 {
font-size: 10px;
color: red;
}
h2 {
font-size: 14px;
color: blue;
}- 하나의 스타일로 여러 개의 HTML 페이지에 적용하고자 할 때 사용
- 유지보수 용이
- 각각의 HTML 페이지 문서는 <head>...<head> 안에 <link> 태그를 사용하여 스타일 파일과 연결
스타일 파일의 확장자는 .css
Author And Source
이 문제에 관하여([CSS] Style 적용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@heemaeng/CSS-Style-적용저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
