반응형
CSS(Cascading Style Sheets)란?
- CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는데 사용되는 스타일 시트 언어로, HTML4 부터는 이런 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해졌다.
HTML문서에 CSS 스타일 적용 방법
- 인라인 스타일(Inline style): style 속성을 사용하여 CSS 스타일을 적용하는 방법으로, 해당 요소에만 스타일을 적용할 수 있다.
<p style="color:green; text-decoration:underline">
인라인 스타일을 이용하여 스타일을 적용하였습니다.
</p>- 내부 스타일 시트(Internal style sheet): <head>내 <style>태그를 사용하여 CSS 스타일을 지정하는 방법으로, 해당 문서에만 스타일을 적용할 수 있다.
<style>
body { background-color: lightyellow; }
p { color: red; text-decoration: underline; }
</style>- 외부 스타일 시트(External style sheet): 웹 사이트 전체의 스타일을 하나의 외부 파일에서 변경할 수 있는 방법으로, 스타일을 적용할 페이지의 <head> 내 <link>태그를 사용하여 외부 스타일 시트를 불러오면 된다.
<link rel="stylesheet" href="/examples/media/expand_style.css"><!-- 외부의 시트 expand_style.css -->
body { background-color: lightyellow; }
p { color: red; text-decoration: underline; }CSS 스타일 적용 우선순위
- 스타일 적용 방법들이 혼합될 경우 ① 인라인 스타일, ② 내외부 스타일 시트 ③ 웹 브라우저 기본 스타일순으로 우선순위가 결정된다.
- 내부 스타일 시트와 외부 스타일 시트는 가장 마지막에 적용된 스타일 시트가 적용된다.
CSS 선택자(selector)
- 스타일을 적용할 대상을 선택하기 위해 선택자(selector)를 사용한다.
- HTML 요소 선택자: CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택한다.
p { color: red; font-size: 14px; }- 아이디(id) 선택자: CSS를 적용할 대상으로 요소의 아이디 이름을 #과 함께 사용한다. 하나의 웹 페이지 내 여러 요소에 같은 아이디 이름을 사용해도 HTML과 CSS에서는 별 문제없이 동작하지만 Javascript에서는 오류가 발생하므로 주의가 필요하다.
<style>
#para { color: teal; text-decoration: line-through; }
</style>
<p id="para">이 부분에 스타일을 적용합니다.</p>- 클래스(class) 선택자: CSS를 적용할 대상으로 요소의 클래스 이름을 .과 함께 사용한다. 특정 집단의 여러 요소를 한 번에 선택할 때 사용하며 동일한 클래스 이름을 가지는 요소들을 모두 선택해준다.
<style>
.paras { color: lime; text-decoration: overline; }
</style>
<p class="paras">이 부분에 스타일을 적용합니다.</p>
<p>클래스 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수 있습니다.</p>
<p class="paras">이 부분에도 같은 스타일을 적용합니다.</p>
자바스크립트(JavaScript)란?
- 자바스크립트는 객체(object) 기반의 스크립트 언어로, 주로 웹 브라우저에서 사용되나 Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있다.
- HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있다.
script 요소
- script 요소는 해당 웹 페이지에 사용할 스크립트를 정의하기 위해 사용한다.
- script 요소 내부에 직접 스크립트를 작성하거나, 외부 스크립트 파일의 주소를 src 속성값으로 명시하면 된다.
noscript 요소
- noscript 요소는 스크립트를 지원하지 않는 웹 브라우저를 사용하는 사용자에게 보여줄 문자열을 설정할 때 사용한다.
- noscript 요소는 일반적인 HTML 문서의 body 요소 내부에 나올 수 있는 모든 요소를 포함할 수 있다.
<script>
document.getElementById("demo").innerHTML = "자바스크립트를 배워보죠!";
</script>
<noscript>당신의 웹 브라우저는 자바스크립트를 지원하지 않습니다!</noscript>
XHTML(EXtensible HTML)란?
- XHTML은 HTML과 거의 비슷하지만, 문법의 적용이 조금 더 엄격하 다.
- 부정확한 HTML 문법 대신 XHTML 문서는 하나의 XML 문서로서 문법적으로 정확하므로, 표준 XML 라이브러리를 이용한 자동화된 처리가 가능해진다.
HTML과 XHTML의 차이점
- 종료 태그가 없는 빈 태그는 반드시 끝에 공백과 함께 슬래시 / 를 붙여야 한다.
HTML : <hr>
XHTML : <hr />- 비어있지 않은 요소는 반드시 종료 태그를 가져야 합니다.
HTML : <p>첫 번째 문장</p><p>두 번째 문장
XHTML : <p>첫 번째 문장</p><p>두 번째 문장</p>- 요소들은 반드시 열린 순서대로 닫혀야 한다.
HTML : <em><p>This is some text.</em></p>
XHTML : <em><p>This is some text.</p></em>- <img> 태그에는 반드시 alt 속성이 기술되어야 합니다.
HTML : <img src="alternative.png" />
XHTML : <img src="alternative.png" alt="explanation" />- 모든 텍스트(text)는 반드시 태그로 감싸야 합니다.
HTML : <body>본문에 사용되는 텍스트 단락</body>
XHTML : <body><p>본문에 사용되는 텍스트 단락</p></body>- 속성값은 반드시 따옴표로 감싸야 한다.
HTML : <td rowspan=3>
XHTML : <td rowspan="3">- 태그 이름이나 속성 이름에는 반드시 소문자만을 사용해야 한다.
HTML : <BODY><P>태그 이름과 태그 속성은</P></BODY>
XHTML : <body><p>반드시 소문자만을 사용하자.</p></body>- 속성값 생략이 없어졌으므로, 반드시 속성값을 명시해야 한다.
HTML : <textarea readonly>읽기만 가능합니다.</textarea>
XHTML : <textarea readonly="readonly">읽기만 가능합니다.</textarea>
HTML 문서를 XHTML 문서로 변환하는 방법
- 첫줄에 아래 코드를 추가한다.
- xmlns 속성을 추가한다.
- 모든 태그 이름을 소문자로 바꿔준다.
- 모든 빈 태그를 닫아준다.
- 모든 속성 이름을 소문자로 바꿔준다.
- 모든 속성값을 따옴표로 둘러싼다.
<!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">
Reference
반응형
'Language > Html' 카테고리의 다른 글
| HTML 핵심 개념 문법 한 장 정리 - 링크, 텍스트, 리스트, 폼, 멀티미디어 (0) | 2023.10.03 |
|---|---|
| [Html] 공간 분할 방법 - 아이프레임, 프레임셋 (0) | 2023.06.19 |
| [Html] 공간 분할 방법 - 블록/인라인 (0) | 2023.06.19 |
| [Html] 그래픽 요소 - Canvas와 SVG (0) | 2023.06.19 |
| [Html] 멀티미디어 비디오 - 썸네일, 자막 (0) | 2023.06.19 |