6. HTML 확장
1. 키워드
- CSS(Cascading Style Sheets)
- 자바스크립트(JavaScript)
- XHTML(EXtensible HTML)
2. HTML과 CSS
1) CSS란?
- CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어이다.
- HTML4 부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해졌다.
- 오늘날 대부분의 웹 브라우저들은 모두 CSS를 지원하고 있다.
2) CSS 적용 방법
- HTML 문서에 CSS 스타일을 적용하는 방법은 다음과 같습니다.
1] 인라인 스타일(Inline Style)
2] 내부 스타일 시트(Internal Style Sheet)
3] 외부 스타일 시트(External Style Sheet)
(1) 인라인 스타일
- 인라인 스타일이란 HTML 요소 내부에
style속성을 사용하여 CSS 스타일을 적용하는 방법이다. - 이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있다.
(2) 내부 스타일 시트
- 내부 스타일 시트를 이용한 방법은 HTML 문서의
<head>태그 내에<style>태그를 사용하여 스타일을 지정한다. - 이러한 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있다.
<style>
body {
background-color: lightyellow;
}
p {
color: red;
text-decoration: underline;
}
</style>
(3) 외부 스타일 시트
- 외부 스타일 시트를 이용한 방법은 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해준다.
- 스타일을 적용할 모든 웹 페이지의
<head>태그 내에<link>태그를 사용하여 외부 스타일 시트를 포함하면 된다.
- 위의 예제에서 사용된 CSS 파일의 내용은 다음과 같다.
3) 스타일 적용의 우선순위
- 위에서 설명한 스타일 적용 방법들이 혼합되어 사용될 경우, 최종적으로 적용되는 스타일은 다음 순서에 따라 결정된다.
1] 인라인 스타일
2] 내부 / 외부 스타일 시트
3] 웹 브라우저 기본 스타일
- 예를 들어 인라인 스타일이 적용된 태그는 내부나 외부 스타일 시트와는 상관없이 무조건 인라인 스타일이 적용된다.
- 또한, 내부 스타일 시트와 외부 스타일 시트는 가장 마지막에 적용된 스타일 시트가 적용된다.
4) CSS 선택자(Selector)
- 스타일을 적용할 HTML 요소를 선택하는데 사용하는 대표적인 선택자는 다음과 같다.
1] HTML 요소 선택자
2] 아이디 선택자
3] 클래스 선택자
(1) HTML 요소 선택자
- CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있다.
(2) 아이디 선택자
- 아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용한다.
- 이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택해 준다.
<style>
#para {
color: teal;
text-decoration: line-through;
}
</style>
...
<p id="para">이 부분에 스타일을 적용합니다.</p>
- HTML과 CSS에서는 하나의 웹 페이지에 속하는 여러 요소에 같은 아이디 이름을 사용해도 별 문제없이 동작한다.
- 하지만 이렇게 중복된 아이디를 가지고 자바스크립트 작업을 하게 되면 오류가 발생한다.
- 따라서 되도록이면 하나의 웹 페이지에 속하는 요소에는 다른 아이디 이름을 사용하거나 클래스를 사용하는 것이 좋다.
(3) 클래스 선택자
- 클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용한다.
- 이러한 특정 집단을 클래스라고 하며, 동일한 클래스 이름을 가지는 요소들을 모두 선택해 준다.
<style>
.paras {
color: lime;
text-decoration: overline;
}
</style>
...
<p class="paras">이 부분에 스타일을 적용합니다.</p>
<p>
클래스 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수
있습니다.
</p>
<p class="paras">이 부분에도 같은 스타일을 적용합니다.</p>
3. HTML과 자바스크립트
1) 자바스크립트란?
- 자바스크립트는 객체 기반의 스크립트 언어이다.
- HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있다.
- 자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있다.
- 현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있다.
2) script 요소
script요소는 해당 웹 페이지에 사용할 스크립트를 정의하기 위해 사용한다.script요소 내부에 직접 스크립트를 작성하거나, 외부 스크립트 파일의 주소를src속성값으로 명시하면 된다.
3) nonscript 요소
noscript요소는 스크립트를 지원하지 않는 웹 브라우저를 사용하는 사용자에게 보여줄 문자열을 설정할 때 사용한다.noscript요소는 일반적인 HTML 문서의body요소 내부에 나올 수 있는 모든 요소를 포함할 수 있다.
<script>
document.getElementById("demo").innerHTML = "자바스크립트를 배워보죠!";
</script>
...
<noscript>당신의 웹 브라우저는 자바스크립트를 지원하지 않습니다!</noscript>
4. HTML과 XHTML
1) XHTML
- XHTML은 HTML과 거의 비슷하지만, 문법의 적용이 조금 더 엄격한 특징을 가지고 있다.
2) 좀 더 엄격한 버전인 XHTML을 사용하는 경우
- 오늘날 웹 콘텐츠는 기존의 PC 위주의 환경에서 벗어나 여러 다양한 플랫폼에서 더욱 많이 이용되고 있다.
- 따라서 부정확한 HTML 문법을 지원하는 데 필요한 자원이 부족한 환경이 점차 생겨나기 시작한다.
- XHTML 문서는 하나의 XML 문서로서 문법적으로 정확하므로, 표준 XML 라이브러리를 이용한 자동화된 처리가 가능해진다.