[Basic HTML/CSS] 1. html - basic tags
-
Upload
hyejin-oh -
Category
Technology
-
view
130 -
download
10
Transcript of [Basic HTML/CSS] 1. html - basic tags
To Do
1. Basic Tags○ h1~h6, div, p, span, img, a, strong, b, em, i
2. List tags○ ul li, ol li, dl dt dd
3. Table tags○ table, thead, tbody, tfoot, tr, td, colgroup, col
4. Form tags○ form, fieldset, legend, label, input, select, option, textarea, button
5. Etc○ header, footer, nav, aside, section, article○ iframe, blockquote, ruby, sup, sub, pre, code, mark
<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head><body>
</body></html>
문서 형식선언
최상위 요소
헤드
바디(본문 영역)
문자셋
브라우저 제목 표시줄
block element inline element
span, img, a,strong, b, em, i
div b i h1~h6 p span img a strong em
div, h1~h6, p
h1~h6The HTML <h1>–<h6> elements represent six levels of section headings.
<h1> is the highest section level and <h6> is the lowest.
block
divThe HTML <div> element is the generic container for flow content and
does not inherently represent anything.
block
★★★★★
spanThe HTML <span> element is a generic inline container for phrasing
content, which does not inherently represent anything.
inline
aThe HTML <a> element (or anchor element) creates a hyperlink to other
web pages, files, locations within the same page, email addresses, or any other URL.
inline
ex.
<a href="url" target="_blank"></a><a href="mailto:[email protected]"></a>
<a href="tel:821012345678"></a>
strong & b● strong : The HTML <strong> element gives text strong importance,
and is typically displayed in bold.● bold : The HTML <b> element represents a span of text stylistically
different from normal text, without conveying any special importance or relevance, and that is typically rendered in boldface.
inline
em & i● em : The HTML <em> element marks text that has stress emphasis.
The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.
● i : The HTML <i> element represents a range of text that is set off from the normal text for some reason, for example, technical terms, foreign language phrases, or fictional character thoughts. It is typically displayed in italic type.
inline
<body><div id="wrap">
<div id="header"></div><div id="container"></div><div id="footer"></div>
</div></body>
<div id="container"><div id="column_left"></div><div id="column_right"></div><div id="column_bottom"></div><div id="column_bn"></div>
</div>