css

인라인,블록

풀스택 개발자 2021. 6. 6. 09:27

블럭레벨

화면 전체를 사용

 

인라인

자신의 컨텐트 만큼 사용

첫번째 블럭레벨 두번째 인라인

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap" rel="stylesheet">
</head>
<style>
h1,a{border:1px solid red;}
</style>
<body>
<h1>안녕하세요</h1>
<a href = "www.naver.com">하이요</a>
</div>
</body>
</html>

 

하지만 블럭레벨을 인라인으로 변형시킬 수 있다.

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap" rel="stylesheet">
</head>
<style>
h1,a{border:1px solid red;}
h1{display:inline}
</style>
<body>
<h1>안녕하세요</h1>
<a href = "www.naver.com">하이요</a>
</div>
</body>
</html>