러닝패스

CSS 기초 및 중요 포인트

무료
핵심 콘텐츠만 선별했어요!
5개 콘텐츠
이 러닝패스가 어떠신가요?
(내 보관함에서 다시 볼 수 있어요)
CSS라는 용어 자체에 대한 이해를 통해, 브라우저에서 보여지는 구성요소들이 어떤 메커니즘으로 꾸며지는지 파악하고, 기본적인 스타일링 문법과 우리가 원하는 요소에 대해서만 스타일링하는 방법, 마지막으로 모던한 웹사이트 레이아웃에 자주 이용되는 Flex Box에 대해서 다루게 됩니다.
NOTE
Cascading Style Sheet? 풀어서 읽어봐도 뭔가 의미가 확 와닿지 않다면, 어떤 특정 요소에만, 또는 전체에 스타일링을 적용하고 싶을 때 어떻게 달리 효과를 줄 수 있는지 헷갈린다면? 이번 학습노트를 통해 확실히 감을 잡고 갑시다.
Video
CSS 셀렉터, 기초 이론 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript
출처: https://youtu.be/gGebK7lWnCk
테크주니어 님의 학습노트
NOTE
프론트엔드 개발자로서 웹 사이트를 만들 때 여러가지 중요한 것들이 있지만 그 중, 가장 핵심이 되는 부분은 우리가 원하는 위치에 의도된 사이즈로 화면의 요소들을 배치하는 것일 텐데요. 이를 위해 CSS의 기본 스펙인 'display'와 'position'을 사용할 수 있습니다.
Video
CSS 레이아웃 정리 display, position 완성 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript
출처: https://youtu.be/jWh3IbgMUPI
테크주니어 님의 학습노트
NOTE
새로운 레이아웃 시스템으로서 반응형 웹 페이지를 빌드하고 화면 상의 엘리먼트들을 쉽게 조직하기 위해 2009년에 처음 소개되었던 Flexbox 모델은 모던한 웹사이트들의 레이아웃을 보다 쉽고 간편하게 구성할 수 있는 매우 유용한 기술입니다. 그런만큼 현업에서도 굉장히 많이 사용되고 있기에, 이번 학습노트를 통해서 개념을 잘 이해하고, 재밌는 실습을 통해 사용법도 꼭 익혀봅시다.
Video
CSS Flexbox 완전 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript
출처: https://youtu.be/7neASrWEFEM
테크주니어 님의 학습노트
QUIZ
다음 보기 중, Flexbox의 container 속성이 아닌 것을 고르세요.
QUIZ
다음 보기 중, 모든 태그를 선택하는 CSS Selector를 고르세요.
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기