[Chp.1.1] 프론트엔드 개발자 부트캠프 코딩 HTML CSS <div>, <span>, <style>, <hr>, <br>, <sub>, <sup>

 

<div>: The Content Division element : generic container

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div

<div>: The Content Division element - HTML: HyperText Markup Language | MDN

The <div> HTML element is the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS (e.g. styling is directly applied to it, or some kind of layout model like Flexbox is applied to its parent element).

developer.mozilla.org

​

<div class="warning">

<img src="이미지이름.png" alt="ㄱㄴㄷㄹㅁㅂㅅ" />

<p>ㄱㄴㄷㄹㅁㅂㅅ</p>

</div>

​

------------

​

<span>: The Content Span element : generic inline container for phrasing content

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

<span>: The Content Span element - HTML: HyperText Markup Language | MDN

The <span> HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no oth...

developer.mozilla.org

<p>

Add the <span class="ingredient">phd</span>, <span class="ingredient">doctor</span> and

<span class="ingredient">master</span> performance to develop the career.

<style>

span.ingredient {

color: #f00;

}

</style>

</p>

​

------------

​

<hr>: The Thematic Break (Horizontal Rule) element : hematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr

<hr>: The Thematic Break (Horizontal Rule) element - HTML: HyperText Markup Language | MDN

The <hr> HTML element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.

developer.mozilla.org

​

<br>: The Line Break element : a line break in text (carriage-return)

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br

<br>: The Line Break element - HTML: HyperText Markup Language | MDN

The <br> HTML element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.

developer.mozilla.org

​

<sub>: The Subscript element 아래첨자

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub

<sub>: The Subscript element - HTML: HyperText Markup Language | MDN

The <sub> HTML element specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text.

developer.mozilla.org

<p>

C₈H₁₀N₄O₂

</p>

​

<sup>: The Superscript element 위첨자

<p>

<var>a²</var> + <var>b²</var> = <var>c²</var>

</p>

​