찾으시는 정보가 있으시다면
주제별reference를 이용하시거나
우측 상단에 있는 검색기능을 이용해주세요

Block Inline

Every HTML element has a default display value, depending on what type of element is

There are two display values : block and inline

An inline element can’t contain a block-level element

Block-level elements

Starts on a new line

Takes up the full width available

Has a top and a bottom margin, whereas an inline element doesn’t

<div>

• Is often used as a container for other HTML elements

• Has no required attributes, but style, class and id are common

• With CSS, it can be used to style block of content

Inline elements

An inline element doesn’t start on a new line

Only takes up as much width as necessary

<span>

• Is an inline container used to mark up a part of a text, or a part of a document

• Has no required attributes but style, class, and id are common

• With CSS, it can be used to style parts of the text

Layout

HTML has several semantic elements that define the different parts of a web page

<header> : Defines a header for a document or a section

<nav> : Defines a set of navigation links

<section> : Defines a section in a document

<article> : Defines an independent, self-contained content

<aside> : Defines content aside from the content

<footer> : Defines a footer for a document or a section

<details> : Defines additional details that the user can open and close on demand

<summary> : Defines a heading for the <details> element

Technique

framework

• To create layout fast, use a CSS framework, like Bootstrap or Foundation

float property

• Is common to do entire web layouts using the CSS float property

• Is easy to learn, but is tied to the document flow, which may harm the flexibility

flexbox

• Ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices

grid

• offers a grid-based layout system, with rows and columns

Making it easier to design web pages without having to use floats and positioning

Semantic

Clearly describes its meaning to both the browser and the developer

<section>

• Defines a section in a document

• Is a thematic grouping of content, typically with a heading

• Ex) Chapters, Introduction, News items, Contact information

<article>

• Specifies independent, self-contained content

• Should make sense on its own, and it should be possible to distribute is independently from the rest of the web site

• Ex) Forum posts, Blog posts, User comments, Product cards, Newspaper articles

<header>

• Represents a container for introductory content or a set of navigational links

• Can have several <header> elements in one HTML document

• However, It can’t be placed within a <footer>, <address> or another <header> element

• Ex) one or more heading elements, logo or icon, authorship information

<footer>

• Defines a footer for a document or section

• Ex) authorship info, copyright info, contact info, sitemap, back to top links, related documents

<nav>

• Defines a set of navigation links

• It is intended only for major block of nav

<aside>

• Defines some content aside from the content it is placed in

• It should be indirectly related to the surrounding content

<figure> and <figcaption>

• <figure> specifies self-contained content, ex) illustrations, diagrams, photos, code listings

• <figcaption> defines a caption for a <figure> element