728x90
반응형
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상
HTML
1. HTML Tags
| <!-- --> | HTML 주석 |
| <a> | 하이퍼링크를 정의 |
| <blockquote> | 다른 출처로부터 인용된 영역을 정의 |
| <body> | 해당 문서의 콘텐츠 영역을 정의 |
| <br> | 행바꿈(\n)을 정의 |
| <button> | 클릭할 수 있는 버튼을 정의 |
| <canvas> | 스크립트를 이용하여 그래픽 콘텐츠를 그릴 때 사용 |
| <code> | 컴퓨터 코드의 일부분을 나타낼 때 사용 |
| <data> | 특정 컨텐츠에 기계가 읽을 수 있는 형태의 값을 덧붙어 나타낼 때 사용 |
| <div> | HTML 문서에서 특정 영역이나 구획을 정의 |
| <footer> | 문서나 특정 섹션의 푸터를 정의 |
| <form> | 사용자로부터 입력받을 수 있는 HTML 입력 폼을 정의 |
| <h1> ~ <h6> | HTML 문서에서 제목을 정의 |
| <head> | 해당 문서에 대한 정보인 metadata의 집합을 정의 |
| <header> | 문서나 특정 섹션의 헤더를 정의 |
| <hr> | 컨텐츠 내용에서 주제가 바뀔 때 사용되는 수평가로선을 정의 |
| <html> | HTML 문서의 루트 요소를 정의 |
| <img> | 이미지요소를 정의 |
| <input> | 사용자로부터 입력받을 수 있는 입력필드를 정의 |
| <label> | 사용자 인터페이스 요소의 라벨을 정의 |
| <li> | HTML 리스트에 포함되는 item을 정의 |
| <meta> | 해당 문서의 metadata를 정의 |
| <nav> | 다른 페이지 or 현제 페이지의 다른 부분과 연결되는 네이게이션 링크들의 집합을 정의 |
| <option> | 드롭다운 리스트에서 사용되는 하나의 옵션을 정의 |
| <pre> | 미리 정해진 형식의 텍스트를 정의 |
| <script> | 클라이언트 사이드의 스크립트를 정의 |
| <section> | HTML 문서에 포함된 독립적인 섹션을 정의 |
| <select> | 옵션 메뉴를 제공하는 드롭다운 리스트를 정의 |
| <span> | HTML 문서에서 인라인 요소를 묶을때 사용 |
| <style> | 해당 문서의 스타일 정보를 정의 |
| <table> | 행과 열로 구성된 2차열 테이블을 정의 (관련된 tag로 tr, td, thead, tbody, 등이 있다.) |
| <textarea> | 사용자가 여러줄의 데이터를 입력할 수 있는 텍스트 입력 영역을 정의 |
| <title> | 해당 문서의 제목을 정의 |
| <ul> | 순서가 없는 HTML 리스트를 정의 |
| <video> | 무비스트립이나 비디오 스트림과 같은 비디오를 정의 |
http://www.tcpschool.com/html-tags/intro 참고
2. Page Structure
<html>
<header>
<title>Title</title>
<sub-title>sub title</sub-title>
</header>
<body>
<nav>Menu Area</nav>
<aside>Sidebar Area</aside>
<article>
<section>
<img src="" alt="이미지"/>
Section 1 Area
</section>
<section>
Section 2 Area
</section>
</article>
</body>
<footer>
Footer Area
</footer>
</html>
3. Semantic Tags
시맨틱 태그란?
시맨틱 태그란 의미가 있는 태그를 말한다. block 요소로 div, inline 요소로 span만 사용하는 것이 아닌 태그 그 자체에 의미가 있는 태그들로 header, footer, nav,등이 있다.
시맨틱 태그를 쓰는 이유?
- 검색엔진최적화(SEO) : 시맨틱 태그를 사용하면 검색엔진이 해당 페이지를 좀 더 정확한 구조로 파악하도록 도울 수 있다.
- 코드 가독성이 좋아지고 이로 인해 유지보수에 도움을 준다.
- 소스 구조를 파악하기 용이하고 이로 인해 페이지를 분석하는 서비스를 사용하기 용이하다.
시맨틱 태그의 종류
- header: 사이트의 헤더영역
- footer: 사이트의 푸터영역
- nav: 네비게이션 바 영역
- aside: 사이드 바 영역
- article: 재배포가 가능한 독립적인 개별 컨텐츠 영역
- section: 재배포가 불가능한 컨텐츠 영역
728x90
반응형
728x90
반응형
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상
HTML
1. HTML Tags
| <!-- --> | HTML 주석 |
| <a> | 하이퍼링크를 정의 |
| <blockquote> | 다른 출처로부터 인용된 영역을 정의 |
| <body> | 해당 문서의 콘텐츠 영역을 정의 |
| <br> | 행바꿈(\n)을 정의 |
| <button> | 클릭할 수 있는 버튼을 정의 |
| <canvas> | 스크립트를 이용하여 그래픽 콘텐츠를 그릴 때 사용 |
| <code> | 컴퓨터 코드의 일부분을 나타낼 때 사용 |
| <data> | 특정 컨텐츠에 기계가 읽을 수 있는 형태의 값을 덧붙어 나타낼 때 사용 |
| <div> | HTML 문서에서 특정 영역이나 구획을 정의 |
| <footer> | 문서나 특정 섹션의 푸터를 정의 |
| <form> | 사용자로부터 입력받을 수 있는 HTML 입력 폼을 정의 |
| <h1> ~ <h6> | HTML 문서에서 제목을 정의 |
| <head> | 해당 문서에 대한 정보인 metadata의 집합을 정의 |
| <header> | 문서나 특정 섹션의 헤더를 정의 |
| <hr> | 컨텐츠 내용에서 주제가 바뀔 때 사용되는 수평가로선을 정의 |
| <html> | HTML 문서의 루트 요소를 정의 |
| <img> | 이미지요소를 정의 |
| <input> | 사용자로부터 입력받을 수 있는 입력필드를 정의 |
| <label> | 사용자 인터페이스 요소의 라벨을 정의 |
| <li> | HTML 리스트에 포함되는 item을 정의 |
| <meta> | 해당 문서의 metadata를 정의 |
| <nav> | 다른 페이지 or 현제 페이지의 다른 부분과 연결되는 네이게이션 링크들의 집합을 정의 |
| <option> | 드롭다운 리스트에서 사용되는 하나의 옵션을 정의 |
| <pre> | 미리 정해진 형식의 텍스트를 정의 |
| <script> | 클라이언트 사이드의 스크립트를 정의 |
| <section> | HTML 문서에 포함된 독립적인 섹션을 정의 |
| <select> | 옵션 메뉴를 제공하는 드롭다운 리스트를 정의 |
| <span> | HTML 문서에서 인라인 요소를 묶을때 사용 |
| <style> | 해당 문서의 스타일 정보를 정의 |
| <table> | 행과 열로 구성된 2차열 테이블을 정의 (관련된 tag로 tr, td, thead, tbody, 등이 있다.) |
| <textarea> | 사용자가 여러줄의 데이터를 입력할 수 있는 텍스트 입력 영역을 정의 |
| <title> | 해당 문서의 제목을 정의 |
| <ul> | 순서가 없는 HTML 리스트를 정의 |
| <video> | 무비스트립이나 비디오 스트림과 같은 비디오를 정의 |
http://www.tcpschool.com/html-tags/intro 참고
2. Page Structure
<html>
<header>
<title>Title</title>
<sub-title>sub title</sub-title>
</header>
<body>
<nav>Menu Area</nav>
<aside>Sidebar Area</aside>
<article>
<section>
<img src="" alt="이미지"/>
Section 1 Area
</section>
<section>
Section 2 Area
</section>
</article>
</body>
<footer>
Footer Area
</footer>
</html>
3. Semantic Tags
시맨틱 태그란?
시맨틱 태그란 의미가 있는 태그를 말한다. block 요소로 div, inline 요소로 span만 사용하는 것이 아닌 태그 그 자체에 의미가 있는 태그들로 header, footer, nav,등이 있다.
시맨틱 태그를 쓰는 이유?
- 검색엔진최적화(SEO) : 시맨틱 태그를 사용하면 검색엔진이 해당 페이지를 좀 더 정확한 구조로 파악하도록 도울 수 있다.
- 코드 가독성이 좋아지고 이로 인해 유지보수에 도움을 준다.
- 소스 구조를 파악하기 용이하고 이로 인해 페이지를 분석하는 서비스를 사용하기 용이하다.
시맨틱 태그의 종류
- header: 사이트의 헤더영역
- footer: 사이트의 푸터영역
- nav: 네비게이션 바 영역
- aside: 사이드 바 영역
- article: 재배포가 가능한 독립적인 개별 컨텐츠 영역
- section: 재배포가 불가능한 컨텐츠 영역
728x90
반응형
