FRONT-END : 레이아웃(Layout)란?

🌱 오늘의 주제  : 레이아웃(Layout)란?

 

 

 

 

 

 

 

🌱 HTML, CSS 미리보기 사이트

---

미리보기

HTML, CSS and JavaScript demo - Liveweave

 

 

 

 

 

 

 

 

 

🌱 div 태그

---

• Division의 약자로 레이아웃을 나누는데 주로 쓰이는 태그 (분할, 나누기)

 

 

 

 

 

 

 

🌱 HTML5 시맨틱(Semantic) 태그

---

• HTML5에서부터 표준화를 위해 새롭게 지원되는 태그이다.
• <div>...</div> 와 비슷한 역할 
• div태그  : Division의 약자로 레이아웃을 나누는데 주로 쓰이는 태그 (분할, 나누기)
• 의미를 가지는 태그
  • 웹페이지의 구조를 쉽게 이해할 수 있도록 정의된 태그

 

 

 

 

 

 

🌱 flex class 속성 (div 배치를 도와주는)

---

• 참고 블로그
• 플렉스 게임 사이트

이번에야말로 CSS Flex를 익혀보자

Flexbox Froggy

 

 

 

 

 

🌱 block vs inline

---

• 태그들은 inline이거나 block 중 하나에 속한다.

 

block

• 한 행에 block 태그 혼자 위치하며 width, height 값을 줄 수 있다.

블록 태그의 예

<address>, <article>, <aside>, <audio>, <blockquote>, <canvas>, <dd>, <div>, <dl>,
<fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>,
<h6>, <header>, <hgroup>, <hr>, <noscript>, <ol>, <output>, <p>, <pre>, <section>,
<table>, <ul>, <video>

inline

• 한 행에 다른 inline 태그들과 함께 위치할 수 있으며 width, height 값을 줄 수 없다.

인라인 태그의 예

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, 
<dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>,
<small>, <script>, <select>, <span>, <strong>, <sub>, <sup>, <textarea>, <tt>, <var>