반응형
div 태그에서 display 기본 속성이 block입니다. 특징이 width를 100% 모두 차지합니다. 설정된 크기만큼만 공간 차지하게 하는 것이 inline-block입니다. 가운데 정렬하거나 하는 위치 조정할 때 사용 할 수 있어요. inline은 콘텐츠가 있어야 공간을 차지합니다. width나 height 가 영향을 미치지 않는다는 의미입니다.
<html lang="ko">
<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">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" >
<title>NAVER</title>
<style>
html, body {
margin: 0;
padding: 0;
}
#wrap {
text-align: center;
}
#wrap-center {
display: inline-block;
width: 1280px;
background-color: yellow;
}
#container {
height: 2000px;
}
#header-hamburger {
position: relative;
top: 18px;
background-color: blue;
width: 46px;
height: 46px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="wrap-center">
<div id="header">
<div id="header-hamburger"></div>
</div>
<div id="container"></div>
<div id="footer"></div>
</div>
</div>
</body>
</html>가운데 표시하기 위해서 display inline-block 설정으로 div가 가진 크기만큼만 차지하도록 변경합니다.
반응형
'코딩 프로그래밍 > Javascript 자바스크립트' 카테고리의 다른 글
| css position static relative absolute z-index (0) | 2023.06.16 |
|---|---|
| 이미지 스프라이트으로 웹사이트 성능 올리기 패딩과 마진 차이 (0) | 2023.06.16 |
| html head 파비콘 넣기 (0) | 2023.06.16 |
| vscode 에서 웹문서 시작하기 (0) | 2023.06.16 |
| HTML HEAD 태그 제거해서 데이터 확인하는 방법 (0) | 2023.06.03 |
댓글