[HTML/CSS] div요소와 box안에 box이미지 넣어서 반응형 데스크탑 모바일 페이지 만들기
오늘 만들어볼 예제는 다음 사진과 같다.
먼저, 예제를 분석해보자.
왼쪽은 데스크탑형이고 오른쪽은 모바일형이다.
1. 반응형 때문에 HTML의 table 표 태그를 사용하는 것보다 CSS로 만드는 것이 좋겠다.
2. 박스안에 박스를 만들고 그 박스안에 이미지와 텍스트를 넣어야한다.
div 태그들을 사용해서 박스안에 박스를 만들어주고자 한다.
1. HTMl 기본 형식을 갖추고 body에 div 태그를 통해 이미지를 불러와주었다.
- div class=box로 묶어서 css에서 스타일을 한번에 적용할 수 있게 만들어주었다.
- 이미지폴더 안에 p1~p6을 음식사진으로 지정해두고 이미지를 불러왔다.
<div class="box">
<img src="images/p1.jpg"><br>
<strong>삼겹살</strong><br>
</div>
<div class="box">
<img src="images/p2.jpg"><br>
<strong>비빔밥</strong>
</div>
<div class="box">
<img src="images/p3.jpg"><br>
<strong>치킨</strong>
</div>
<div class="box">
<img src="images/p4.jpg"><br>
<strong>갈비찜</strong>
</div>
<div class="box">
<img src="images/p5.jpg"><br>
<strong>치즈닭갈비</strong>
</div>
<div class="box">
<img src="images/p6.jpg"><br>
<strong>김치찌개</strong>
</div>
2. <!-- 주석 --!> 을 보면 아시겠지만 div 태그를 통해 바깥쪽 박스와 안쪽박스를 만들어주었다.
</div> 각 div태그 닫는 것은 이미지박스를 모두 감싼 맨 뒤로 옮기고 각각 주석을 달아서 헷갈리지 않도록 해준다.
<body>
<div id="boxOut1"> <!-- 바깥쪽 박스 -->
<h1 class="title">
외국인에게 추천하는 한식 메뉴 <br> Best 6
</h1>
<div class="boxOut"> <!-- 안쪽 박스 -->
<div class="box">
<img src="images/p1.jpg"><br>
<strong>삼겹살</strong><br>
</div>
<div class="box">
<img src="images/p2.jpg"><br>
<strong>비빔밥</strong>
</div>
<div class="box">
<img src="images/p3.jpg"><br>
<strong>치킨</strong>
</div>
<div class="box">
<img src="images/p4.jpg"><br>
<strong>갈비찜</strong>
</div>
<div class="box">
<img src="images/p5.jpg"><br>
<strong>치즈닭갈비</strong>
</div>
<div class="box">
<img src="images/p6.jpg"><br>
<strong>김치찌개</strong>
</div>
</div> <!-- 안쪽 박스 닫기 -->
</div> <!-- 바깥쪽 박스 닫기 -->
</body>
3. 이제 CSS 스타일 작업에 들어가보도록 하겠다.
1) 먼저, box-sizing: border-box;를 통해서 모든 요소를 공통적으로 해준다.
2) 다음과 같이 .box:nth-child() 를 통해서 이미지를 3개씩 배열할 수 있도록 해준다.
ex) 1 2 3 -> 내가 필요한 것은 4,7,10 ... 이기 때문에 3의 배수+1 임
4 5 6 => 그러므로 .box:nth-child(3n+1) 을 사용했다.
7 8 9
10 11 12
3) boxOut1 바깥쪽 전체박스는 id로 묶어주었기 때문에 CSS에서 #boxOut1로 표기했고,
boxOut 안쪽 박스는 class로 묶어주었기 때문에 CSS에서 .boxOut으로 표기했다.
각 라운드와 정렬을하며 백그라운드 이미지로 사진을 깔아주었다.
4) 마지막으로 반응형 작업을 시작을 선언하였다.
420px이 되었을 때 줄바꿈을 해제해주었다.
(모바일 크기 기준)
▼ Style 안의 내용 총 정리된 것 ▼
<style>
* { /*모든 요소 공통사항*/
box-sizing: border-box;
}
#boxOut1 {
background-image: url(images/bg.jpg); /*배경이미지*/
margin: auto;
padding: 30px;
border-radius: 20px;
overflow:auto;
width:90%;
background-repeat: no-repeat; /*배경 반복 안함*/
background-size: cover; /*배경 이미지 채우기*/
background-position: center; /*배경 이미지 가운데 맞추기*/
background-attachment: fixed; /*배경 이미지 고정*/
}
.title {
text-align: center;
}
.boxOut { /*바깥쪽 전체 박스*/
width:90%; /*화면의 90%*/
overflow:auto;
border-radius: 20px;
padding: 30px;
margin: auto; /*박스 가운데 정돈*/
background-color: rgb(255, 254, 247);
}
.box { /*box 클래스 공통(6개)*/
width:30%;
/* border:1px solid #aaa; */
float: left; /* 가로연속 배치/ 크기 조절하면 자동으로 배치됌(나는 왼쪽으로 배치할테니 그 아래로 내 옆으로 배치되어도 괜찮다는 의미)*/
margin-right: 30px;
margin-bottom: 30px;
text-align:left; /*내부 정렬*/
}
.box:nth-child(3n+1) { /*3의 배수+1번째(4,7,10..)*/
clear:left; /*float:left 기능 제거*/
}
.box > img { /*박스 내부의 이미지*/
box-shadow: 5px 5px 5px #aaa; /*그림자 효과(가로, 세로, 흐림, 색상)*/
border-radius: 20px;
width: 100%
}
/*반응형 작업 시작*/
@media all and (max-width:420px) {
/*.box:nth-child(3n+1) {float:left;}*/
.box:nth-child(3n+1) {clear:none;} /*420이하에서는 3,6,9단위의 줄바꿈을 해제함*/
.box {width: 40%}
.box:nth-child(2n+1) {clear:left;}
}
</style>
'IT > 웹코딩기초' 카테고리의 다른 글
| [CSS] Transition Animation 광주시 마우스 닿으면 위로 올라가며 바뀌는 로고 애니메이션 효과/HTMl 파일 공유 (0) | 2023.05.12 |
|---|---|
| [HTMl/CSS] 헤더, 메인, 푸터 섹션 나누기 / 시멘틱 태그 레이아웃 예제 (0) | 2023.05.10 |
| [CSS] 링크선택자와 가상 클래스 선택자 요소와 순서 정리 (0) | 2023.05.08 |
| [HTML] 초보자에게 유용한 비주얼 스튜디오 코드 단축키 태그 정리 (0) | 2023.05.05 |
| [코딩기초] VisualStudioCode 비주얼 스튜디오 코드 다운로드 및 꼭 해야하는 기본설정 & 셋팅방법 (0) | 2023.05.01 |
댓글