1.display 속성
- block - block 특성을 갖는 요소로 지정
- inline - inline 특성을 갖는 요소로 지정
- inline-block - inline-block 특성을 갖는 요소로 지정
- none - 해당 요소를 화면에 표시하지 않는다 (공간도 없어짐)
모든 HTML 요소는 기본적으로 block 이나 inline 특성을 기본값으로 갖는다.
1.1 block 레벨 요소
- 항상 새로운 라인에서 시작한다.
- 화면 크기 전체의 가로폭을 차지한다.
- width , height , margin , padding 속성 지정이 가능하다
- block 레벨 요소안에 inline 레벨 요소를 포함할 수 있다.
- block 레벨 요소의 예
divh1~h6olulliphrtableform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.first{
background-color: rgb(165, 103, 103);
}
.second{
background-color: rgb(137, 173, 228);
width: 300px;
height: 300px;
margin: 50px;
padding: 100px;
}
</style>
<title>Document</title>
</head>
<body>
<div class = "first">
<h2>블록 레벨 요소</h2>
</div>
<div class = "second">
<h2>width , height , padding , margin 지정가능</h2>
</div>
</body>
</html>
1.2 inline 레벨 요소
- 새로운 라인에서 시작하지 않으며 문장의 중간에 들어갈 수 있다.
- content의 크기만큼 자리를 차지한다.
- width, height, margin-top , margin-bottom 속성을 지정할 수 없다.
spanastrongimgbrinputselecttextareabutton
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
span{
background-color: blue;
color: white;
}
</style>
<title>Document</title>
</head>
<body>
<h1><span>Hello</span> World</h1>
</body>
</html>
1.3 inline-block 레벨 요소
block과 inline레벨 요소의 특징을 모두 갖는다. inline처럼 한 줄에 표현되며 width, height, margin 속성을 지정할 수 있다.
2.visibility 속성
- visible - 해당 요소를 보이게 한다(기본값)
- hidden - 해당 요소를 보이지 않게 한다(공간은 남음)
- collapse - table 요소에 사용하며 행이나 열을 보이지 않게 한다.
- none - table요소의 row나 column을 보이지 않게 한다.(크롬 동작 X)
3.opacity 속성
opacity 속성은 요소의 투명도를 결정한다.
0은 투명 1.0은 불투명을 의미한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div{
background-color: blue;
height: 300px;
width: 300px;
opacity: 0.3;
}
</style>
<title>Document</title>
</head>
<body>
<div></div>
</body>
</html>
