CSS3 트리, 리스트 선택 시 스타일 이게 예쁘고 심플! 리스트, 트리를 선택 했을 시 표현하는 방법은 다양하다. 그 중에서 필자가 많이 애용 하는 방법은 윈도우10 스타일 방식이다. CSS 스타일 속성 border-left: 6px solid #4CAF50; // 뒤에 색상은 원하는 대로 출처: https://www.w3schools.com/howto/howto_css_notes.asp 2018. 8. 7. CSS 선택자 최적화 오른쪽에서 왼쪽으로! CSS 선택자 최적화를 위해서는 오른쪽에는 최대한 구체적인 선택자를 적어줘야 한다. 나쁜 예 .HeaderContainer .nav span 위처럼 사용한다면 모든 span 태그를 검색하게 된다. 좋은 예 span .HeaderContainer .nav 오른쪽에는 최대한 구체적인 선택자를 적어준다. 더 좋은 방법이 있다면 댓글에 알려주세요! 제발 2018. 7. 20. 애니메이션 최적화 화려하다고 좋은건 아니다 프론트 개발을 하다보면 자꾸 욕심이 난다. 더 예쁘게, 더 화려하게, 더 있어보이게 이렇게 모든것에 애니메이션을 무분별하게 사용하게 되었을 경우, 오히려 사용자에게 불편한 경험을 줄 수 있다. 가령 개발자 브라우저 환경에서는 부드럽게 잘 보이지만 사용자 브라우저 환경에서는 뚝.뚝 끊기는 경험을 할 수도 있다. 그래서 애니메이션 효과는 되도록이면 자제하고 사용해도 성능상에 큰 영향을 끼치지 않는 곳이나 사용자 경험에 큰 효과를 줄 수 있는 곳에만 사용되어야 한다. 그리고 사용할 떄도 페이지의 레이아웃 또는 페인팅의 영향을 끼치는 속성에 대해서는 사용하지 말아야 한다. 추천 속성 transform, opacity 비추천 속성 transform과 opacity를 제외한 모든 속성 (w.. 2018. 7. 16. 이전 1 다음
