HTML Element Reference
그 외 기본요소들
HTML Documents
- 모든 HTML 문서들은
<!DOCTYPE html>선언과 함께 시작한다. - HTML 문서는
<html>로 시작해</html>로 끝난다. - 화면에 보이는 부분은
<body>~</body>이다.
0. HTML Source 보는법
-
HTML 소스코드 보기
오른쪽마우스페이지 소스보기클릭 또는F12 -
HTML Element(요소) 검사하기
오른쪽마우스검사로 HTML과 CSS가 어떤 요소들로 만들어졌는지 확인할 수 있다.
또한 HTML과 CSS를 즉시 편집할 수 있습니다.
1. <!DOCTYPE> Declaration
<!DOCTYPE html>
2. HTML Headings <h1>~<h6>
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1> #가장 중요한 헤드
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6> #가장 덜 중요한 헤드
</body>
</html>
- Bigger Headings
헤드는 기본 사이즈가 있지만, CSSfont-size를 통해t-size를 통해 특별히 사이즈를 더 지정해 줄 수 있다.
<h1 style="font-size:60px;">Heading 1</h1>
3. HTML Paragraphs <p>
HTML paragraphs are defined with the <p> tag
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
4. HTML Horizontal Rules <hr>
<hr> 태그는 가로줄을 만든다. end tag가 없는 empty tag이다.
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
</body>
</html>
5. HTML Line Breaks <br>
<br> element는 <p> 안에서 한 줄 띄기가 가능하게 해준다.
<p>This is<br>a paragraph<br>with line breaks.</p>6. HTML Preformatted text<pre>
<!DOCTYPE html>
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
</body>
</html>
6. HTML LINKS <a>
HTML links are defined with the <a> tag:
링크의 대상은 href 속성에 지정된다.
속성들은 HTML 요소에 대한 추가 정보를 제공하는 데 사용된다.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href="https://www.w3schools.com">This is a link</a>
</body>
</html>
7. HTML Images
<img> tag.
- source file(소스파일) :
src - alternative text(대체텍스트) :
alt - width, height 속성
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
</body>
https://gggggeun.tistory.com/