웹페이지
CSS STEP 10 - Display
IT의 큰손
2023. 4. 17. 09:37
728x90
★ Display
- 요소의 출력 방식
- display : none | inline | block | inline-block;
- none : 화면에서 안보이게 함
- inline : 인라인 태그로 출력
- block : 블럭 태그로 출력
- inline-block : 인라인 태그처럼 출력 + 너비/높이 지정 가능
- ex) 사용법
.box {
border: 1px solid black;
display : inline;
}
.link {
border : 1px solid black;
display : block;
}
#menu li {
border: 3px solid red;
display : inline-block;
width : calc(20% - 6px); /*calc(자동으로 계산해주는 것)*/
}
■ ex1) 기본사용 ex)
<!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 {
border: 1px solid black;
display : inline;
}
.link {
border : 1px solid black;
display : block;
width : 200px;
height: 100px;
}
</style>
</head>
<body>
<h1>블럭 태그</h1>
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
<h1>인라인 태그</h1>
<a href="#" id="link1" class="link">링크1</a>
<a href="#" id="link2" class="link">링크2</a>
<a href="#" id="link3" class="link">링크3</a>
</body>
</html>- 실행결과
■ ex2) 메뉴 만들기
- cursor : pointer = 마우스 커서가 가면 손가락 모양으로 바뀜
- hover : 마우스가 올려지면 해당 코드 실행
<!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>
#menu {
/* border: 5px solid blue; */
padding : 0px;
}
#menu li {
border: 3px solid red;
display : inline-block;
width : calc(20% - 16px);
text-align : center;
padding : 5px;
cursor : pointer; /* 마우스 커서가 가면 손가락 모양으로 바뀜 */
}
#menu li:hover {
background-color : yellow;
}
</style>
</head>
<body>
<!-- 메뉴 만들기 -->
<ul id="menu">
<li>메뉴</li><li>메뉴</li><li>메뉴</li><li>메뉴</li><li>메뉴</li>
</ul>
</body>
</html>- 실행결과2
728x90