Do it 웹사이트 따라 만들기 - FAQ 페이지 만들기

# 8-1. 사용자 인터페이스 이해하기

사용자 인터페이스란?

• 사용자와 시스템이 정보를 주고받기 위해 상호작용을 하는 의사소통 시스템
• 사용자를 위해 편의성을 고려하고, 시맨틱 마크업을 통해 시스템 배려를 고려한다.
• 좋은 사용자 인터페이스 만들기
  • 간결하고 직관적으로 표현하기 
  • 일관성 있게 구현하기
  • 명확하게 구현하기

---

# 8-2. 아코디언 형태로 FAQ 만들기

1. html 파일의 <section id="menu3"> 태그에서 <h3> 으로 제목을 작성하고 .tit_faq 클래스를 지정한다.
2. 제목과 제목 설명이 다른 스타일이 적용되도록 다른 태그를 사용한다. 제목은 <strong>, 설명은 <span> 태그로 작성한다.
3. css파일에서 .tit_faq의 선택자로 작성한 후 공통인 폰트 색상은 상속을 받아 지정한다.
4. <strong> 태그에 font-size와 padding-right 속성값을 지정한다. <span> 태그 역시 font-size를 지정하고 <h3> 태그의 font-weight에 속성값을 지정하여 두께를 정한다.
5. css의 가상요소(:before)를 이용하여 꾸밈 요소로 이미지를 넣는다. 이미지의 position 속성값은 absolute로 지정하고 .tit_faq 클래스에 position 속성값을 relative로 지정하여 텍스트 영역을 기준으로 이미지가 위치를 잡을 수 있게한다.
6. 이미지의 크기 만큼 width와 height 속성값을 지정하고 경로를 설정한다.

.tit_faq{color:#fff; position:relative;}
.tit_faq strong{font-size:25px; padding-right:10px;}
.tit_faq span{font-size:14px; font-weight:400}
.tit_faq:before{content:""; display:block; position:absolute; width:120px; height:150px; background:url(../images/faq_boy.png) no-repeat; right:0px; top:36px;}

 

1. 아코디언 목록 전체를 감싸는 영역을 <div> 태그로 작성하고 클래스명은 accodio_box로 지정한다.
2. 순서가 있는 목록이므로 <ol> 태그와 <li> 태그를 작성한다.
3. 게시글의 제목은 <h4> 태그로 작성하고, Q1 글자는 다른 스타일로 디자인하기 위해 <span> 태그에 작성하여 번호와 제목을 구분한다. 내용은 <p> 태그로 작성하고 링크가 필요한 부분은 <a> 태그로 작성한다.
4. 아코디언은 글 제목을 클릭하면 제목과 내용이 함께 보인다. 제목을 클릭한 상태일 때 <li> 태그에 on 클래스를 지정한다. 그리고 FAQ 페이지가 처음 열릴 때 항상 첫 번째 게시글의 제목과 내용을 보도록 첫 번째 <li> 태그에 on 클래스를 작성한다.

css 적용 전

 

1. css 파일에 .accordic_box 클래스 선택자를 만들고 제목과 목록 사이의 여백을 주기 위해 margin-top 속성값을 170px로 지정한다.
2. <li> 태그에 스타일을 입히기 위해 <li> 태그를 .accordic_box 클래스 자손의 선택자로 작성한다. border-top의 속성값을 지정하여 상단에만 라인이 보이도록 한다.
3. <h4> 태그를 .accordic_box 클래스의 자손으로 선택자를 지정하고 <h4> 태그의 padding, margin 속성값을 지정한다. background 속성으로 오른쪽에 불릿 이미지를 지정한다. 사용자가 제목을 클릭하면 된다는 것을 인지할 수 있도록 cursor 속성값을 pointer로 지정한다.(커서가 제목 영역에 오면 손가락 모양으로 바뀐다.)
4. 목록의 숫자(Q1, Q2) 스타일을 지정하기 위해 <span> 태그를 선택자로 만들고 스타일을 지정한다.
5. 마탄가지로 <p> 태그를 .accordio_box 클래스를 기준으로 태그 순서대로 상속하여 선택자를 지정한다. 텍스트 높이를 auto로 지정하여 내용이 늘어나더라고 영역 밖으로 내용이 넘치지 않게 한다. 이미지가 들어갈 여백과 본문의 여백을 지정한다.
6. FAQ 게시판에 있는 4개의 목록에 있는 이미지가 모두 다르다. 목록들이 순서가 있고 바뀌지 않으므로 :nth-child를 사용하여 각 목록에 background-image의 이미지 경로 위치를 지정하고 position을 지정한다. 동일한 스타일은 .accordio_box ol li p에 한 번만 지정한다.
7. 선택자에 .on을 추가하여 열린 상태일 때 스타일이 적용되게 하고, 이전 상태는 선택자를 .accordio_box ol li p로 다시 작성한다. 그리고 visibility 속성값을 0으로 추가하고 hidden으로 속성값을 지정한다. accordil_box ol li.on p 선택자의 visibility 속성값을 visible로 지정하고 opacity 속성값을 1로 지정한다.
8. <h4> 태그의 스타일도 화면이 열린 상태일 때(<li> 태그에 .on 클래스가 있을 때) background 이미지가 변경되도록 선택자를 만들어 지정한다.

.accordio_box{margin-top:170px;}
.accordio_box ol li{width:100%; background:#fff; border-top:4px solid #EA657B;}
.accordio_box ol li h4{display:block; padding:0px 20px 20px 0px; margin:20px 20px 0 30px; cursor:pointer; background:url(../images/select_bullet_up.png) no-repeat right 11px; font-weight:400; color:#3c4147;}
.accordio_box ol li.on h4{background:url(../images/select_bullet_down.png) no-repeat right 11px;}
.accordio_box ol li h4 span{display:inline-block; margin-right:10px; font-weight:900}
.accordio_box ol li p{height:0; visibility:hidden; opacity:0;}
.accordio_box ol li.on p{height:auto; padding:30px 100px 70px 200px; background-color:#eee; background-size:100px auto; background-repeat: no-repeat; visibility:visible; opacity:1;}
.accordio_box ol li:nth-of-type(1) p{background-image:url(../images/board_boy.png); background-position:40px -1px;}
.accordio_box ol li:nth-of-type(2) p{background-image:url(../images/read_boy.png); background-position:40px 20px;}
.accordio_box ol li:nth-of-type(3) p{background-image:url(../images/shopping_boy.png); background-position:40px 13px;}
.accordio_box ol li:nth-of-type(4) p{background-image:url(../images/meeting_boy.png); background-position:40px 13px;}

js 적용 전

 

---

# 8-3. 스크립트로 아코디언 기능 구현하기

스크립트 순서

• click() : 선택한 <li> 태그를 클릭한다.
• addClass() : 클릭한 목록에 클래스가 지정되어 내용이 열린다.
• removeClass() : 다른 목록에 내용은 보이지 않도 닫히도록 클래스를 삭제한다.

 

1. js 파일에서 목록을 클릭할 수 있게 선택자를 만들고 click 메서드를 작성한다.
2. 클릭한 <li> 태그가 현재 클릭한 요소가 되므로 $(this)로 변경하고 addClass 메서드에 클릭된 <li> 태그에 on이 들어갈 수 있도록 작성한다.
3. 현재 선택된 <li> 태그만 on 클래스를 갖고 나머지 태그는 on 클래스가 지워져야 열리고 닫히는 형태가 된다. .accordio_box ol li 선택자의 .on 클래스를 removeClass 메서드를 사용하여 지워준다.

$(document).ready(function(){
	//faq 게시판
	$(".accordio_box ol li").click(function(){
		$(".accordio_box ol li").removeClass("on");
		$(this).addClass("on");
	});
});

끝! 제목 누르면 커서도 바뀐다.

 

---

# 회고

 

끝이 보인다!

일요일까지 하고 책 반납해야지...

후딱 졸프 코딩 끝내고 Euron 프로젝트 FE도 만들어보고 싶당

 

생각해보니까 Django가 아니라 말머리를 잘못 붙였다..ㅎ 나중에 수정해야지