[05/03 TIL] JS, CSS특강

array, slice, splice, sort

array pop,push 실습

slice, splice 실습

sort 실습

•   sort 의 compareFunction 을 활용한 여러가지 방법들 공부
•   sort 함수는 원본을 변경하는 함수이기 때문에 잘 생각해야 한다
•   기본적으로 문자열로 변환하고 유니코드 값으로 비교한다. 따라서 compareFunction 없이 숫자랑 sort 해보면
    정렬이 잘 안되는걸 실습해 볼 수 있음
•   유니코드는 - 연산이 불가능하기 때문에 람다함수를 넘겨줘야한다
    ex ) 객체a.string값 > 객체b.string값이 양수가 리턴이 된다면 a > b (오름차순)  을 의미한다
          return 0 은 a = b 를 의미함

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Array.prototype.sort() - JavaScript | MDN

map, reduce, filter 등 여러 함수와도 응용할 수 있다

 

빔캠프 CSS 특강 2번째 과제 피드백

• 과제중에 이미지 스프라이트를 이용해 평점을 구현하는 부분이 있었는데
  평점이 실시간 or 사용자의 선택에 따라 변하기 때문에 클래스로 평점마다 (보통 0.5단위까지) 조절할 수 있게
  구현해야 한다고 한다
• 동적인 이미지는 마크업으로 HTML 내에 포함시켜 주는게 유리하다
• padding-top 을 잘 알아두고 높이조절하는데 응용해보자
• 항상 레이아웃을 보고 같은 스타일이 적용 될 박스들을 잘 묶어주자
• P 같은 요소들의 마지막 요소는 margin 과 padding 을 넣지 말자
• wrapper 에는 시각적 CSS가 없어야 한다
• 이미지에 그라디언트 처리를 하는 방법은 여러가지 있었는데 mask-image 를 사용하는게 제일 간편했음
  근데 -webkit-mask-image 를 안써주면 unknown property 오류가 뜨면서 크롬에서도 작동을 안해서 많이 헤맸다
  문서에는 version8 이후부터 -webkit 없어도 지원한다고 적혀있는데 뭐지.. 어쨌든 붙여서 해결은 했다

 

수업 후 3시간 +과제까지 추가되니까 힘들긴 했는데 많은 걸 배웠다

이미지 스프라이트 기법을 좀 다시 공부해야겠다

정작 이거하느라 본 수업 과제를 미완성 했긴한데... ㅠ