#웹 제작 제출 및 삼성전기 리뉴얼 메인페이지 제작
달콤커피 웹 제작한 것을 제출했다.
강사님이 삼성전기 리뉴얼 된 메인 페이지를 제작 해보라고 하셨다.
내가 생각해도 달콤커피는 자바스크립트 기능이 많이 부족한 사이트였다.
기존에 삼성전기 메인페이지를 토대로 현재 리뉴얼된 메인페이지와 비교하면서 새로 제작했다.
리뉴얼 전
리뉴얼 후
헤더와 푸터는 동일하고 메인 컨테이너의 내용들이 달라졌다. CSS를 다시 공부하면서 요소의 레이아웃과 스타일 지정을 체계적으로 작성하다보니 어려움 없이 한 번에 만들 수 있었다. 자바스크립트의 스크롤 값에 따라서 내용들이 차례로 트랜지션 효과를 통해 나타나는 기능을 적용했다.(강사님이 이거 때문에 시킨건데 처음에 구현 안하고 제출함..)
#자바스크립트 딥다이브 this / 실행 컨텍스트 / 클로저
포이마웹으로 this, 실행컨텍스트, 클로저에 대해 살펴봤다.
this는 어디에서 가르키는 지에 따라 다르다는점. 객체 값의 함수일때 this는 객체를 가르키고, 일반 함수에서의 this는 전역을 가르킨다.
실행 컨텍스트는 자바스크립트의 동작 원리를 이해하기 위한 중요한 내용이다. 정독을 했지만 아직 확실하게 이해하지 못했다. 변수 선언이 되는 과정과 함수의 실행 과정 등 다시 공부해야겠다.
클로저는 간단하게 말해 본인의 환경(렉시컬 스코프)를 기억하는 변수라고 생각하면 쉽다. 하지만 ES6가 도입 된 후로는 const와 let 키워드를 사용해서 전역변수를 건드리지 못하도록 하는게 제일 좋다.
#CSS filter
삼성전기 리뉴얼 메인페이지 중에 호버되면 사진이 어두워지는 효과를 가져야 하는 요소가 있었다. 분명 배웠는데 기억이 나질 않아서 결국 구글링 했다. (편-안)
filter는 요소에 대한 시각효과를 지정할 수 있다.
| 종류 | 설명 | 값 |
|---|---|---|
| none | 기본값, 이펙트를 제거한다. | |
| blur(px) | 이미지에 흐림효과를 적용한다. | 값이 클수록 흐림이 더 많이 생성, 값을 작성하지 않으면 0으로 지정 |
| brightness(%) | 이미지의 밝기를 조정한다. | 0%는 완전히 검게 처리, 100%는 기본값, 100%보다 크면 밝게 제공 |
| contrast(%) | 이미지의 대비를 조정한다. | 0%는 완전히 검게 처리, 100%는 기본값, 100%보드 크면 더많은 대비를 처리 |
| drop-shadow(x y blur 색상) | 이미지에 그림자 효과를 지정한다. | x, y는 그림자의 위치를 지정, blur는 흐림정도, 색상은 그림자색상처리 |
| graysclae(%) | 이미지를 회색조로 변환한다. | 0%가 기본값, 100%는 이미지를 완전 회색 처리, 음수는 없음 |
| hue-rotate(deg) | 이미지에 색조 회전을 적용한다. | 0deg ~ 360deg |
| invert(%) | 이미지를 색상 반전한다. | 0%는 기본값원본, 100%는 이미지를 완전히 반전 |
| opacity(%) | 이미지의 투명도를 지정한다. | 0%~100%, 100%가 기본값 |
| saturate(%) | 이미지 채도 지정한다. | 0%는 이미지의 채도를 완전 없앰, 100%가 기본에 원본, 100%를 초과하면 채도높임 |
| sepia(%) | 이미지를 세피아톤으로 변환한다. | 0%~100%, 0%가 기본에 원본 |
| url( ) | SVG필터를 지정하는 XML파일의 위치를 가져오고, 특정 필터요소에 대한 경로를 포함한다. |
사진을 호버 했을 때 다양한 효과를 줄 수 있는 장점이 있다. 물론 포토샵으로 여러 이미지를 지정 해놓고 바꿔가면서 해도 되지만 CSS자체만으로도 적용이 가능하다는 점이 좋다.
오늘 끝, 내일 안녕
