[부스트코스] 1. 웹 프로그래밍 기초 : HTML tags, layout
이제 웹 개발에 대한 이론적인 강의는 WAS로 끝(아마)이다.
본격적인 개발에 앞서 HTML, CSS에 관련된 강의를 리뷰하려고 한다.
참고 강의 :
https://www.edwith.org/boostcourse-web/lecture/16669/
[LECTURE] 1) HTML Tags : edwith
들어가기 전에 HTML 태그는 많은 종류를 가지고 있고 각각의 쓰임새에 대한 정확한 의미가 있지요. '각각의 의미를 지닌다'는 것을 'Semantic한 태그' 혹은 'Semanti... - 부스트코스
www.edwith.org
https://www.edwith.org/boostcourse-web/lecture/19355/
[LECTURE] 2) HTML Layout 태그 : edwith
들어가기 전에 이번 시간에는 레이아웃을 위한 HTML 태그를 배워보도록 하겠습니다. ‘레이아웃(Layout)’ 이란 ‘배치'라는 뜻으로, HTML 태그로 감싸진 각 정보 요소를 화... - 부스트코스
www.edwith.org
* HTML이란?
웹 페이지를 위한 표준 마크업 언어 (!= 프로그래밍 언어)
HTML은 여러 태그들로 구성되어 있으며 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있다.
가장 최신 버전은 HTML5로 2017년 12월 17일에 출시되었다.
* HTML Tag
Html 태그는 태그의 종류마다 의미가 있다(semantic). 사용자의 의도에 맞게 필요한 태그를 잘 써야 한다.
물론, 문서를 잘 표현하는 데도 중요하지만 대체 텍스트를 사용하여 문서를 읽는 사용자도 있기 때문에 개발자들은 이러한 것도 고려하여 잘 써야 한다.
<div>
<h1>제목 입력하는 곳</h1>
과일 이름을 적어보자.
<ul>
<li>사과</li>
<li>바나나</li>
<li>포도</li>
</ul>
</div>
| 태그 | 설명 |
| <a> | 하이퍼링크 관련 태그 |
| <body> | 문서의 body 관련 태그 |
| <button> | 클릭할 수 있는 버튼 관련 태그 |
| <div> | 문서의 section |
| <img> | 이미지 태그 |
| <li> | 리스트 아이템 태그 |
| <mark> | 강조 텍스트 태그 |
| <textarea> | 여러 줄의 텍스트 입력 관련 태그 |
* HTML Layout
대부분 웹 페이지의 레이아웃 구조는 헤더 - 본문 - 푸터 이다. (네비게이션을 사용하는 경우도 많다)
이런 레이아웃을 위해 html 레이아웃 태그가 존재한다.
| <header> | document나 section의 header 태그 (HTML5) |
| <nav> | 네비게이션 링크들을 위한 컨테이너 태그 |
| <section> | 문서에서 section을 define |
| <article> | 독립적인 article 관련 태그 |
| <aside> | 사이드바와 같은 내용 태그 |
| <footer> | 문서의 footer 관련 태그 |
| <detatils> | 추가적인 detail |
| <summary> | detail element를 위한 heading 태그 |
<header> 태그 대신에 <div> 태그를 사용하는 경우도 있다.
참고 사이트 : https://www.w3schools.com/html/html_layout.asp
HTML Layouts
HTML Layouts HTML Layout Example London London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Standing on the River Thames, London has been a major settlement for
www.w3schools.com
