[밑줄 추가] custom.css 편집

라임서베이의 질문/답변에 대한 UX(User Experience, 사용자 경험)에 대한 고민의 일환이다. 답변이 라디오 버튼 목록으로 위에서 아래로 나열되는 많은 질문들 앞에서 응답자가 지루해하거나 경직될 수 있다. 조금 이쁘게, 편안하게, 가독성을 높이고, 정확한 응답을 유도하고, 나아가 응답 중 이탈을 방지하기 위하여 다양한 고민과 대책이 필요하다.

아래 사례는 이른바 줄쳐진 노트(옥스포트 노트 스타일 이라고 불리기도 한다) 형식으로 답변 항목들 밑에 밑줄을 넣는 것이다:

.radio-list li {
    border-bottom: 1px solid #f0e68c; /* 카키색 줄 */
    padding: .5px;
    padding-left: 20px; /* 라디오 버튼을 오른쪽으로 조금 이동 */
}

/* 마지막 항목에서는 줄을 제거 */
.radio-list li:last-child {
    border-bottom: none;
}

마지막 항목에서 줄을 제거하는 것은 하나의 질문이 마지막 답변과 함께 보통 테두리로 부각되기 때문에 마지막 답변밑에 밑줄은 불필요하다는 판단에서 비롯된다.