Adding Images
•
src : 브라우저에게 어디서 이미지 파일을 찾아야하는지 경로 알려줌
•
alt : 이미지의 텍스트 설명 제공
•
title : 이미지에 대한 추가 정보를 제공(유저가 이미지를 hover했을때 나타남)
•
most image format : JPEG, PNG,GIF
Height & Width of Images
2 attributes
•
height : 이미지의 픽셀 높이를 명시
•
width : 이미지의 픽셀 너비를 명시
보통 HTML 요소들을 load하는 것보다 이미지를 오래 걸리기 때문에, 이미지 사이즈를 남겨두고 나머지 부분들이 렌더링되게끔 하는게 좋은 선택. 이미지의 사이즈는 보통 CSS로 명시하기보다는 HTML로 명시하는 편
Where to place images in your code
1.
before a paragraph : 이미지 이후에 문단이 시작
2.
inside the start of a paragraph : 이미지 아래쪽에 텍스트가 정렬되어 시작
3.
in the middle of a paragraph : 문단 중간에 위치
Adding Links
<a> element를 이용해서 링크를 생성
href attribute를 이용해서 어떤 페이지로 이동할지 명시 가능
Linking to other pages on the same site
동일 사이트 내에서 페이지를 이동하는 경우엔, 상대 경로 URL을 이용하면 됨
(shorthand way)
Directory Structure
큰 웹사이트의 경우, 페이지들을 각각 다른 섹션의 폴더에 위치시켜 조직화하는게 좋음
웹사이트에서 폴더는 때로 디렉토리라고 불리기도 함
Opening links in a new window
target attribute : _blank 값 주기
Linking on a specific point in a page
•
Step 1 : Identifying the destination
타겟 요소에 unique name을 id 속성을 이용해서 주기(fragment identifier)
•
Step 2 : Linking to the destination
a 요소의 href 속성에 fragment값을 명시해주기(hash symbol = #)
Organizing Page Content
HTML5부터는, 웹 애플리케션 내 특정 부분에 semantic meaning을 갖는 새로운 element들이 공개됨
•
header
•
nav
•
main
•
aside
•
section
•
article
•
footer
Header
웹페이지의 시작부분 or <section>이나 <article> 영역의 상단부에 위치한, introductory material
Navigation
개발자들에게 웹 사이트의 navigation을 명시할 수 있는 semantic way를 제공
Main
main content를 감싸는 요소
<main> element는 한 페이지(document)에서 하나만 있어야함
sidebar, navigation link, copyright information, site logo, search form같이 페이지(document)들을 넘나드는 content들은 포함하면 안됨
Aside(sidebars)
추가 정보를 나타내는 요소
주변 content와 연관된 정보들을 content로 넣어줘야함
background information, related links, sidebar, things associated with a document같은 것들을 포함
Example) list of links related to the main article
Footer
author, copyright information, navigation같은 정보들을 페이지의 마지막 부분에 명시하는 요소
Section
긴 문서는 더 작은 부분들로 나눠서 구성하는 것이 좋음
section 요소는, 긴 웹 문서를 thematic section들로 나눔
다양한 용도로 사용 가능한 요소
Article
self-contained works를 위한 요소
newspaper articles, blog posts, comments, items could be extracted for external use 같은 것들을 명시할때 유용
article 요소가 긴 경우, section요소를 여러개 만들어서 분할시킴(= 다수의 article 요소들로 구성되어있음)