min's devlog

[CSS] Block,Inline 본문

til/Front

[CSS] Block,Inline

값진 2022. 5. 27. 10:41

블럭태그와 인라인 태그 (block, inline)

대부분의 HTML 요소는 display 속성의 기본값으로 블럭, 인라인 둘 중 하나의 값을 가진다.

 

 

블럭태그

  - display 속성값이 블록인 요소는 언제나 새로운 라인에서 시작하고, 해당 라인의 모든 너비를 차지

  -<div>, <h1>, <p>, <ul>, <ol>, <form>

인라인태그

  - display 속성값이 인라인인 요소는 새로운 라인에서 시작하지 않음

  - 요소의 너비는 HTML요소의 내용만큼만 차지

  - <span>, <a>, <img>

 

블럭태그와 인라인태그 사용

    <h1>블럭 태그</h1>
    <div id="div1">블럭 태그</div>

    <h1>인라인 태그</h1>
    <span id="span1">인라인 태그</span>

 

        #div1 {
            background-color: antiquewhite;
            color : gray;
            width : 200px;
            height : 200px;
        }

        #span1 {
            background-color: aquamarine;
            color : gray;
            width : 200px;
            height : 200px;
        }

  - 블럭태그인 div는 width와 heigh 지정시 적용된다.

  - 인라인태그는 에러가 나지는 않지만 width와 height 적용이 안된다. > 너비와 높이를 무조건 지정할 수 있는 것은 아님

  - 박스모델은 width, height는 블럭태그에만 적용이 가능하다.

  - 인라인태그 중 일부는 적용이 가능하다. (처음부터 영역이 눈에 보이는 태그들)

 

 

인라인 블록(inline-block)

  - 인라인요소와 비슷하지만, 너비와 높이를 설정할 수 있다.

  - 블록요소처럼 margin을 이용해서 여백을 지정 가능

  - display 속성값이 인라인-블록으로 설정된 요소는 해당 요소 자체는 인라인(inline) 요소처럼 동작하지만 해당 요소

    내부에서는 블록(block) 요소처럼 동작

<style>
    div { width: 100px; height: 50px; }

    .first { background-color: aqua; }
    .second { background-color: green; }
    .third { background-color: yellow; }

    .inline { display: inline; }
    .inline-block { display: inline-block; }
</style>

 

다양한 display 속성값

<body>
	<div class="first">블록</div>
	<div class="second">블록</div>
	<div class="third">블록</div><br>

	<p>인라인 태그 실습</p>
	<div class="first inline">인라인</div>
	<div class="second inline">인라인</div>
	<div class="third inline">인라인</div><br><br>

	<p>인라인-블록 실습</p>
	<div class="first inline-block">인라인-블록</div>
	<div class="second inline-block">인라인-블록</div>
	<div class="third inline-block">인라인-블록</div>
</body>

실행 결과

 

'til > Front' 카테고리의 다른 글

[CSS] 포지션(position)  (0) 2022.05.30
[CSS] reset, normalize  (0) 2022.05.30
[CSS] 박스 모델(Box Model)  (0) 2022.05.27
[CSS] HTML 문서에 CSS 적용  (0) 2022.05.25
[HTML] HTML 구성 요소  (0) 2022.05.25
'til/Front' Related Articles more
Comments