HTML : Viewport / Open Graph / Twitter Cards / style / class / id

Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

 

- `width=device-width`: Apply the same width as the width of each device
- `initial-scale=1.0`: Set the initial screen scale (magnification degree) of the screen
- `user-scalable=no`: Set whether the user can expand (`yes`)/reduce (`no`) the device screen
- `maximum-scale=1`: The maximum value that the user can scale the screen to
- `minimum-scale=1`: the minimum value that the user can scale down the screen

 

The Open Graph protocol

Specifies the information to be used with priority when a webpage is shared on social media (Facebook, etc.).

<meta property="og:type" content="website" />
<meta property="og:site_name" content="Starbucks" />
<meta property="og:title" content="Starbucks Coffee Korea" />
<meta property="og:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
<meta property="og:image" content="./images/starbucks_seo.jpg" />
<meta property="og:url" content="https://starbucks.co.kr" />

 

=> 

- `og:type`: type of page (E.g, `website`, `video.movie`)
- `og:site_name`: the name of the site to which it belongs
- `og:title`: the name of the page (title)
- `og:description`: a brief description of the page
- `og:image`: Representative image address (URL) of the page
- `og:url`: page address (URL)

 

Twitter Cards

Specifies the information to be prioritized when a webpage is shared on social media (Twitter).

 

<meta property="twitter:card" content="summary" />
<meta property="twitter:site" content="Starbucks" />
<meta property="twitter:title" content="Starbucks Coffee Korea" />
<meta property="twitter:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
<meta property="twitter:image" content="./images/starbucks_seo.jpg" />
<meta property="twitter:url" content="https://starbucks.co.kr" />

 

=> 

- `twitter:card`: type of page (card) (E.g. `summary`, `player`)
- `twitter:site`: the name of the site to which it belongs
- `twitter:title`: the name of the page (title)
- `twitter:description`: a short description of the page
- `twitter:image`: Representative image address (URL) of the page
- `twitter:url`: page address (URL)

 

style / class / id

<span style=""></span> 
=> Specifies the css to apply to the element

<span class="red"></span> 
=> Duplicate possible names designating elements

 

<span id=""></span>
=> A unique name for the element
=> You must use # in your css.

<div data-fruit-name="apple">사과</div>
<div data-fruit-name="banana">바나나</div>

 

other

console ⇒ apple, banana