https://www.youtube.com/watch?v=6KwQo8oqb7Y&list=PLpJDjPqxGWGp3Pitou_dT_DeEIPK_aPxo&index=4
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
justify-content: space-between;
align-items: stretch;
background: #3955bb;
color: #fff;
padding: 20px;
height: 100px;
}
h1 {
display: flex;
align-items: center;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>Tip</h1>
<ul class="menus">
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
</ul>
</div>
</body>
1) display:inline
inline 은 넓이, 높이 속성이 없다.
.menus > li {
display: inline; /* li 블록을 inline으로. w,h 안먹힘*/
width: 3200px;
height: 100px;
}
2) float: left;
수직 맞추기가 어렵다.
3) display: flex; (추천)
부모 클래스 ul 에 주면, 자식 정렬. 수직은 align-items: center; 수평 간격은 justify-content
4) display: grid
/* display: flex */
.menu {
display: flex;
align-items: center;
width: 300px; /* ul의 넓이 */
justify-content: center/space-between/space-around;
/* display: flex */
.menu {
display: flex;
align-items: center;
width: 300px; /* ul의 넓이 */
justify-content: center/space-between/space-around;
/* display: grid */
.menus {
display: grid;
grid-template-columns: repeat(4, 1fr);
width: 500px;
grid-gap: 10px;
}
.menus > li {
border: 1px solid #fff;
}
.menus > li:nth-child(1) {
}
.menus > li:nth-child(2) {
grid-column: 2/5;
grid-row: 1/3;
}
.menus > li:nth-child(3) {
}
.menus > li:nth-child(4) {
grid-column: 1/5;
}'html_css' 카테고리의 다른 글
| display:flex, position:relative (0) | 2023.01.12 |
|---|---|
| css 가상 선택자: 형제 + ~, a[href^="http"] 등 (0) | 2023.01.09 |
| html에 data-*사용법 (0) | 2023.01.06 |
| css 하이라이트 hover , z-index, transition (0) | 2022.11.07 |
| 스벅 예제: css 포지션, 애니메이션, JS 스크롤 이벤트 (0) | 2022.11.06 |
댓글