CSS CSS display 속성 - 위치 지정
페이지 정보
작성자 모던DS
조회 1회 작성일 26-02-26 03:01
조회 1회 작성일 26-02-26 03:01
본문
CSS display 속성
display는 웹 요소가 화면에서 어떻게 렌더링되고 다른 요소들과 어떻게 상호작용할지를 결정하는 가장 중요한 속성입니다.
주요 속성값 설명
block: 가로 한 줄을 전체로 차지하며, 항상 새로운 줄에서 시작합니다. (예:
<div>,<h1>,<p>)inline: 콘텐츠의 너비만큼만 자리를 차지하며, 줄 바꿈 없이 옆으로 나열됩니다. 크기(
width,height)를 지정할 수 없습니다. (예:<span>,<a>)inline-block:
inline처럼 옆으로 나열되면서도block처럼 크기를 지정할 수 있는 하이브리드 방식입니다.flex: 부모 요소를 Flex Container로 만들어 내부 아이템들을 1차원(행 또는 열)으로 유연하게 배치합니다.
grid: 부모 요소를 Grid Container로 만들어 행과 열을 가진 2차원 레이아웃을 구성합니다.
none: 요소를 화면에서 완전히 제거하며, 차지하던 공간도 사라집니다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS display 속성</title>
<style>
/* Do it! li 요소를 가로로 나란히 배치하기 */
nav ul {
list-style:none; /* 불릿이나 숫자 번호 없앰 */
}
nav ul li {
display:inline-block; /* 블록 레벨 요소 성격을 가지면서 가로로 배치 */
width: 100px; /* 너비 - 100px */
height: 40px; /* 높이 - 40px */
line-height: 40px; /* 세로로 중앙 배치 */
text-align: center; /* 가로로 중앙 배치 */
margin:10px; /* 마진 - 10px */
border:1px solid #222; /* 테두리 - 1px 검은 실선 */
}
a {
text-decoration: none; /* 텍스트 링크 밑줄 없애기 */
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
<li><a href="#">메뉴 4</a></li>
</ul>
</nav>
</body>
</html>
- 이전글CSS float 속성 - 위치 지정 26.02.26
- 다음글CSS border 속성 26.02.26