HTML.CSS.JS/html

[html] inline, block, inline-block 속성

congs 2023. 4. 24. 15:59
 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>tag 종류</title>
</head>
<body>
    <p>
        inline 속성 : 줄바꿈이 안되는 속성
        - 엘리먼트들이 전 후 줄바꿈 없이 한줄로 다른 엘리먼트들과 나란히 배치
        - i, ins, del, span(상품명을 적는 경우 사용), a, em
    </p>
   
    <p>
        block 속성 : 줄바꿈이 되는 속성
        - 엘리먼트들이 전 후 줄바꿈이 들어가는 형태
        - 다른 엘리먼트들을 밀어내고 혼자 한줄을 차지
        - div, h1, p, hr
    </p>
    <p>
        inline-block 속성 : 하이브리드 모드처럼 작동
        - inline 엘리먼트들이 가질 수 있는 속성, block 엘리먼트들이 가질 수 있는 속성을 모두 가짐
       
    </p>
</body>
</html>
 
 

'HTML.CSS.JS > html' 카테고리의 다른 글

[html] a_id 싱커 (책갈피)  (0) 2023.04.24
[html] a tag/ herf, target, download 속성  (0) 2023.04.24
[html] input_tag  (0) 2023.04.24
[html]text 태그  (0) 2023.04.24
[HTML] style 태그  (0) 2023.04.05