프로그래머스 프론트엔드 데브 코스 프론트엔드 과정의 기록입니다.
9월 14일 (화)
📚 TIL
CSS 심화 학습
📮 Feelings
CSS 심화 학습
Grid Functions, Units
그리드의 다양한 함수들과 함수들의 단위에 대하여 새로운 내용들을 알게 되었습니다.
특히 브라우저에서 영어와 한글의 최소 콘텐츠 단위가 다르다는 점에 적용되는 레이아웃이 다른 점이 인상 깊었습니다.
Transform 3D
요소의 2차원 CSS가 아닌 3차원을 다루는 CSS에 대해서 학습할 수 있었습니다.
상위 요소에서 모든 직계 하위 요소들에 대해 동일한 3차원 효과를 적용하는 방법과 하위 요소에서 개별적인 원근 효과를 적용하는 방법에 대해 나누어 기능을 구현할 수 있는점을 배운 것이 가장 인상 깊었습니다.
Multi-Columns
긴 내용의 텍스트 단을 다단으로 표현하는 방법에 있어서 html 레이아웃만을 사용하여 표현하는줄 알았었는데 CSS를 통해 다단을 지원하는 기술을 새롭게 배울 수 있었습니다.
Filter
CSS의 filter 함수를 통해 다양한 이미지 꾸밈 효과에 대해 배울 수 있었습니다.
이 함수를 사용하는 예시들을 구글링 해보았는데 굉장히 다양한 이미지 제작에 사용되고 있는점을 볼 수 있었습니다. 이를통해 모든 기술들을 창의적으로 사용하는 것이 새로운 것을 만들어 내는구나 라고 생각하게 되었습니다.
변수
CSS에서 변수의 사용에 대해서는 복습하게 되었고 참조에 대한 개념은 새롭게 알게 되었습니다.
처음 학습했을 때는 전역적으로 변수를 다루는 방법이 일반적이었기에 전역 변수 사용방법만 알았는데 오늘 학습을 통해 해당 변수 값이 존재하지 않는 경우의 초기값 설정과 사용자 지정 범위의 변수 선언과 사용 방법에 대해 배울 수 있었습니다.
@supports
supports 규칙을 학습하며 CSS를 다룰 때 다양한 기술들에 대하여 제가 사용하는 크롬의 관점에서만 생각하고 구현하지 않았나 반성하게 되었습니다.
이 규칙을 통해 크로스 브라우징 문제를 해결하며 좀 더 유연한 웹의 CSS를 개발할 수 있는 방법에 대해 학습할 수 있어서 좋았습니다.
@media
예전에 반응형 웹앱을 구현하 때에 학습해 보았던 미디어쿼리 사용법에서 추가로 새로운 내용을 학습할 수 있었습니다.
미디어쿼리를 CSS에 적용하는 방법에 대해 새롭게 알게된 내용이 많았는데 CSS 파일내에서 @media 지정을 통한 구현만 경험 해보았었는데 link태그의 media 속성 지정을 통해 미디어쿼리를 적용하는 방법과 미디어쿼리 설정을 파일로 분리하여 다루는 방법에 대한 학습이 인상 깊었습니다.
마치며 🙏
오늘은 CSS의 심화 내용에 대해서 학습을 하였습니다.
프론트엔드 개발자에게 중요한 지식 중 하나인 마크업에 대하여 내가 중점적으로 해왔던 다른 지식들과 같이 더 열심히 학습해야하는 점은 예전부터 알고 있었기에 오늘의 학습이 더 나에게 효과적인 집중을 할 수 있게 해준 것 같습니다.
오늘 기록한 마크업 학습 내용들에 대하여 한 번에 공부를 끝내는 것이 아니라 까먹으려고 하면 다시 복습하여 유용한 기능들을 구현할 때 활용하도록 하는 능력을 가지고 싶습니다 !
📅 Future Action Plans
- SCSS 학습하기
