JunO3O
가시 속성(display)
가시 속성(display)
2023. 3. 21. 03:04ㆍCSS
가시 속성
: 가시 속성은 태그가 화면에 보이는 방식을 지정하며, 대표적으로 display 속성이 있습니다.
: 아래와 같이 사용합니다.
#box {
display : none; /* none, block, inline, inline-block 등이 있습니다. */
}| 키워드 | 설명 |
| none | 화면에 보이지 않음 |
| block | 블록 박스 형식으로 지정 |
| inline | 인라인 박스 형식으로 지정 |
| inline-block | 블록과 인라인의 중간 형태로 지정 |
# display 속성
: display 속성에 none 키워드를 적용하면 태그가 화면에서 보이지 않습니다.
: 즉, 중간에 있는 div 태그 전체가 화면에서 사라집니다.
ㅁ none 키워드
<!DOCTYPE html>
<html lang="en">
<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>
#box {
display: none;
}
</style>
</head>
<body>
<span> 예시 1 </span>
<div id="box">display를 none로 설정하면 화면에 보이지 않습니다.</div>
<span> 예시 2 </span>
</body>
</html>
ㅁ block 키워드
: block 키워드는 코드 실행 시 태그를 클릭하면 해당 요소가 선택됩니다.
<!DOCTYPE html>
<html lang="en">
<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>
#box {
display: block;
}
</style>
</head>
<body>
<span> 예시 1 </span>
<div id="box">block 키워드는 블록 박스 형식으로 지정됩니다.</div>
<span> 예시 2 </span>
</body>
</html>
ㅁ inline과 inline-block 키워드 차이
: div 태그의 display 속성에 inline과 inline-block 키워드를 비교해보면 외관상으로는 차이가 없습니다.
<!DOCTYPE html>
<html lang="en">
<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>
#box {
display: inline;
}
</style>
</head>
<body>
<span> 예시 1 </span>
<div id="box">inline 키워드</div>
<span> 예시 2 </span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>
#box {
display: inline-block;
}
</style>
</head>
<body>
<span> 예시 1 </span>
<div id="box">inline 키워드</div>
<span> 예시 2 </span>
</body>
</html>
: 하지만 width 속성, height 속성, margin 속성을 사용하면 차이를 확인할 수 있습니다.
ㅁ inline 키워드
<!DOCTYPE html>
<html lang="en">
<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>
#box {
display: inline;
background-color: red;
width: 100px;
height: 50px;
margin: 10px;
}
</style>
</head>
<body>
<p>inline with margin</p>
<span> 예시 1 </span>
<div id="box">안녕하세요</div>
<span> 예시 2 </span>
<p>inline with margin</p>
</body>
</html>
ㅁ inline-block 키워드
<!DOCTYPE html>
<html lang="en">
<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>
#box {
display: inline-block;
background-color: red;
width: 100px;
height: 50px;
margin: 10px;
}
</style>
</head>
<body>
<p>inline with margin</p>
<span> 예시 1 </span>
<div id="box">안녕하세요</div>
<span> 예시 2 </span>
<p>inline with margin</p>
</body>
</html>
=> display 속성을 사용해 박스에 블록 형식, 인라인 형식, 인라인-블록 형식을 설정할 수 있습니다. 다만, block 형식과 inline 형식은 margin 속성과 padding 속성을 상하좌우 네 방향 모두 지정할 수 있지만, inline 형식은 margin 속성과 padding 속성을 왼쪽과 오른쪽만 지정할 수 있다는 차이점이 있습니다.