html구조
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>도서 패널 레이아웃</title>
<!-- 외부 CSS 파일 로딩 -->
</head>
<body>
<!-- 1. 도서 패널 전체 레이아웃 시작 -->
<div id="book_panel">
<!-- 1-1. 도서/추천버튼 이미지 패널 -->
<div id="left_img_section">
<!-- 1-2. 도서 이미지 패널 -->
<div id="book_img_section">
<img src="img/book.jpg" id="book_img">
</div>
<!-- 1-3. 추천 버튼 이미지 -->
<div id="send_mail_img">
<a href="#">
<img src="img/btn_send_mail.gif">
</a>
</div>
</div>
<!-- 2. 도서 상세 설명 패널 시작 -->
<div id="book_detail_section">
<!-- 2-1. 도서 상세 설명 "내부" 패널 시작 -->
<div id="book_detail_inner">
<!-- 2-2. 도서 제목 -->
<div id="book_title">
Sound Materials
</div>
<!-- 2-3. 도서 발행국 -->
<div id="book_nation" class="section_row">
<img src="img/subject_book_country.gif">
네덜란드
</div>
<!-- 2-4. 도서 발행년도 -->
<div id="book_year" class="section_row">
<img src="img/subject_book_year.gif">
2017년
</div>
<!-- 2-5. 출판사 -->
<div id="book_publisher" class="section_row">
<img src="img/subject_book_publisher.gif">
Frame Publishers
</div>
<!-- 2-6. 도서 사이즈 -->
<div id="book_size" class="section_row">
<img src="img/subject_book_size.gif">
190mm X 250mm
</div>
<!-- 2-7. 커버 타입 -->
<div id="book_cover" class="section_row">
<img src="img/subject_book_covertype.gif">
Soft Cover
</div>
<!-- 2-8. 페이지 수 -->
<div id="book_page_num" class="section_row">
<img src="img/subject_book_page.gif">
288 page
</div>
<!-- 2-9. ISBN -->
<div id="book_isbn" class="section_row">
<img src="img/subject_book_isbn.gif">
9789492311016
</div>
<!-- 2-10. 예상 출고 -->
<div id="book_release_date" class="section_row">
<img src="img/subject_book_delivery.gif">
5~7일 이내
</div>
<!-- 2-11. 가격 및 적립금 -->
<div id="book_price_mileage" class="section_row dotted-line">
<img src="img/subject_book_price.gif">
52,000(원)
<img src="img/ico_reserve_volume.gif">
<span style="color:orange">1,040(원)</span>
</div>
<!-- 2-12. 주문 수량 -->
<div id="book_order_num" class="section_row">
<img src="img/subject_book_quantity.gif">
1권
</div>
<!-- 2-13. 도서 주문 메뉴 -->
<div id="book_order_btn" class="section_row">
<a href="#"><img src="img/btn_book_cart.gif"></a>
<a href="#"><img src="img/btn_book_buying.gif"></a>
<a href="#"><img src="img/btn_book_mybox.gif"></a>
</div>
</div>
<!-- 2-1. 도서 상세 설명 "내부" 패널 끝 -->
</div>
<!-- 2. 도서 상세 설명 패널 끝 -->
</div>
<!-- 1. 도서 패널 전체 레이아웃 끝 -->
</body>
</html>css
@charset "UTF-8";
/*
1. 도서 패널 전체 레이아웃 (ID : book_panel)
1) 너비 : 600px;
2) 높이 : 375px;
3) 배경색 : #F7EFE7
4) 외곽선 : 두께(1px) 형태(실선) 색상(#ccc)
*/
/*
1-1. 도서 이미지/추천버튼 패널 (좌측) (ID : left_img_section)
1) 플로팅 효과 : 좌측
2) 너비 : 280px;
3) 높이 : 375px;
4) 배경색 : #F7EFE7 (생략 가능)
*/
/*
1-2. 도서 이미지 패널 (ID : book_img_section)
1. 포지션 : static
2. 너비 : 280px
3. 높이 : 350px;
4. 정렬 : 중앙 정렬
*/
/*
※ 도서 이미지 (ID : book_img)
: 그림자(음영) 효과
=> 5px 5px 5px #999
*/
img#book_img
{
box-shadow : 5px 5px 5px #999;
/* 1px : 우측 이동. "-" (음수)는 좌측 이동
10px : 하단으로 이동 : 음수일 경우는 상단 이동
2px : 그림자를 흐리게 할 범위.
값이 증가하면 blur 효과가 발생. 생략 가능.*/
}
/*
1-3. 추천 버튼 이미지 (ID : send_mail_img)
1) 포지션 : static
2) 너비 : 320px
3) 배경색 : #F7EFE7
4) 정렬 : 중앙 정렬
*/
/*
2. 도서 상세 설명 패널 (ID : book_detail_section)
1) 플로팅 효과 : 좌측
2) 너비 : 320px
3) 높이 : 375px
4) 배경색 : #F7EFE7
5) 글꼴 크기 : 9pt
6) 글꼴 종류 : 나눔고딕, 굴림체
7) 글꼴색 : 회색
*/
/*
2-1. 도서 상세 설명 "내부" 섹션 (ID : book_detail_inner)
1) 너비 : 290px
2) 높이 : 355px
3) 외부 여백(마진) : 상하(10px) 좌우(15px)
*/
/*
2-2. 도서 제목 (ID : book_title)
1) 정렬 : 좌측 (생략 가능)
2) 들여쓰기 : 1em
3) 높이 : 25px
4) 배경색 : #F7EFE7 (생략 가능)
5) 외곽선 두께/형태/색 : 하(1px) 상/우/좌(각각 0px) 점선 회색(#333)
6) 글꼴 두께 : 굵게
7) 글꼴 크기 : 11pt
8) 글꼴색 : #219EB5
9) 내부 간격(상단) : 5px
*/
/*
※ 도서 상세 패널 각 행(Row)의 셀(cell) (class : section_row)
1) 너비 : 290px
2) 높이 : 20px
3) 내부 간격(상단) : 8px
4) 들여쓰기 : 1em
*/
/*
※ 행(row) 셀(cell) 구분선(점선) (class : dotted-line)
1) 외곽선 형태 : 점선
2) 외곽선 두께 : 상(1px) 우/하/좌(각각 0px)
*/css 답
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>도서 패널 레이아웃</title>
<!-- 외부 CSS 파일 로딩 -->
</head>
<body>
<!-- 1. 도서 패널 전체 레이아웃 시작 -->
<div id="book_panel">
<!-- 1-1. 도서/추천버튼 이미지 패널 -->
<div id="left_img_section">
<!-- 1-2. 도서 이미지 패널 -->
<div id="book_img_section">
<img src="img/book.jpg" id="book_img">
</div>
<!-- 1-3. 추천 버튼 이미지 -->
<div id="send_mail_img">
<a href="#">
<img src="img/btn_send_mail.gif">
</a>
</div>
</div>
<!-- 2. 도서 상세 설명 패널 시작 -->
<div id="book_detail_section">
<!-- 2-1. 도서 상세 설명 "내부" 패널 시작 -->
<div id="book_detail_inner">
<!-- 2-2. 도서 제목 -->
<div id="book_title">
Sound Materials
</div>
<!-- 2-3. 도서 발행국 -->
<div id="book_nation" class="section_row">
<img src="img/subject_book_country.gif">
네덜란드
</div>
<!-- 2-4. 도서 발행년도 -->
<div id="book_year" class="section_row">
<img src="img/subject_book_year.gif">
2017년
</div>
<!-- 2-5. 출판사 -->
<div id="book_publisher" class="section_row">
<img src="img/subject_book_publisher.gif">
Frame Publishers
</div>
<!-- 2-6. 도서 사이즈 -->
<div id="book_size" class="section_row">
<img src="img/subject_book_size.gif">
190mm X 250mm
</div>
<!-- 2-7. 커버 타입 -->
<div id="book_cover" class="section_row">
<img src="img/subject_book_covertype.gif">
Soft Cover
</div>
<!-- 2-8. 페이지 수 -->
<div id="book_page_num" class="section_row">
<img src="img/subject_book_page.gif">
288 page
</div>
<!-- 2-9. ISBN -->
<div id="book_isbn" class="section_row">
<img src="img/subject_book_isbn.gif">
9789492311016
</div>
<!-- 2-10. 예상 출고 -->
<div id="book_release_date" class="section_row">
<img src="img/subject_book_delivery.gif">
5~7일 이내
</div>
<!-- 2-11. 가격 및 적립금 -->
<div id="book_price_mileage" class="section_row dotted-line">
<img src="img/subject_book_price.gif">
52,000(원)
<img src="img/ico_reserve_volume.gif">
<span style="color:orange">1,040(원)</span>
</div>
<!-- 2-12. 주문 수량 -->
<div id="book_order_num" class="section_row">
<img src="img/subject_book_quantity.gif">
1권
</div>
<!-- 2-13. 도서 주문 메뉴 -->
<div id="book_order_btn" class="section_row">
<a href="#"><img src="img/btn_book_cart.gif"></a>
<a href="#"><img src="img/btn_book_buying.gif"></a>
<a href="#"><img src="img/btn_book_mybox.gif"></a>
</div>
</div>
<!-- 2-1. 도서 상세 설명 "내부" 패널 끝 -->
</div>
<!-- 2. 도서 상세 설명 패널 끝 -->
</div>
<!-- 1. 도서 패널 전체 레이아웃 끝 -->
</body>
</html>'HTML > HTML,CSS Ex' 카테고리의 다른 글
| 과제 : 상품 패널 완성하기-2 (0) | 2022.07.07 |
|---|---|
| 2022년 7월 1일 수업중 과제-2 : 반응형 웹 카페 완성하기 (0) | 2022.07.01 |
| Ex02 (0) | 2022.06.29 |
| 2022년 6월 28일 수업중 과제 : 이미지(image) 포함된 문단 완성(CSS) (0) | 2022.06.28 |
| 수업중 예제 (0) | 2022.06.27 |
