HTML 책 보면서 정리하는 -
◈ 뉴서울(NewSeoul) HTML 5 강좌 2◈
- 노트입니다. ~~~
HTML의 기본 개념
※ 엘리먼트 (Element)
형태
우리는 <code>HTML</code>을 이용하여 웹 문서를 작성한다.
위는 <code></code> 태그로 HTML이라는 텍스트를 마크업한 것이다.
'<code>HTML</code>' 부분이 하나의 엘리먼트다. 'code 엘리먼트'라고 부르면 된다.
<code>는 시작태그, </code>는 종료태그, 'HTML'은 엘리먼트의 컨텐츠다.
code 엘리먼트는 브라우저 상에서 고정폭(fixed-width) 글꼴로 출력된다.
주의) 브라우저에서 고정폭 글꼴로 보여지도록 엘리먼트를 사용하는 것이 아니다. 비록 일부 엘리먼트들이 특정한 모양으로 출력되는 특성이 있지만, 엘리먼트의 역할은 기계가 컨텐츠의 내용을 파악할 수 있도록 하는 것임을 잊으면 안된다. 모양을 조정할 목적이라면 CSS를 사용해야 한다.
컨텐츠없이 태그만 작성해도 유효하며 그런 경우는 의미를 명확하게 하기 위해 단일태그를 사용한다. 예를들어 다음과 같이 작성하면 비어있는 code 엘리먼트를 의미한다.
예) 우리는 <code/> HTML을 이용하여 웹 문서를 작성한다.
※ void 엘리먼트
엘리먼트들 중에는 일부러 내용을 비운게 아니라, 애초에 내용이 없는 void 엘리먼트들이 있다. 이들은 반드시 싱글태그로만 사용해야 한다. 그룹핑 엘리먼트 중 하나인 hr 엘리먼트는 void 엘리먼트로서 시작태그, 또는 종료태그 하나로만 작성한다.
예) <hr> 또는 <hr/>
종류
엘리먼트 이름은 대소문자를 구별하지 않는다.
엘리먼트의 속성
시작태그나 단일태그에 엘리먼트의 속성을 추가할 수 있다.
우리는 <a href="newseoul.tistory.com">HTML</a>을 이용하여 웹 문서를 작성한다.
href 속성이름
"..." 속성값
※ 속성값에 ""를 써도 되고 ''를 써도 된다.
※ 여러 속성을 작성할 때 순서는 상관없다.
※ 특정 엘리먼트에만 사용할 수 있는 지역속성도 있고 모든 엘리먼트에 사용할 수 있는 전역속성도 있다.
(class나 id 같은 것들이 전역속성이다)
※ 부울값을 갖는 속성은 속성값 없이 속성 이름만 적어도 된다.
예) 아래는 입력 차단. 모두 같은 결과. 속성에 값을 입력하면 true처럼 동작한다.
이름을 입력하세요: <input disabled>
이름을 입력하세요: <input disabled="true">
이름을 입력하세요: <input disabled="">
이름을 입력하세요: <input disabled="disabled">
※ 사용자 속성 (Custom Attributes)
data- 라는 접두사를 붙임으로써 사용자 속성을 만들 수 있다.
예) 이름을 입력하세요: <input disabled="true" data-creator="adam" data-purpose="collection">
엘리먼트의 전역 속성들
lang
accesskey, tabindex, title
style , class, id
contenteditable, spellcheck, hidden, dir, draggable, dropzone
contextmenu
lang
엘리먼트 컨텐츠의 언어를 명시한다.
(나라별 설정이 적용되도록 할 때 사용?)
예)
<p lang="en"> Hello </p>
<p lang="fr"> Bonjour </p>
<p lang="ko"> 안녕 </p>
accesskey
키보드 단축키로 특정 엘리먼트를 선택할 수 있게 해준다.
예) Alt+n 키로 입력란을 선택할 수 있다
<body>
<form>
Name: <input type="text" name="name" accesskey="n" />
<p/>
<p/>
...
</form>
</body>
tabindex
Tab 키에 의한 포커싱 순서를 조정한다. (1~)
title
마우스 오버 때 팝업 설명으로 표시된다.
예)
<a href="..." title="세부정보입니다"> 세부 정보 보기 </a>
style
CSS를 정의한다.
예)
<a href="..." style="background: gray; color:white; padding:10px">
class
문서에 작성되어 있는 엘리먼트들을 클래스별로 분류해주는 역할을 한다.
엘리먼트가 복수의 클래스에 속하게 만들고 싶다면, 공백을 이용해 클래스명들을 나열하면 된다.
클래스는 사용자 임의대로 만들수 있고 각 클래스 별로 스타일을 적용할 수 있다.
예)
<a class="myclass1 myclass3" href="...">...</a>
※ 스타일의 적용은 JS를 이용해서 할 수도 있다.
<script type="text/javascript">
var elems = document.getElementsByClassName("class3");
for (i=0; i<elems.length; i++)
{
var x = elems[i];
x.style.border = "thin solid black";
x.style.color = "green";
}
</script>
id
엘리먼트에 유일 식별자를 부여한다.
보통 특정 엘리먼트에만 스타일을 적용하거나, JS에서 특정 엘리먼트 선택용으로 사용한다.
예)
<style>
#w3clink {
background: yellow;
color: red;
padding: 5px;
border: thin solid blue;
}
</style>
<body>
<a id="w3clink" href="http://w3c.org"> W3C </a>
</body>
예) 엘리먼트 접근 (test.html 문서에서 id가 myelement인 엘리먼트에 접근)
test.html#myelement
contenteditable
브라우저 상에서 클라이언트가 컨텐츠를 수정할 수 있게 해준다. (HTML5)
예)
나는 지금 <p contenteditable="true">바나나</p>를 먹고 싶어요!
spellcheck
철자를 체크한다.
(사용자가 편집할 수 있는 엘리먼트에 적용될 때에 유용)
hidden (boolean)
적절하지 않음을 표현할 때 사용하며 화면에 표시되지 않는다.
(브라우저가 렌더링을 하지 않는다)
예)
<script>
var toggleHidden = function() {
var elem = document.getElementById("toggle");
if (elem.hasAttribute("hidden")) {
elem.removeAttribute("hidden");
} else {
elem.setAttribute("hidden", "hidden");
}
}
</script>
<body>
<button onclick = "toggleHidden()">숨기기</button>
...
<p id="toggle hidden"> 컨텐츠 </p>
</body>
dir
텍스트 정렬을 명시한다.
ltr : 좌측정렬
rtl : 우측정렬
draggable, dropzone (HTML5)
drag & drop을 가능케 한다.
contextmenu
엘리먼트에 컨텍스트 메뉴를 정의할 수 있게 해준다.
HTML 문서의 구조
<!DOCTYPE HTML>
DOCTYPE 엘리먼트. HTML이라는 부울 속성 사용.
브라우저에게 컨텐츠가 HTML임을 알림.
DOCTYPE에 HTML임을 굳이 밝히는 이유 : 초창기에 HTML 외에도 여러 마크업 언어들이 난무했었기 때문이다.
<html>
<head>
...메타데이터...
문서에 대한 정보를 브라우저에 알려주며 head 엘리먼트 안에 작성한다.
예를 들어, title 엘리먼트는 제목을 나타내는 메타데이터이다.
<title> 제목 </title>
</head>
<body>
... HTML 문서의 본문 ...
우리는 <code>HTML</code>을 이용하여 웹 문서를 작성한다.
...
</body>
</html>
※ 커멘트 (메모)
<!-- ...설명... -->
개발자의 메모. 이 설명부분은 브라우저가 해독하지 않고 건너뛴다.
HTML 독립체
브라우저가 HTML로 해석하지 않는 특수 부호를 표시한다.
'프로그래밍' 카테고리의 다른 글
| (웹 최적화) 검색 로봇을 위한 웹페이지 최적화란? (0) | 2018.11.29 |
|---|---|
| (프로그래밍 강좌) HTML 5 강좌3 (0) | 2018.08.14 |
| (프로그래밍 강좌) HTML 5 강좌1 (0) | 2018.06.21 |
| (C#.NET 한글 프로그램 제작) 한글 조립 및 분해 하기 (유니코드 Unicode) (2) | 2018.06.14 |
| (웹 프로그래밍 팁) 젤로 몰드 (Jello Mold) 브라우저 페이지 폭 자동 조절 기법 (0) | 2018.06.13 |