2) HTML Layhout

이 포스트는 boostcourse에서 공부하며 기록하였습니다. 

 

HTML 태그 상세 내용 : w3schools.com

 

Layout tags 종류

• header
• section
• nav
• footer
• aside

 

레이아웃 실습

Standard HTML5 Semantic Layout (github.com)

Standard HTML5 Semantic Layout

 

 

exercise2-1

• <title ~ </title> :  말그대로 타이틀을 JS Bin으로 잡지만, 실제로 UI에 나타나지는 않는다. 
• <img src = "A" alt = "logo"> : 이미지 주소 "A"를 넣는데 그 옆에 이미지 이름을 "logo"라고 나타나도록 한다. 

 

 

exercise2-2

• nav는 header 안에 위치하는 레이아웃이다. 
• </li ~ </li> : list형식으로 출력을 해준다. 

<li ~ </li> 출력 예시

 

 

 

exercise2-3

 

• <div> ~ </div> : layout을 구분할때도 쓰이지만 위와 같이 text출력할때도 사용이 된다. 
• h3 : h1, h2, h3,,...등등 제목, 부제목, 소제목 과 같은 역할을 한다. 

 

li, h3, ul, div의 출력 결과 

 

 

코드의 모든 내용을 리뷰한 것은 아니다.  처음 공부해보는 만큼 공부하다가 애매하게 모르는 부분을 짚고 넘어가기에 리뷰를 다 하진 않았다. 

전체 코드를 공부하고 따로 공부하기 원하시는 분은 따로 아래 링크로 들어가서 공부하는 것을 추천한다. 

웹 프로그래밍(풀스택) > 3) HTML 구조설계 : 부스트코스 (boostcourse.org)