바이오 대표

[CSS] Box (block) & Inlines 본문

Front_end

[CSS] Box (block) & Inlines

바이오 대표 2021. 8. 12. 20:27

box (block): div, p , address, blockquote

non-box (inline) : span, a, img, code 

 

block은 옆에 다른 요소가 올 수 없는 반면, inline 요소들은 옆에 붙여서 사용할 수 있다. 

 

 

예시) 

<!DOCTYPE html>  
<html lang="kr"> 
    <head>
        <title>HTML input Exercise</title>
        <style>
            div {
                height: 150px;
                width: 150px;
                background-color: peru;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <span>hello</span>
        <span>hello</span>
        <span>hello</span>
    </body>
</html>

* 가장 대표적인 Box = <div>

Block이여서 <div> 가 옆이 아닌 밑으로 붙는다
hello 가 span 태그를 이용했기에 옆에 붙을 수 있다

저작자표시

'Front_end' 카테고리의 다른 글

[CSS] Block - Margin, Padding, Border  (2) 2021.08.13
[CSS] Block & Inline 특징  (0) 2021.08.13
[CSS] CSS 기본형식 및 HTML 적용 방법  (0) 2021.08.12
[HTML] <div></div>, Semantic 태그들  (0) 2021.08.08
[HTML] <form> <label></label><input/></form>_예시)달력  (0) 2021.08.08
'Front_end' Related Articles more