[Project H4C] 6. HTML 확장
- CSS란?
Cascading Style Sheets의 약자.
연속된 스타일 시트... 뭐 대충 이런 뜻 같다.
오늘날 대부분의 웹 브라우저들이 CSS를 지원하고 있다.
CSS 적용 방법은 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트가 있다.
- 인라인 스타일
HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법
인라인 스타일은 해당 요소에만 스타일을 적용할 수 있다.
e.g.)
<p style="color:green; text-decoration:underline">
인라인 스타일
</p>
- 내부 스타일 시트
HTML 문서의 <head>태그 내에 <style>태그를 사용하여 스타일을 지정.
내부 스타일 시트는 해당 HTML문서에만 스타일을 적용할 수 있다.
e.g.)
<style>
body { background-color: lightyellow; }
p { color: red; text-decoration: underline; }
</style>
- 외부 스타일 시트
웹 사이트 전체의 스타일을 하나의 파일에서 변경하는 방법
스타일을 적용할 모든 웹 페이지의 <head>태그 내에 <link>태그를 사용하여 외부 스타일 시트를 포함한다.
e.g.)
<link rel="stylesheet" href="/examples/media/expand_style.css">
- 스타일 적용 우선 순위
1. 인라인 스타일
2. 내부 / 외부 스타일 시트
3. 웹 브라우저 기본 스타일
- CSS 선택자(selector)
스타일을 적용할 HTML 요소를 선택하는데 사용하는 대표적인 선택자는 다음과 같다.
1. HTML 요소 선택자
2. 아이디(id) 선택자
3. 클래스(class) 선택자
- HTML 요소 선택자
CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있다.
e.g.) p { color: red; font-size: 14px; }
- 아이디 선택자
CSS를 적용할 대상으로 특정 요소를 선택할 때 사용
웹 페이지에 포함된 여러 요소 중 특정 아이디 이름을 가지는 요소만을 선택해준다.
e.g.)
<style>
#para { color: teal; text-decoration: line-through; }
</style>
...
<p id="para">이 부분에 스타일을 적용</p>
but, 하나의 웹 페이지에 속하는 요소에는 다른 아이디 이름을 사용하거나 클래스 사용을 추천.
- 클래스 선택자
특정 집단의 여러 요소를 한 번에 선택할 때 사용
이러한 특정 집단을 클래스라고 하며, 동일한 클래스 이름을 가지는 요소들을 모두 선택해준다.
e.g.)
<style>
.paras { color: lime; text-decoration: overline; }
</style>
...
<p class="paras">이 부분에 적용</p>
<p>클래스 선택자로 스타일을 적용할 HTML 요소들을 한 번에 선택할 수 있다</p>
<p class="paras">이 부분에도 역시 적용</p>
- 자바스크립트
object(객체) 기반의 스크립트 언어.
HTML로 웹의 내용을 작성하고, CSS로 웹을 디자인 하고, 자바스크립트로 웹의 동작을 구현할 수 있다.
- script 요소
script 요소는 해당 웹 페이지에 사용할 스크립트를 정의하기 위해 사용한다.
script 요소 내부에 직접 스크립트를 작성하거나 외부 스크립트 파일의 주소를 scr 속성값으로 명시한다.
e.g.)
<script>
document.getElementByld("demo").innerHTML = "자바스크립트를 배워보죠!";
</script>
- noscript 요소
noscript 요소는 스크립트를 지원하지 않는 웹 브라우저를 사용하는 사용자에게 보여줄 문자열을 설정할 때 사용함.
noscript 요소는 일반적인 HTML 문서의 body 요소 내부에 나올 수 있는 모든 요소를 포함할 수 있다.
- XHTML
HTML과 비교했을 때의 XHTML 특징
- XHTML DOCTYPE을 반드시 명시해야 한다.
- <html>태그의 xmlns 속성을 반드시 명시해야 한다.
- <html>, <head>, <title>, <body> 태그를 반드시 사용해야 한다.
- 모든 태그는 반드시 닫혀야 한다.
- 모든 태그는 순서대로 닫혀야 한다.
- 모든 요소는 소문자로 작성되어야 한다.
- XHTML 문서는 반드시 하나의 root 요소를 포함해야 한다.
- 속성 이름은 반드시 소문자로 사용되어야 한다.
- 속성값은 반드시 따옴표로 감싸야 한다.
- 속성값 생략이 없어졌기 때문에 반드시 속성값을 명시해야 한다.
- 종료 태그가 없는 빈 태그는 반드시 공백과 함께 슬래시를 붙인다(e.g. <hr />)
- 비어있지 않은 요소는 반드시 종료 태그를 가져야 한다.
- 요소들은 반드시 열린 순서대로 닫혀야 한다.
- <img>태그는 반드시 alt 속성이 기술되어야 한다.
- 모든 텍스트는 반드시 태그로 감싸야 한다.
- 속성값은 반드시 따옴표로 감싸야 한다.
- HTML 문서를 XHTML 문서로 변환하는 방법
1. 첫줄에 다음 코드를 추가한다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
2. xmlns 속성을 추가한다.
3. 모든 태그 이름을 소문자로 바꾼다.
4. 모든 빈 태그를 닫아준다.
5. 모든 속성 이름을 소문자로 바꿔준다.
6. 모든 속성값을 따옴표로 둘러 싼다.
'1. HTML' 카테고리의 다른 글
| [Project H4C] 8. HTML5 요소 (1) (0) | 2020.07.11 |
|---|---|
| [Project H4C] 7. HTML5 시작 (0) | 2020.07.11 |
| [Project H4C] 5. HTML 입력 양식 (0) | 2020.07.10 |
| [Project H4C] 4. HTML 공간 분할 (0) | 2020.07.10 |
| [Project H4C] 3. HTML 기본 요소 (0) | 2020.07.10 |