* display 속성 종류 : inline, block, inline-block, flex...
* css의 display 속성을 이용해 요소들의 표현방법을 바꿀 수 있다.!
1. 인라인(inline)
목록 : <span>, <a>, <b>, <i>, <img>, <label> ...
특징 : 너비, 높이 지정 불가
영역 : 컨텐츠의 크기
2. 블록(block)
목록 : <div>, <p>, <ul>, <ol>, <li>, <h1~h6>, <form>, <nav>, <table>
특징 : 너비, 높이 지정가능
영역 : 지정된 너비, 높이 만큼 또는 부모 크기만큼
3. 인라인블록(inline-block)
특징 : 기본적으로 인라인의 속성, 너비와 높이 지정 가능
영역 : 지정된 너비와 높이, 지정 안할시 컨텐츠 크기
- 인라인, 블록, 인라인 블록 예시
<!DOCTYPE html>
<html lang="ko">
<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>
span{
background-color: bisque;
}
div{
background-color: darkgrey;
}
</style>
</head>
<body>
<span>인라인레벨입니다.</span>
<div>블록레벨입니다.</div>
</body>
</html>- > 결과
-> 기본요소들을 display 속성을 통해 바꿔보기
<!DOCTYPE html>
<html lang="ko">
<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>
span:first-of-type{
display: block;
background-color: bisque;
}
div:first-of-type{
display: inline;
background-color: darkgrey;
}
span:nth-of-type(2){
display: inline-block;
width:400px;
height: 30px;
background-color: darkkhaki;
}
div:nth-of-type(2){
display: inline-block;
width:400px;
height: 30px;
background-color: darkcyan;
}
</style>
</head>
<body>
<span>인라인레벨->블록으로 바꾼 결과</span>
<div>블록레벨->인라인블록으로 바꾼 결과</div><br>
<span>인라인레벨 -> 인라인블록으로 바꾼 결과</span>
<div>블록레벨 -> 인라인블록으로 바꾼 결과</div>
</body>
</html>-> 결과
댓글