인라인 방식
절대 권장사항이 아님!!!!
-
바로 스타일 적용이 확인 되기 때문에 테스트 용도 또는 웹메일을 전송할 때만 사용해야하고 그 외에는 절대 사용하지 말 것
-
인라인 방식 예시
<p style=“color: #FF0000;”>안녕하세요</p> -
태그에 직접 스타일을 적용하기 때문에 바로 확인이 가능
-
웹 표준 이전 방식과 별 차이가 없음
-
많은 페이지가 있는 사이트는 수정자체가 불가능
h3 인터넷의 역사 를 파란색(#0000FF) 로 변경하세요(인라인 스타일 방식)
<h3 style="color:#0000FF;">인터넷의 역사</h3>
h2 제목을 빨간색(#FF0000)으로 변경하세요(인라인 스타일 방식)
<h2 style="color:#FF0000;">1. 정의</h2>내부 스타일시트 방식
- 태그에 직접 스타일을 지정하지 않고
<head>와 </head>사이에 스타일을 지정하는 방식 (보통 title 태그 아래)
- HTML 문서 내부에 따로 스타일을 지정
- 내부 스타일시트 방식 예시
<style>
p { color: #ddddd; }
</style> 단점: CSS 코드가 길어지면 관리하기가 힘들어 진다.
h2 제목을 파란색(#0000FF)으로 변경하세요(내부 스타일시트 방식)
항목(li) 모두를 빨간색(#FF0000)으로 변경하세요(내부 스타일시트 방식)
<style>
h2 { color:#0000FF; }
h3 { color:#7030A0}
li { color:#FF0000; }
</style><h2>1. 정의</h2>
<ul>
<li>
인터넷은 사람들의 '선한 측면'과 '작은 노력'을 컨텐츠로 집약하여 요약을 보여줄 가능성이
있는 기술이다.
</li>
<li>
인터넷은 지금까지는 사회의 소수 계층에게만 가능했던 행동(표현, 사회 공헌 등)과 전시를
모든 사람에게 개방하는 기술이다.
</li>
<li>
인터넷은 올바른 정보활용을 통해 개인의 고유한 특성(개성, 지향성)을 발견해 내고
증폭시키는 데에 매우 유효적절한 기술이다.
</li>
</ul>외부스타일 시트 방식
- 사이트 관리가 쉽기 때문에 권고하는 방식
- 확장자가 .css 파일에 CSS스타일을 만들어 외부 파일로 저장하고 HTML에
@import, 또는 link를 통해 스타일을 불러 오는 방식 - 임베디드 방식과 마찬가지로
<head> 와 \</head>사이에 특정 CSS 파일을 불러오도록 지정한다.
link 형식
<link rel="stylesheet" href="main.css">@import 방식
<style>
@import url(main.css)
</style>
CSS 주석
다른 프로그래밍 언어와 마찬가지로 주석을 사용할 수 있다
/* 주석 입니다. *//*
주석 입니다.
주석 입니다.
주석 입니다.
주석 입니다.
*/