1. block-level
- display : block;
- block 레벌 요소의 기본값, 이 속성이 적용되면 해당 요소는 width와 height를 적용할 수 있음
- 이 요소는 하나의 문단으로 처리되기 때문에, 태그 다음에 나타나는 요소는 자동으로 줄바꿈 됨
2. inline-level
- display : inline;
- inline 레벨 요소의 기본값
- 이 속성이 적용되면 해당 요소는 width, height를 부여하더라도 적용되지 않음
- 이 요소는 하나의 단어나 강조 구문처럼 인식되기 때문에, 태그 다음의 요소는 줄바꿈되지 않음
3. 공통
- display:none;
- 이 속성이 적용된 요소는 화면상에 표시되지 않음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div, span {
width: 100px;
height: 50px;
}
div {
background-color: orange;
display: inline;
}
span {
background-color: plum;
display: block;
}
</style>
</head>
<body>
<div>DIV 태그(1)</div>
<div>DIV 태그(2)</div>
<span>SPAN 태그 (1)</span>
<span>SPAN 태그 (2)</span>
</body>
</html>
4. display 속성에 대한 inline-block값
- block-level 요소의 특성과 inline-level 요소의 특성을 혼합한 형태
- block : 크기 지정 가능
- inline : 문장으로 형성됨
- 즉, 크기를 지정할 수 있는 inline-level 요소로 처리
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
display: inline-block;
}
#box1 {
background-color: tomato;
}
#box2 {
background-color: powderblue;
}
</style>
</head>
<body>
<div id="box1">박스1</div>
<div id="box2">박스2</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.link {
padding: 0 15px;
display: block;
text-decoration: none;
border-top: 1px dotted #ccc;
line-height: 50px;
width: auto;
}
a:last-child {
border-bottom: 1px dotted #ccc;
}
a:hover {
background-color: yellow;
}
</style>
</head>
<body>
<a href="#" class="link">메뉴 항목1</a>
<a href="#" class="link">메뉴 항목2</a>
<a href="#" class="link">메뉴 항목3</a>
<a href="#" class="link">메뉴 항목4</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin : 10px;
}
.link {
font: 16px "굴림";
padding-top: 20px;
padding-bottom : 20px;
display: block;
border-bottom: 1px solid #ccc;
text-decoration: none;
color: black;
}
.link:first-child {
border-top: 1px solid #ccc;
}
.link:hover {
background-color: powderblue;
}
.subject {
font-size: x-large;
}
.link span {
display: block;
}
</style>
</head>
<body>
<a href="#" class="link">
<span class="subject">HTML</span>
<span class="desc">웹 페이지를 제작하기 위한 뼈대 구성</span>
</a>
<a href="#" class="link">
<span class="subject">HTML</span>
<span class="desc">HTML로 구성된 뼈대에 옷을 입히는 언어</span>
</a>
<a href="#" class="link">
<span class="subject">JavaScript</span>
<span class="desc">동적인 기능을 추가하는 언어</span>
</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
background-color: tomato;
list-style: none;
padding: 0;
margin: 0;
}
li {
background-color: powderblue;
}
</style>
</head>
<body>
목록 정의 테스트
<ul>
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
border-bottom: 1px solid #ccc;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
li:first-child {
border-top: 1px solid #ccc;
}
li:hover {
background-color: greenyellow;
}
li a {
display: block;
}
a {
text-decoration: none;
color: black;
}
div {
font-weight: bold;
}
</style>
</head>
<body>
<h1>서비스 목록</h1>
<p>
사용하실 서비스를 선택하세요
</p>
<ul>
<li><a href="#">메일</a></li>
<li><a href="#">블로그</a></li>
<li><a href="#">카페</a></li>
<li><a href="#">지식인</a></li>
<li><a href="#">쇼핑</a></li>
</ul>
<div>
copyright 2024 codingbox.com
</div>
</body>
</html>
