이번에는 Traversy Media에서 제공하는 넷플릭스 랜딩 페이지 클콘 코딩이다.
이번 코딩에 필요한 기본적인 소스들은 https://www.youtube.com/watch?v=P7t13SGytRk
이 클론코딩 더보기란에 있으니 참고해서 쓰면 된다.
이 프로젝트에서 제일 새로웠던 부분은
Font AweSome!!
폰트어썸은 웹 개발을 하다보면 아이콘을 쓸 일이 종종 생기는데 폰트어썸은 그럴 때 가장 많이 사용되는 라이브러리이다.
사용법은 보통 cdn을 통해서 사용한다.
구글링 해보면 폰트어썸 홈페이지가 나오는데 가입을 하고 cdn코드를 받아서 적용하거나
cdnjs.com을 통해서도 링크를 받을 수 있다.
링크를 사이에 복붙을 해주면 사용할 수 있고
최신버전인 font awesome5에선 svg까지 지원한다고 한다.
홈페이지를 참고하면 무료부터 유료까지 다양한 아이콘을 볼 수 있으니 한번쯤 들어가보는 것을 추천한다.
사용법은 형식으로 사용할 수 있다.
홈페이지를 보면 버전에 맞게 사용법이 다르다.
예를 들면
폰트어썸4에서 카메라 아이콘을 쓸 때는 i class="fa fa-camera"></i 를 이용했고
폰트어썸5에서는 i class="fas fa-camera"></i 를 기본값으로 무료 유료에 따른 코드가 살짝씩 다르다.
https://fontawesome.com/icons 들어가보면 필터링해서 원하는 아이콘을 찾을 수 있다.
아니면 cheatsheet에 들어가서 원하는 아이콘의 단어를 검색해서도 쉽게 찾을 수 있다.
또 아이콘들의 사이즈 방향 등을 코드를 추가해서 설정 가능하니
https://codesandbox.io/s/font-awesome-v5-ngjhy?from-embed
위의 링크를 참고해서 살펴보면 좋다.
또 css에서 쓰인 코드 중
-webkit-font-smoothing: antialiased; 이 코드는 브라우저에 표현되는 텍스트가 렌더링될 때 부드럽게 표현된다고 한다.
다만 모든 브라우저 및 환경에서 되지않고 Mac OS등에서 쓰이기 때문에 굉장히 제한적이다.
값으로는 auto, antialiased, none이 있다
antialiased가 거친 렌더링되는 부분을 부드럽게 해주는 의미인 것 같다.
또한 css를 하다보면 px말고도 다양한 단위가 있는데 많이 쓰이는 코드가 rem이다.
rem, em 이런 단위가 많이 쓰이는 이유는 반응협 웹에서는 px처럼 고정된 값이 아닌
다른 요소에 영향을 받는 단위인 em, rem을 많이 쓰게 된다.
em: 부모 태그의 영향을 받는 상대적 길이. 부모의 사이즈를 기준으로 하기에 굉장히 유동적이다.
rem: 최상위 요소인 html요소에 비례하는 크기를 가지는 상대적 길이.
html 폰트사이즈 기본값이 16px이기에 1rem은 16px이다.
rem을 많이 쓰게되는데 rem의 값을 쉽게 사용하려면 html의 font-size를 62.5% 또는 10px로 설정해두면
10px = 1rem / 12px = 1.2rem 이처럼 쉽게 사용할 수 있다.
