# Inline
inline이란 말 그대로 한 줄에 같이 위치할 수 있는 요소로, HTML 태그로는 <span>, <a>, <img> 등이 있다.
# Block
대부분의 HTML element는 block요소로
많이 쓰이는 <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>
# 태그 속성 변경
Inline과 Block요소의 태그들은 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 속성은 이전에 flex와 grid가 출시되기 전 많이 레이아웃을 잡는데에 많이 사용되던 속성으로, 요새는 flex와 grid로 레이아웃을 잡는 경우가 훨씬 많아 float은 사용을 거의 안한다고 한다.
# float으로 inline 적용
float은 block요소에만 사용이 가능하고,
사용 후 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>
* 레이아웃 이해에 많은 도움이 된 영상
* 레이아웃 이해에 많은 도움이 된 사이트
Backend Developer