-
[부스트코스] 1. 웹 프로그래밍 기초 : HTML tags, layoutFront-end/부스트코스 : 웹 프로그래밍 2020. 1. 29. 11:13
이제 웹 개발에 대한 이론적인 강의는 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 레이아웃 태그가 존재한다.
layout <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
'Front-end > 부스트코스 : 웹 프로그래밍' 카테고리의 다른 글
[부스트코스] 1. 웹 프로그래밍 기초 - CSS (0) 2020.02.16 [부스트코스] 1. 웹 프로그래밍 기초 : HTML 구조설계, class&id (0) 2020.02.02 [부스트코스] 1. 웹 프로그래밍 기초 : WAS (웹 어플리케이션 서버) (0) 2020.01.29 [부스트코스] 1. 웹 프로그래밍 기초 : 웹 서버 (web server) (0) 2020.01.15 [부스트코스] 1. 웹 프로그래밍 기초 : browser의 동작 (0) 2020.01.15