TIL 2018-06-28
오늘 배운 것
1. schedule-tracker 작업
Joel-quek이 만든 부분과 연동하는 시도를 해 보았다. 생각보다 쉽지만 나중에 ScheduleCell이 data를 import해서 쓰는 부분을 props로 바꾸어야 할 것이다. 또 나중에는 내부 json 데이터 객체를 다시 파일에 쓰는 것도 해야 한다.
오늘 한 부분 중 어려웠던 점은 materialize-css로 미리 스타일링 되어있는 select를 다듬는 부분이었다. 화살표를 제거하는 것은 개발자 도구로 보니 .caret 클래스를 가지고 있어 스타일을 하나씩 껐다 켜보니 fill이 드롭다운 svg 모양을 검은색으로 채워주는 것으로 보여 transparent로 바꿔서 성공적으로 지웠다. 그러나 더 어려웠는 부분은 Normal 상태의 글자 생략이다. 글자를 생략하려고 display:none; 이나 visibility:hidden;을 쓰면 아예 select가 같이 사라져버려서 :hover가 되어있을 때만 보여주게 하려고 했는데 이것도 hide되는 class에 :hover 셀렉터를 적용해봤자 그 class element가 사라져버려 소용이 없었다.
결국 구글신께 여쭤본 결과 hide는 그 클래스 셀렉터에서 하더라도 show는 상위에서 해야 하는 것이었다. 아래는 해당 css 코드이다.
.cell .hideme:not(:hover){
visibility: hidden
}
.cell:hover .hideme{
visibility: visible;
}
나름 만족스럽지만 지금 보니 커서가 딱 올라가야만 셀이 나타나서 좀 불편한 감이 있다. 커서가 올라간 행 전체를 보여줬다가 not hover일 경우 행 전체의 Normal만 사라지게 하면 더 보기 좋을 것 같다. 문제는 구현이다.
됬다!! row 호버 기반으로 위와 같은 원리를 적용하되, hideme를 써서 Normal이 아닌 경우 항상 표시하게 하였다.
tr .cell:not(:hover) .hideme{
visibility: hidden;
border-bottom-width: 0 !important;
}
tr:hover .cell .hideme{
visibility: visible;
border-bottom-width: 1 !important;
}
또, 정렬 기준을 바꿀 때 상단 기준 이름의 위치가 아이콘때문에 흔들리는게 보기 싫어서 항상 아이콘을 출력하게 하되, 보여주지 않을 아이콘에 hideicon 클래스네임을 주고 아래와 같이 css를 작성하였다.
.name p, .rank p, .section p{
margin-left: 1rem;
cursor: pointer;
}
.hideicon{
display: block;
visibility: hidden;
}
한 가지 중요한 사실은, 자식을 기준으로 셀렉터를 작성하여 부모를 선택하는 방법이 css에 존재하지 않는다는 점이다.
select가 materialize-css에 의해 javascript로 처리되어 select-wrapper와 내부 input으로 변환된다.
Comments