반응형
네이버를 참조한 기본 쇼핑몰 레이아웃입니다.
<html>
<head>
<title>쇼핑몰</title>
<link href="index.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="header">
<div id="header-area">
<img src="로고 이미지 경로">
</div>
</div>
<div id="body">
<div id="banner"><img src="상단 배너이미지 경로"></div>
<h1>판매 상품들</h1>
<div id="product-list"></div>
</div>
<div id="footer"></div>
</body>
</html>먼저 inex.html파일로 틀을 짜줍니다.
그다음 index.css파일로 스타일을 지정해주세요.
#header {
height: 64px;
display: flex;
justify-content: center;
border-bottom: 1px solid gray;
}
head는 화면을 풀로 채울거기때문에 높이는 임의로 64px 지정하시고
display는 flex로 justify-content는 center로
그리고 하단에 선을 1px gray로 주도록합니다.
body {
margin: 0;
padding: 0;
}body를 지정하지않으면 border 양쪽여백이 생기게 되므로 상단에 위와같이 작업해주세요.
반응형
#header {
height: 64px;
display: flex;
justify-content: center;
border-bottom: 1px solid gray;
}상단 배너도 상단에 100%화면으로 배치될수 있게 설정해주세요.
완성된 css입니다.
body {
margin: 0;
padding: 0;
}
#header {
height: 64px;
display: flex;
justify-content: center;
border-bottom: 1px solid gray;
}
#body {
height: 100%;
width: 1024;
margin: 0 auto;
}
#footer {
height: 200px;
background-color: red;
}
#banner {
height: 300px;
background-color: yellow;
}
#header-area {
width: 1024px;
height: 100%;
margin: 0 auto;
display: flex;
align-items: center;
}
#header-area > img {
width: 128px;
height: 36px;
}
#banner > img {
width: 100%;
}반응형
'퍼블리싱 > html, css, javascript' 카테고리의 다른 글
| node.js 윈도우 설치 및 설치확인방법 React 시작하기 (0) | 2023.10.17 |
|---|---|
| [css] 쇼핑몰 테이블(border)이 이미지에 가려 안보일때 overflow 설정 (0) | 2023.10.13 |
| 네이버를 참조한 기본 쇼핑몰 상품 레이아웃 (두번째) (0) | 2023.08.09 |
| CSS 기본문법, 자주 쓰이는 속성들 (0) | 2023.07.27 |
| HTML 핵심 태그 기본 문법 (0) | 2023.07.25 |