-
페이지 로드 시 전체보기 기능 추가
-
기능 구현이나 html 작성은 끝나서 오늘은 주로 CSS 작업을 했다.
1) 아이콘 직접 그렸음 ㅎ
팀원이 키우는 고양이를 그렸당 팀 웹사이트의 아이콘으로 썼다!!
2) 제목에 아이콘 넣기
<h1 class="headline"><img class="ggami_icon" src="/static/ggami_icon_background.jpg" width="50px" height="50px"/>까미를 부탁해
</h1>3) 커서 수정하기
: 구 이름을 버튼으로 했더니 구 위에서만 커서가 클릭용으로 떠서, 버튼 태그를 div 태그로 바꾸고, 커서 찾아보는 김에 리스트 클릭할때 병원이니까 병원 모양 뜨게 만들었당 ㅎㅎ
cursor: cell;4) dropdown menu랑 병원 목록 이름순으로 정렬
rows.sort((a, b) => {
let fa = a.hosName.toLowerCase(),
fb = b.hosName.toLowerCase();
if (fa < fb) {
return -1;
}
if (fa > fb) {
return 1;
}
return 0;
});sort() 메소드에 callback function을 넣어서 정렬할 수 있다. 구 이름은 그냥 뒤에 sort() 붙여서 했음
=> 음 원리는,, 좀 더 찾아봐야할듯
5) 목록에 뜨는 병원 개수 표시
let listNum = rows.length
let temp_html_gu = `<span>${gu}<em class="listNum">${listNum}/911</em></span>`요론식으로 했다. 태그는 태그 안의 글자를 italicize 해준다.
6) text-overflow elipsis 처리하기
: 팀원분이 한번 해보라고 제안해주셔서 해봤다. 이렇게 하면 되는데 각각이 무슨 의미인지 안적어뒀더니 까먹음 ㅎ
=> 시간 나면 쓴 코드 다시 다 뜯어봐야겠다.
display: inline-block;
text-align: center;
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;7) db에 리스트 칼럼 추가하기
: 별점 기능을 만들려고 추가했었는데 결국 사용안해서 지웠다.
=> 뭔 뜻인지 까먹음,, 다시 찾아보기
=> 별점 기능은 어떻게 만드는걸까? 시간 나면 한번 만들어보자
def starSet(row):
return [3]
df2['starList'] = df2.apply(starSet, axis=1)=> 팀으로 작업하니까 계속 어떤 기능을 추가해보면 좋겠어요 라는 피드백이 들어와서 좋다! 혼자선 귀찮아서 아마 최소한의 기능만 넣을 것 같은데, 이렇게 새로운 기능을 추가하면서 배우는게 참 많은 것 같다.
