반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배치 방법</title>
<style>
/*
display 속성 - 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용 가능
display 속성값
block - 인라인 레벨 요소를 블록 레벨 요소로 만듬
inline - 블록 레벨 요소를 인라인 레벨 요소로 만듬
inline-block - 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있고,
마진과 패딩을 지정할 수 있음
none - 해당 요소를 화면에 표시하지 않음
*/
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
padding: 20px;
margin: 0 20px;
border: 1px solid #222;
}
</style>
</head>
<body>
<nav>
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
</ul>
</nav>
</body>
</html>
반응형
'IT > CSS' 카테고리의 다른 글
| CSS - 2일차 box-width, border-radius, box-shadow (0) | 2023.05.11 |
|---|---|
| CSS - 2일차 float,clear (0) | 2023.05.11 |
| CSS - 2일차 position (0) | 2023.05.11 |
| CSS - 2일차 padding, margin (0) | 2023.05.11 |
| CSS - 1일차 list-style (0) | 2023.05.10 |