HTML basic
body
- Element는 HTML의 Markup 명령어이다.
- content와 함께 사용된다.
- 대소문자는 구분하지 않는다.
- element는 body부분안에 =><body> 들어간다.
- element에는 여는 태그와 닫는 태그가 무조건 있어야 한다.
- 아래와 같이 예제를 보자
(Opening tag_내용_ Closing tag =>전체가 다 Element이다)
<p>Hello World!</p>
Attribute
- 하나 이상의 속성이면 공백 필요
- 속성 이름 뒤에 등호
- 따옴표 필요하다.
- class="Note" 이 부분은 Attribute이다.
<p class="Note">Hello World</p>Nesting elements
중첩요소이고 요소안에 다른 요소를 넣는 코드
<p>Hello<strong>Wow</strong> World.</p>Empty elements(Images)
- 빈요소이고 내용을 포함하지 않는다. img태그는 closing tag가 없다.
- 이미지 파일의 경로가 포함되어 있다.
- alt는 오류로 인해서 이미지가 표시 안될 때를 대비해서 텍스트를 설명하는 것이다.
<img src="images/react-profile.png" alt="react image">HTML 문서 분석
- <!DOCTYPE html> -문서가 올바르게 작동하는지 확인하는데 쓰인다.
- <html> - 모든 컨텐츠를 감싼다. 즉 필수적인 요소이다.
- <head> - 보여지는 내용이 아니고, 검색 결과에 표시 할 키워드 및 페이지 설명, css 등 선언한다.
- (head에 들어가는건 타이틀(title), 문자인코딩(UTF-8), 메타데이터, 외부파일 연결하는 것)
- <meta charset="utf-8"> - 문자를 UTF-8로 설정한다.
- <title> - 페이지를 책갈피/즐겨찾기 할 때 페이지를 설명. 브라우저 탭에 표시한다.
- <body> - 표시하려는 모든 내용이 포함된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Wow</title>
</head>
<body>
<img src="images/react-profile.png" alt="react image">
</body>
</html>
Semantic tag
- 의미를 담긴 태그로 구조화를 하는 것이라 생각하자.
- div태그를 예전에는 많이 사용했는데 semantic tag를 쓰나 div태그를 쓰나 브라우저상에서는 같아보이나 내부적으로는 다르다.
- 단순히 구역 나누기 보다는 의미가 있는 태그들이다.
- span div 태그들은 nosemantic tag이고 h1이나 table 태그들은 시맨틱 태그라고 할 수 있다.
- SEO 검색엔진 최적화를 위해서 metatag , semantic tag등을 통해서 Markup을 효과적으로 할 필요가 있다.
HTML5에서 의미론적인 태그들이 있는데 아래를 보자
- header : <header> 상단의 큰 줄로 페이지 내에서 이동시 동일하게 유지한다.
- navigation bar : <nav> 메뉴 버튼으로 헤더와 마찬가지로 상단에 유지된다.
- sidebar : <aside> 사이드에 위치한 공간으로 메인 콘텐츠와 관련성이 적은 콘텐츠이다.
- main content : <section>, <article> 문서의 일반적인 구분하고 콘텐츠의 그룹을 표현한다. 페이지의 고유한 콘텐츠가 포함된 영역이다.
- footer : <footer> 문서 전체나 섹션의 푸터를 의미한다. seo(검색엔진 최적화)로 사용되기도 한다.
Group contents
- <p> - 단순한 문장을 나누는 태그이다.
- <hr> - 수평선으로 닫는 기호는 없다.
- <ol>, <ul> - 리스트를 나타낸다.(ordered list, unordered list)
- <pre> - 글자로 그림을 그리면 모양 그대로 출력한다.
- <blockquote> - 인용을 넣는 곳으로 cite="인용 출처인 URL을 넣어주는 곳이다."
- <figure> - 독립적인 콘텐츠로 figcation을 통해 추가 설명이 가능하다.
- <div> - 의미 없는 그룹 콘텐츠이다.
paragraphs
- <p> 요소는 텍스트 단락을 나타낸다. 일반 텍스트 콘텐츠를 표시할 때는 자주 사용한다.
Lists(리스트)
적어도 2개 이상의 요소로 구성된다.
- <ul> - Unordered Lists
- <ol> - ordered List
- 내부에 li element가 들어간다.
<ul>
<li>사과</li>
<li>딸기</li>
</ul>
text 관련 element
- <a> - 하이퍼 링크 태그이다.(anchor tag)
- <b> - 볼드체 / <strong> - 강조의 의미 <b>, <strong>은 보이는 것은 같지만, <b>는 쓰지 말자.
- <i> - 이 테릭체 / <em> - 강조의 의미 <i>, <em>은 보이는 것은 같지만, <i>는 쓰지 말자.
- <img> - img를 나타나게 해야 한다.
- <br> - enter와 같이 줄을 바꿔준다. 닫는 기호는 없다.
- <span> - 의미 없는 텍스트 요소이다.
Links(<a> tag)
링크를 달 때는 a 태그를 주로 사용한다.
핵심은 https://를 적어주는 것이다. href 안에 이동할 주소를 적어준다.
title에 적은 글에 마우스를 가져다 대면 정보가 뜬다.
<a href="https://www.naver.com/" title="누르면 해당 사이트로 이동합니다.">네이버</a>
table
- <tr>, <td>, <th>
- <thead>, <tbody>, <tfoot>
- <caption>
- 셀 병합 속성: colspan, rowspan
- scope 속성
- <col>, <colgroup>
참고: https://developer.mozilla.org/ko/
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
https://han-py.tistory.com/303?category=904855
HTML 기초 정리
0. 들어가면서 HTML5를 우리가 배워야 하는 이유는 웹 애플리케이션 개발을 하기 위함이다. 이것을 통해 우리는 웹 개발뿐만 아니라 전반적인 SW 개발 방법 및 학습 과정을 익힐 수 있을 것이다. h
han-py.tistory.com
'WEB > HTML' 카테고리의 다른 글
| HTML Tags 정리 (0) | 2021.08.15 |
|---|---|
| data attributes(dreamcoding) (0) | 2021.07.02 |
| testimonial & contact(dreamcoding) (0) | 2021.07.02 |
| dreamcoding(work) (0) | 2021.07.02 |
| HTML 태그정리2(dreamcoding) (0) | 2021.07.02 |