Do it 웹사이트 따라 만들기 - 도서소개 페이지 만들기

# 6-1. 콘텐츠 다루는 방법

• 많은 양의 정보를 담고 있는 콘텐츠는 한눈에 파악할 수 있도록 시각적으로 잘 정리되어 있어야 한다.
• 기술적으로 HTML 코드 또한 시맨틱한 태그로 잘 작성되어 있어야 한다.
• 퍼블리싱할 때 태그의 구조가 해당 정보별로 그룹화되어 있어야 한다.

---

# 6-2. 도서 상세 내용 만들기

1. section id="menu2" 태그가 있는 곳으로 이동 후 section class="content_wrap" 태그의 콘텐츠 제목으로 <h3> 태그를 작성한다.
2. 제목은 실제 화면에 나타나지는 않도록 css로 font-size를 0으로 지정한다.
3. 책상이미지를 background 속성으로 지정한다. .conbox는 공통으로 사용하느 클래스이므로 도서소개 페이지에만 이미지가 지정될 수 있도록 부모 태그에 상속시켜 선택자를 만든 후 background의 속성을 지정한다.

#menu2.content h3{font-size:0px;}
#menu2.content.this .conbox{background:url(../images/bookbg.png) no-repeat -15px 360px; max-width:100%;}

즉, 현재 스타일 지정은 <section id="menu2" class="content"> 태그의 영역이 전체 화면을 차지할 때(도서소개)메뉴를 클릭할 때) 적용된다.

 

1. html에서 상단과 하단 클래스를 각각 div 태그로 생성 후 상단은 book_detail, 하단은 book_rollwrap로 지정한다.
2. 노트북 이미지에 도서의 상세 내용이 들어가도록 acticle 태그를 새엉한 후 notebook 클래스를 지정한다.
3. css에서 .notebook 선택자를 만들고 노트북 이미지 크기인 width와 height를 지정하고, 콘텐츠 바깥쪽으로 여백이 있으며 중앙 정렬이 되도록 margin 속성값을 지정한다.
4. 노트북 이미지를(macbook.png)를 background로 지정한 후 콘텐츠 영역에 맞게 크기를 3번과 같게 지정한다.
5. 배경이미지가 화면의 전체를 차지하도록 max-width의 값을 100%로 지정한다.

.notebook{width:954px; height:650px; margin:100px auto 0 auto; background:url(../images/mackbook.png) no-repeat; background-size:954px; position:relative;}

상세 소개는 적기 전

1. html파일에 노트북 이미지 안에 콘텐츠가 들어갈 수 있는 영역을 <div> 태그로 생성하고 detail_content 클래스를 지정한다.
2. css에서 콘텐츠가 들어갈 영역의 크기를 지정한다.
3. 콘텐츠 영역을 노트북의 흰 영역과 위치를 맞추기 위해 .notebook 클래스는 position을 relative로 지정하고, detail_content 클래스는 absolute로 지정 후 left와 top값을 지정한다.
4. 실제 콘텐츠의 시작 위치를 지정하기 위해 padding의 속성값을 상하 30px로 지정한다.

.detail_content{width:719px; height:453px; position:absolute; left:117px; top:38px; padding:30px 0;}

1. html에서 도서 이미지가 들어갈 영역을 <div> 클래스로 생성한 후 img_book 클래스를 지정하고 이미지를 삽입한다. 이미지의 alt값도 정확히 작성한다.
2. css에서 img_book 태그의 width, float 속성을 지정한다.
3. 도서 이미지 크기를 지정한다.
4. html에서 도서의 상세 내용이 들어갈 section 태그를 생성한 후 book_description 클래스를 지정한다.
5. css 에서 텍스트가 들어갈 book_description 클래스의 width, padding, float 석성을 지정한다.
6. .detail_content의 .img_bookrhk .book_description에서 사용한 float 속성이 다음 영역에는 영향을 주지 않도록 after 가상요소를 주어 float을 해제한다. 
7. html에 <h4> 태그를 생성하여 도서의 제목을 작성한다.
8. 도서의 상세 목록은 <ul> 태그와 <li> 태그를 이용해 작성한다. 목록의 제목이 되는 부분은 <em> 태그로 작성한다.
9. css를 열어 제목과 상세 목록의 속성값을 지정한다.

.img_book{width:270px; float:left;}
.img_book img{width:270px;}
.book_description{width:449px; float:left; padding:20px 20px 20px 40px;}
.detail_content:after{content:""; display:block; clear:both;}
.book_description h4{font-size:31px; font-weight:700; color:#f92d68; line-height:31px;}
.book_description ul li em{font-weight:700}

1. 도서 상세 목록을 나열할 때 사용한 불릿 스타일을 만든다. 이를 위해 ul .bullet_list 클래스를 지정한다.
2. .bullet_list의 상단 여백의 값을 margin-top 속성을 이용해 지정한다.
3. .bullet_list의 li 하단을 margin_bottom으로 지정한고 불릿이 위치할 공간을 위해 padding-left 속성값을 지정한다. color 값을 지정하여 폰트 색상을 변경하고 position 속성을 relative로 지정한다.
4. .bullet_list li를 기준으로 after 가상요소를 생성한다.
5. 지름이 3px인 불릿을 만들기 위해 width와 height를 3px로 지정한다.
6. .border_radius의 속성값을 50%로 지정해 원형을 만들고 background에 색상값을 지정하낟.
7. 도서 상세 내용 목록 왼쪽에 불릿이 위치하도록 position 속성을 absolute로 지정하고 left와 top값을 지정한다.

/*블릿*/
.bullet_list{margin-top:20px;}
.bullet_list li{margin-bottom:5px; padding-left:10px; font-size:12px; color:#3c4147; position:relative;}
.bullet_list li:after{content:""; display:block; width:3px; height:3px; border-radius:50%; background:#3c4147; position:absolute; left:0; top:8px;}

bullet같이 자주 스타일은 css로 만든다.

1. 도서 설명을 추가하기 위해 <p> 태그를 생성하고 point_text 클래스를 지정한 후 내용을 작성한다. 가장 첫줄은 강조를 위해 <strong> 태그를 생성하여 작성한다.
2. point_text 태그의 여백은 padding 속성을 이용해 지정하고 font-size와 color 값을 지정한다.
3. strong 태그의 display 속성을 block으로 지정해 박스 형태로 만들고 background로 과녁 이미지를 작성한다.
4. 과녁 이미지가 왼쪽으로 위치하고 텍스트가 이미지의 끝에서 시작될 수 있도록 padding속성에 값을 지정한다.
5. font-size, font-weight, color값을 지정해 첫 줄의 텍스트 스타일을 만든다.

.point_text{padding:10px 30px 0px 0; font-size:12px; color:#666;}
.point_text strong{display:block; padding:0 0 10px 46px; background:url(../images/point_bg.png) no-repeat; background-size:40px; font-size:14px; font-weight:700; color:#3c4147;}

1. 구매사이트로 이동하기 위해 <a> 태그를 작성하고 .commbtn 클래스의 .pink 클래스를 지정한다. 새로운 창으로 이동하기 위해 target 속성은 blank로 지정한다.(원래 창에서 바로 이동할 때는 target 속성을 self로 지정한다.)
2. 버튼의 모양과 크기는 공통으로 사용할 수 있도록 .commbtn 클래스를 만들어 지정하고, 배경색과 텍스트는 별도의 .pink 클래스를 지정하여 사용한다.

/*버튼*/
.commbtn{width:150px; display:inline-block; height:35px; margin-top:20px; font-size:15px; line-height:35px; border-radius:5px; text-align:center;}
.commbtn.pink{background:#f92d68; color:#fff;}

 

---

# 6-3. 롤링 배너 레이아웃 만들기

1. 하단 영역으로 지정한 .book_rollwrap 클래스의 height와 width를 지정하고 상단 여백을 40px로 하여 중앙 정렬한다.
2. html을 열어 얄쪽으로 이동할 버튼(화살표)을 <button> 태그로 작성한다. 오른쪽은 roll_right 클래스, 왼쪽은 roll_reft 클래스로 지정한다.
3. button의 display 속성을 block으로 바꾸고, 버튼의 width를 20px로 지정하고 height를 영역 전체(book_rollwrap)를 차지하도록 100%로 지정한다. position을 absolute, .book_rollwrap 클래스의 position을 relative로 지정한다.
4. .roll_left 클래스는 왼쪽에 위치하도록 left값을 0으로 지정하고 화살표 이미지를 지정한다.
5. .roll_right 클래스도 오른쪽에 위치하도록 right값을 0으로 지정하고 화살표 이미지를 지정한다.

.book_rollwrap{width:954px; height:150px; margin:40px auto 0 auto; padding:0 20px; position:relative;}
.book_rollwrap > button{display:block; position:absolute; width:20px; height:100%; top:0;}
.book_rollwrap > button.roll_left{background:url(../images/btn_left.png) no-repeat center center; background-size:20px; left:0;}
.book_rollwrap > button.roll_right{background:url(../images/btn_right.png) no-repeat center center; background-size:20px; right:0;}

1. 버튼 안쪽으로 롤링 영역을 감싸는 <div> 태그를 생성한 후 book_roll 클래스를 지정한다.
2. 각 이미지를 목록 태그인 <ul>, <li> 태그로 감싼후 이미지를 작성한다.
3. css의 .book_roll 클래스 전체 영역의 width와 height의 속성값을 100%로 지정하고 overflow 속성값은 hidden으로 지정해 영역 밖의 이미지는 보이지 않게 작성한다. 화면에는 6개의 <li> 태그가 보이고 나머지는 화면에 보이지 않는 영역에 위치하게된다.
4. <ul> 태그 영역은 <li> 태그를 계속해서 추가할 수 있으나, 부모 클래스의 954px만큼만 보이게 된다.(자식 태그의 width값이 100%이므로) <ul> 태그 영역은 .book_roll의 영역보다 크게 width 속성값을 지정해야 book_roll의 영역에 상관없이 <li> 태그가 왼쪽으로 나열되어 클릭할 때마다 <li> 태그가 이동되므로 도서를 볼 수 있다.
5. <li> 태그 영역이 왼쪽으로 나열되게 float 속성을 left로 지정하고, width 속성값을 152px로 지정한다. 도서 이미지는 중앙 정렬되도록 text-align 값을 center로 지정한다.
6. <li> 태그의 이미지 width값을 지정한다.

.book_rollwrap .book_roll{width:100%; height:100%; overflow:hidden;}
.book_rollwrap .book_roll ul{width:1000%;}
.book_rollwrap .book_roll ul li{float:left; width:152px; text-align:center;}
.book_rollwrap .book_roll ul li img{width:100px;}

 

---

# 6-4. 롤링 배너에 스크립트 추가하기

스크립트를 적용해 롤링 배너를 완성한다.

• 왼쪽 버튼 클릭 : click()
• 첫번째 도서가 있는 <li> 태그가 마지막 8번째 <li> 태그 뒤로 요소를 이동 : .eq(index), .insertAfter("")

1. js 파일을 열어 왼쪽 버튼의 클릭 이벤트를 만든다.
2. 이동할 요소로 첫번째 <li> 태그를 선택한다.
3. 앞에서 선택한 첫번째 <li> 태그가 가장 마지막 <li> 태그 뒤로 이동해야 한다. 가상클래스 선택자를 이용해 이동할 위치를 지정한다.
4. 오른쪽 버튼의 스크립트를 위한 오른쪽 버튼 클릭 이벤트를 만든다.
5. 이동할 요소로 가장 마지막 <li> 태그를 선책한다. 마지막 태그가 <li> 태그의 첫번째 요소 앞에 삽입되도록 이동 위치를 지정한다.

$(document).ready(function(){

	//로고 클릭 시
	$(".logo_box").click(function(){
		$("nav li").removeClass("on");
		$(".content").removeClass("prev this next");
		$("#container").css("max-width", "1200px");
	});
	//롤링배너 왼쪽
	$(".roll_left").click(function(){
		$(".book_roll li").eq(0).insertAfter(".book_roll li:last-child");
	});
	//롤링배너 오른쪽
	$(".roll_right").click(function(){
		$(".book_roll li").eq(-1).insertBefore(".book_roll li:first-child");
	});
});

 

---

# 회고

 

롤링 배너 기능은 잘 배워두면 멋있을듯...

롤링 배너 이미지를 클릭하면 사이트 이동이나 상세설명이 나오도록 만들어도 좋을 것 같다.