[HTML/CSS] Inline⛸과 Block⬛, Float

inah-_-·2021년 2월 17일
0

HTML/CSS

목록 보기
6/6
post-thumbnail

# Inline

inline이란 말 그대로 한 줄에 같이 위치할 수 있는 요소로, HTML 태그로는 <span>, <a>, <img> 등이 있다.

# Block

대부분의 HTML elementblock요소로
많이 쓰이는 <header>, <footer>, <table>, <div>, <h1>~<h6>, <dl>, <dt>, <ul><li>, <nav>, <p> 등등
정말 많은 태그가 Block 요소이다.

# Inline과 Block의 차이점

<!DOCTYPE html>
<html>
<head>
<style>
b, h1 {font-size:30px;}
p {margin:0;}
section{width:500px;}
.inline{border:1px solid #333; background-color:pink;}
.block{border:1px solid #333; background-color:skyblue; margin-top:30px;}
</style>
</head>
<body>
	<p style="font-size:40px; font-weight:bold; margin:30px 0; ">Inline과 Block의 차이점 출력</p>
	<section class="inline">
          <b>Inline Element</b>
          <span>우리는</span>
          <a>인라인</a>
          <i>요소</i>
        </section>
    
    	<section class="block">
          <h1>Block Element</h1>
          <header>우리는</header>
          <div>블럭</div>
          <p>요소</p>
          <p>p태그는 기본적으로 margin값이 들어있다. </p>
          <h2>h(n) 태그도 마찬가징</h2>
        </section>
</body>
</html>



# 태그 속성 변경

InlineBlock요소의 태그들은 CSS Property를 사용하여 성질을 변경할 수 있는데,
Inline요소를 > Block으로, Block요소를 > Inline으로 변경할 수 있다.

Inline > Block CSS

  • display:block;

Block > Inline CSS

  • display:inline-block;

  • display:inline;

  • float:left 혹은 right;

  • display:flex, grid 등...

많은 방법이 있지만 오늘은 위 네가지만 하겠다.



# Inline요소를 Block요소로 바꿀 경우

<!DOCTYPE html>
<html>
<head>
<style>
section{text-align:center;}
p{font-size:30px; font-weight:bold;}
span{display:block; font-size:30px;}
</style>
</head>
<body>
<section>
     <p>Inline요소 span을 Block요소로 출력!</p>
     <span>안녕</span>
     <span>나는 'span'</span>
     <span>사실 인라인 태그인데</span>
     <span>display:block 덕에<span>
     <span>블럭 요소가 됐어</span>
</section>
</body>
</html>


# Block요소를 Inline요소로 바꿀 경우

1. display:inline-block;

<!DOCTYPE html>
<html>
<head>
<style>
section{text-align:center;}
p{font-size:30px; font-weight:bold;}
div{display:inline-block; font-size:30px;}
</style>
</head>
<body>
<section>
    <p>Block요소 div를 Inline으로 출력!</p>
    <div>안녕</div>
    <div>나는 'div'</div>
    <div>사실 블럭 요소인데</div>
    <div>display:inline-block 덕에</div>
    <div>inline처럼 보이게 됐어</div>
</section>
</body>
</html>

2. display:inline

<!DOCTYPE html>
<html>
<head>
<style>
section{text-align:center;}
p{font-size:30px; font-weight:bold;}
div{display:inline; font-size:30px;}
</style>
</head>
<body>
<section>
    <p>Block요소 div를 Inline으로 출력!</p>
    <div>안녕</div>
    <div>나는 'div'</div>
    <div>사실 블럭 요소인데</div>
    <div>display:inline; 덕에</div>
    <div> inline처럼 보이게 됐어</div>
</section>
</body>
</html>





# float

작성법은 다음과 같다 float:left, right, none;

float 속성은 이전에 flexgrid가 출시되기 전 많이 레이아웃을 잡는데에 많이 사용되던 속성으로, 요새는 flexgrid로 레이아웃을 잡는 경우가 훨씬 많아 float은 사용을 거의 안한다고 한다.

# float으로 inline 적용

floatblock요소에만 사용이 가능하고,
사용 후 float되는 HTML 문서의 흐름을 제어하기 위해서는 clear 속성이 필요한데,

여러가지의 방법이 있지만, 내가 생각하기에 편한 방법은

  • after 가상선택자 사용 a:after{clear:both;}
  • 부모 엘리먼트에 overflow:hidden; 사용

1. after 가상선택자 사용시

::after는 선택한 요소의 맨 마지막 요소에 자식 요소를 하나 생성한다. content: ""; 속성과 함께 짝지어 장식용 콘텐츠를 추가할 때 사용하고
기본값은 인라인이다.

<!DOCTYPE html>
<html>
<head>
<style>
h1{font-size:30px; text-align:center;}
.container:after{display: block; content: ''; clear:both;}
.container{background-color:#eee; height:100px;}
.divBox{background-color:pink;}
.floatBox{background-color:skyblue;}
.left{float:left;}
.right{float:right;}
</style>
</head>
<body>
    <h1>Float을 사용하여 inline으로 출력하기</h1>
    <p>이 방법은 after 선택자로 float clear 시키기!</p>
    <div class="container">
    	<div class="divBox">나는야 div block box!</div>
        <div class="divBox">나는 block요소기 때문에 한 칸을 다 차지해</div>    
        <div class="floatBox left">나는 float 덕에 inline됨과 동시에 왼쪽으로 이동했어</div>
        <div class="floatBox right">나는 float 덕에 inline됨과 동시에 오른쪽으로 이동했어</div>
   </div>
    <div class="divBox">container:after에 clear:both 되면서 더 이상 float 적용이 안 되는 걸 볼 수 있지</div>
</body>
</html>

2. overflow:hidden 사용시

<!DOCTYPE html>
<html>
<head>
<style>
h1{font-size:30px; text-align:center;}
.clear{overflow:hidden;}
.container{background-color:#eee; height:100px;}
.divBox{background-color:pink;}
.floatBox{background-color:skyblue;}
.left{float:left;}
.right{float:right;}
</style>
</head>
<body>
    <h1>Float을 사용하여 inline으로 출력하기</h1>
    <p>이 방법은 부모 컨테이너에 overflow:hidden 시키기!</p>
    <div class="container clear">
    	<div class="divBox">나는야 div block box!</div>
        <div class="divBox">나는 block요소기 때문에 한 칸을 다 차지해</div>    
        <div class="floatBox left">나는 float 덕에 inline됨과 동시에 왼쪽으로 이동했어</div>
        <div class="floatBox right">나는 float 덕에 inline됨과 동시에 오른쪽으로 이동했어</div>
   	</div>
    <div class="divBox">Overflow:hidden이 더 편한듯</div>
</body>
</htl>

사실 아무 태그나 사용해도 CSS를 통해 언제든지 태그의 성질을 바꿀 수 있지만,

협업과 유지보수를 생각하면 태그를 쓸 때 나중을 생각하고 올바른 HTML문서를 작성 하는게 맞는 거 같다.

# 한눈에 보는 사용법

내가 까먹었을때 찾아오려고 작성함

<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}

.clear{overflow:hidden;}
.container{background-color:#eee; }
.divBox{background-color:pink;}
.floatBox{background-color:skyblue;}
.left{float:left;}
.right{float:right;}
</style>
</head>
<body>
<h1>display와 float Property</h1>
<p>HELLO WORLD! = display property</p>

<h2>display: none;</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex1">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<h2>display: inline;</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex2">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<h2>display: block;</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex3">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<h2>display: inline-block;</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex4">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<div class="container clear">
	<h2>Float:left; right; clear</h2>
	<div class="floatBox left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
    <div class="floatBox right">Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div>  
</div>
	<div>Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div>

</body>
</html>







* 레이아웃 이해에 많은 도움이 된 영상
* 레이아웃 이해에 많은 도움이 된 사이트




profile
삽질은 의미가 있다🥴

0개의 댓글