쫑's바른생활

[코딩 초보 개발일지] 상세_05. 블록/인라인 요소 본문

개발일지/상세

[코딩 초보 개발일지] 상세_05. 블록/인라인 요소

쫑이야기 2023. 4. 5. 15:45
728x90
반응형

html 에서 말하는 블록/인라인 요소는
 
html이 웹페이지로 보여질 때 어떻게 display 되느냐를 나타내는 요소이다.
 

<블록 요소>

  • 넓이와 높이를 지정할 수 있음.
  • 하나의 line을 모두 차지함 = 수직으로 층이 쌓임 = 여백(magin, padding)이 존재
  • 볼록요소 안에 블록과 인라인 요소 모두를 포함할 수 있다.
  • 종류: 제목태그(h1~h6), 목록태그(ul,ol,li), div 태그 등

(예시)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            color: black;
        }
        #wrap{
            background-color: aqua;
        }
        h1{
            background-color: aquamarine;
        }
        li{
            background-color:cadetblue;
        }
    </style>
</head>
<body>
    <div id="wrap">블록요소1</div>
    <h1>블록요소2</h1>
    <li>블록요소3</li>
</body>
</html>

<인라인 요소>

  • 일명 텍스트 요소
  • 콘텐츠 크기만큼만 크기를 가진다
  • 하나의 line을 차지하지 않는다 = 수평으로 쌓임
  • 여백이 자동설정 되어있음.
  • 종류: a 태그, img, em 태그 등
  •  
728x90

(예시)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            color: black;
        }
        a{
            background-color: pink;
        }
    </style>
</head>
<body>
    <a href="#">인라인요소1</a>
    <a href="#">인라인요소2</a>
    <a href="#">인라인요소3</a>
</body>
</html>

끝!

728x90
반응형

'개발일지 > 상세' 카테고리의 다른 글

[코딩 초보 개발일지] 상세_07. transform:rotate  (0) 2023.04.16
[코딩 초보 개발일지] 상세_06. 반응형 알아보기(미디어쿼리 @media)  (1) 2023.04.13
[코딩 초보 개발일지] 상세_04. 제목 태그, 목록 태그  (0) 2023.04.05
[코딩 초보 개발일지] 상세_03. 주석 배우기  (0) 2023.04.04
[코딩 초보 개발일지] 상세_02. 내외부스타일  (0) 2023.04.04
'개발일지/상세' Related Articles more
Comments