728x90
반응형
ㄱ. none
태그가 화면에서 보이지 않음. div 태그 전체가 화면에서 사라짐
<title>Document</title>
<style>
#box {
display:none;
}
</style>
</head>
<body>
<span>더미객체</span>
<div id="box">대상객체</div>
<span>더미객체</span>
</body>
</html>
대상객체
더미객체
ㄴ. 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>더미객체</span>
<div id="box">대상객체</div>
<span>더미객체</span>
</body>
</html>
대상객체
더미객체
ㄷ. 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;
}
</style>
</head>
<body>
<span>더미객체</span>
<div id="box">대상객체</div>
<span>더미객체</span>
</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;
}
</style>
</head>
<body>
<span>더미객체</span>
<div id="box">대상객체</div>
<span>더미객체</span>
</body>
</html>
대상객체
더미객체
728x90
반응형
'HTML／CSS／JS' 카테고리의 다른 글
| [HTML5] 12. 수평 정렬 레이아웃 (overflow, hidden,float) (0) | 2022.10.18 |
|---|---|
| [HTML5] 10. 배경/ 글자 속성 (background,font-family,text-decoration 등) (0) | 2022.10.17 |
| [HTML5] 08. 박스속성 (margin, padding) (0) | 2022.10.17 |
| [HTML5] 07. 반응/상태 선택자 (:hover, :active, :focus, :enabled, :disabled) (0) | 2022.10.17 |
| [HTML5] 06. div, span, 시맨틱태그 (0) | 2022.10.17 |
728x90
반응형
ㄱ. none
태그가 화면에서 보이지 않음. div 태그 전체가 화면에서 사라짐
<title>Document</title>
<style>
#box {
display:none;
}
</style>
</head>
<body>
<span>더미객체</span>
<div id="box">대상객체</div>
<span>더미객체</span>
</body>
</html>
대상객체
더미객체
ㄴ. 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>더미객체</span>
<div id="box">대상객체</div>
<span>더미객체</span>
</body>
</html>
대상객체
더미객체
ㄷ. 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;
}
</style>
</head>
<body>
<span>더미객체</span>
<div id="box">대상객체</div>
<span>더미객체</span>
</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;
}
</style>
</head>
<body>
<span>더미객체</span>
<div id="box">대상객체</div>
<span>더미객체</span>
</body>
</html>
대상객체
더미객체
728x90
반응형
'HTML／CSS／JS' 카테고리의 다른 글
| [HTML5] 12. 수평 정렬 레이아웃 (overflow, hidden,float) (0) | 2022.10.18 |
|---|---|
| [HTML5] 10. 배경/ 글자 속성 (background,font-family,text-decoration 등) (0) | 2022.10.17 |
| [HTML5] 08. 박스속성 (margin, padding) (0) | 2022.10.17 |
| [HTML5] 07. 반응/상태 선택자 (:hover, :active, :focus, :enabled, :disabled) (0) | 2022.10.17 |
| [HTML5] 06. div, span, 시맨틱태그 (0) | 2022.10.17 |
