kaki1013
6. HTML 확장 본문
→ 오늘날 대부분의 웹 브라우저들은 모두 CSS를 지원함
→ 해당 요소에만 스타일을 적용
<p style="color:green; text-decoration:underline">
인라인 스타일을 이용하여 스타일을 적용하였습니다.
</p>→ 해당 HTML 문서에만 스타일을 적용 가능
<style>
body { background-color: lightyellow; }
p { color: red; text-decoration: underline; }
</style><link rel="stylesheet" href="/examples/media/expand_style.css">/* expand_style.css */
body { background-color: lightyellow; }
p { color: red; text-decoration: underline; }→ 인라인 스타일이 적용된 태그 : 내부나 외부 스타일 시트와는 상관없이 무조건 인라인 스타일이 적용
→ 내부 스타일 시트와 외부 스타일 시트는 가장 마지막에 적용된 스타일 시트가 적용
4. CSS 선택자(selector)
스타일을 적용할 HTML 요소를 선택하는데 사용하는 대표적인 선택자
(1) HTML 요소 선택자
: CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택
p { color: red; font-size: 14px; }
(2) 아이디(id) 선택자
: CSS를 적용할 대상으로 특정 요소를 선택할 때 사용
→ 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택
<style>
#para { color: teal; text-decoration: line-through; }
</style>
...
<p id="para">이 부분에 스타일을 적용합니다.</p>하나의 웹 페이지에 속하는 여러 요소에 같은 아이디 이름을 사용할 때
→ HTML과 CSS에서는 별 문제없이 동작 but 중복된 아이디를 가지고 자바스크립트 작업을 하면 오류가 발생
→ 되도록이면 하나의 웹 페이지에 속하는 요소에는 다른 아이디 이름을 사용하거나 클래스를 사용
(3) 클래스(class) 선택자
: 특정 집단의 여러 요소를 한 번에 선택할 때 사용
→ 이러한 특정 집단을 클래스(class)라고 하며, 동일한 클래스 이름을 가지는 요소들을 모두 선택함
<style>
.paras { color: lime; text-decoration: overline; }
</style>
...
<p class="paras">이 부분에 스타일을 적용합니다.</p>
<p>클래스 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수 있습니다.</p>
<p class="paras">이 부분에도 같은 스타일을 적용합니다.</p>
# HTML과 자바스크립트
1. 자바스크립트란?
자바스크립트(JavaScript) : 객체(object) 기반의 스크립트 언어
→ HTML = 웹의 내용을 작성, CSS = 웹을 디자인, 자바스크립트 = 웹의 동작을 구현
→ 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용 가능
→ 현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있음
2. script 요소
해당 웹 페이지에 사용할 스크립트(script)를 정의하기 위해 사용
→ script 요소 내부에 직접 스크립트를 작성하거나, 외부 스크립트 파일의 주소를 src 속성값으로 명시
<script>
document.getElementById("demo").innerHTML = "자바스크립트를 배워보죠!";
</script>
3. noscript 요소
스크립트를 지원하지 않는 웹 브라우저를 사용하는 사용자에게 보여줄 문자열을 설정할 때 사용
→ noscript 요소는 일반적인 HTML 문서의 body 요소 내부에 나올 수 있는 모든 요소를 포함 가능
<script>
document.getElementById("demo").innerHTML = "자바스크립트를 배워보죠!";
</script>
...
<noscript>당신의 웹 브라우저는 자바스크립트를 지원하지 않습니다!</noscript>
# HTML과 XHTML
1. XHTML(EXtensible HTML)
: HTML과 거의 비슷하지만, 문법의 적용이 조금 더 엄격
2. 좀 더 엄격한 버전인 XHTML을 사용하는 이유
: 오늘날 웹 콘텐츠는 기존의 PC 위주의 환경에서 벗어나 여러 다양한 플랫폼에서 더욱 많이 이용
→ 부정확한 HTML 문법을 지원하는 데 필요한 자원이 부족한 환경이 점차 생겨나기 시작
→ XHTML 문서는 하나의 XML 문서로서 문법적으로 정확
→ 표준 XML 라이브러리를 이용한 자동화된 처리가 가능해짐
3. XHTML에서의 변경 사항
(1) 문서의 구조적 측면
- XHTML DOCTYPE을 반드시 명시
- <html>태그의 xmlns 속성을 반드시 명시
- <html>, <head>, <title>, <body>태그를 반드시 사용
(2) 문서의 요소적 측면
- 모든 태그는 반드시 닫혀야 함
- 모든 태그는 순서대로 닫혀야 함
- 모든 요소는 반드시 소문자로 사용
- XHTML 문서는 반드시 하나의 root 요소를 포함
(3) 문서의 속성적 측면
- 속성 이름은 반드시 소문자로 사용
- 속성값은 반드시 따옴표로 감싸야 함
- 속성값 생략이 없어졌기 때문에 반드시 속성값을 명시
4. HTML과 XHTML의 차이점
(1) 종료 태그가 없는 빈 태그(empty tag)는 반드시 끝에 공백과 함께 슬래시(/)를 붙임
HTML : <hr>
XHTML : <hr />
(2) 비어있지 않은 요소는 반드시 종료 태그를 가짐
HTML : <p>첫 번째 문장</p><p>두 번째 문장
XHTML : <p>첫 번째 문장</p><p>두 번째 문장</p>
(3) 요소들은 반드시 열린 순서대로 닫힘
HTML : <em><p>This is some text.</em></p>
XHTML : <em><p>This is some text.</p></em>
(4) <img>태그에는 반드시 alt 속성이 기술되어야 함
HTML : <img src="alternative.png" />
XHTML : <img src="alternative.png" alt="explanation" />
(5) 모든 텍스트(text)는 반드시 태그로 감싸야 함
HTML : <body>본문에 사용되는 텍스트 단락</body>
XHTML : <body><p>본문에 사용되는 텍스트 단락</p></body>
(6) 속성값은 반드시 따옴표로 감싸야 함
HTML : <td rowspan=3>
XHTML : <td rowspan="3">
(7) 태그 이름이나 속성 이름에는 반드시 소문자만을 사용
HTML : <BODY><P>태그 이름과 태그 속성은</P></BODY>
XHTML : <body><p>반드시 소문자만을 사용하자.</p></body>
(8) 속성값 생략이 없어졌으므로, 반드시 속성값을 명시
HTML : <textarea readonly>읽기만 가능합니다.</textarea>
XHTML : <textarea readonly="readonly">읽기만 가능합니다.</textarea>
5. 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) 모든 속성값을 따옴표로 둘러싸기
'버그바운티 스터디 > HTML' 카테고리의 다른 글
| 7. HTML5 시작 (0) | 2023.07.06 |
|---|---|
| 5. HTML 입력 양식 (0) | 2023.07.06 |
| 4. HTML 공간 분할 (0) | 2023.07.06 |
| 3. HTML 기본 요소 (0) | 2023.07.05 |
| 2. HTML 텍스트 요소 (0) | 2023.07.05 |
