melius
[HTML] HTML 요소 본문
HTML/CSS는 대/소문자 구분이 없으나, 소문자만 사용한다.
HTML/CSS 설계시,
각 HTML 요소(Element)의 배치를 확인하기 위해서 테두리를 표시하는 것이 유용하다.
모든 요소 마진, 패딩 초기화도 함께 적용한다.
* { border: 1px solid red; margin: 0; padding: 0; }
HTML 요소는 크게 블록레벨(Block-level) 요소와 인라인(Inline) 요소로 구분된다.
1. Block-level Element
hn, p, hr, blockquote, pre
... 블록레벨 요소를 자식으로 가질 수 없다.
th, td
... margin이 없고, padding만 있다.
tr
... border와 background-color가 없고, height만 있다.
2. Inline Element
b, strong, i, em, q, span
... width, height은 없지만 padding, margin은 있다.
img, input
... width, height가 있다.
input
1) input 태그의 name 속성값은 데이터명, value 속성값은 데이터값으로 서버에 전달된다.
2) input 태그의 name 속성은 form 태그 안에서만 동작한다. (JavaScript에서도 인식)
3) id 속성값은 JavaScript에서 변수명으로 바로 접근할 수 있다.
4) 라디오 버튼(type="radio")의 name 속성값이 같으면 같은 그룹으로 인식한다.
5) input 태그의 주요 type 속성값: hidden, submit, reset
button
1) <input type="button">은 종료 태그가 없고, 버튼의 제목을 value 속성값에 넣는다.
2) <button>은 종료태그가 있어서 버튼의 제목을 시작 태그와 종료 태그사이에 넣는다.
3. Semantic Element
해당 요소가 가지고 있는 콘텐츠의 의미를 브라우저와 개발자에게 전달
(기능적으로는 div 태그와 같으나, 검색엔진이 문서구조 파악을 위해서 사용됨)
https://www.w3schools.com/html/html5_semantic_elements.asp
<body>
<header>
<nav></nav>
</header>
<section>
<article></article>
<article></article>
</section>
<aside></aside>
<footer>
<address></address>
</footer>
</body>Semantic Tag를 인식하지 못하는 구형 브라우저는 자신이 인식하지 못하는 태그를 인라인 태그로 취급한다.
아래와 같이 태그를 블록레벨로 변경처리한다.
header, nav, section, article, footer {
display: block;
}또는 라이브러리를 사용한다.
<!-- [if lt IE 9]
<script src="js/html5shiv.js"></script>
<![endif] -->
4. 주요 속성
문서내 특정 요소위치로 이동
<a href="#id-name"></a>
name 속성은 a, form (input, button ... ), img 태그에서만 사용가능
<input type="text" name="input-name">
<div id='div_id' name='div_name' class='div javascript'></div>
<p id='p_id' name='p_name' class='p javascript'></p>
<a name='a_name' class='a javascript'></a>
<img name='img_name' class='img javascript'></img>
<input type='text' name='input_name' class='input javascript'>
<button name='button_name' class='button javascript'></button>
<form id='form_id' name='form_name' class='form javascript'>
<div id='frm_div_id' name='frm_div_name' class='frm div js'></div>
<p name='frm_p_name' class='frm p js'></p>
<a name='frm_a_name' class='frm a js'></a>
<img id='frm_img_id' name='frm_img_name' class='frm img js'></img>
<input type='text' id='frm_input_id' name='frm_input_name' class='frm input js'>
<button name='frm_btn_name' class='frm btn javascript'></button>
</form>
<script>
console.log(div_id.className); // div javascript
// console.log(div_name.className); // ReferenceError
console.log(p_id.className); // p javascript
// console.log(p_name.className); // ReferenceError
// console.log(a_name.className); // ReferenceError, Not supported in HTML5
console.log(img_name.className); // img javascript
// console.log(input_name.className); // ReferenceError
// console.log(button_name.className); // ReferenceError
console.log(form_id.className); // form javascript
console.log(form_name.className); // form javascript
console.log(form_id === form_name); // true
// in form tag
console.log(frm_div_id.className); // frm div js
// console.log(form_name.frm_div_name.className); // TypeError
// console.log(form_name.frm_p_name.className); // TypeError
// console.log(form_name.frm_a_name.className); // TypeError
console.log(frm_img_name.className); // frm img js
console.log(form_name.frm_img_name.className); // frm img js
// console.log(frm_input_name.className); // ReferenceError
console.log(form_name.frm_input_name.className); // frm input js
// console.log(frm_btn_name.className); // ReferenceError
console.log(form_name.frm_btn_name.className); // frm btn javascript
</script>* 모든 태그의 id값으로 JavaScript 접근가능
* img, form 태그만 name값으로 JavaScript 접근가능
* input, button 태그는 form 태그안에서(form의 프로퍼티) name값으로 JavaScript 접근가능
* a 태그의 name 속성은 HTML5에서 지원 중단
'HTML CSS' 카테고리의 다른 글
| [CSS] 마진 상쇄 (0) | 2019.12.20 |
|---|---|
| [CSS] Box Model (0) | 2019.12.20 |
| [CSS] 유용한 사이트 (0) | 2019.12.20 |
| [CSS] Style 속성 (0) | 2019.12.20 |
| [HTML] 웹개발 유용한 사이트 (0) | 2019.12.19 |