https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 CSS 심화 2. CSS Framework 🔎 Bootstrap SASS, LESS 를 모두 지원하며 Bootstrap5는 jquery를 완전히 제거하는 방향으로 최적화 되어있다. 빠른 프로토타이핑, 거대한 생태계, 컴포넌트의 다양성, 쉬운 문서와 낮은 러닝 커브 등의 장점이 있다. 시작하기 세계에서 가장 인기있는 프레임워크인 Bootstrap으로 반응형, 모바일 우선 사이트를 jsDelivr와 스타터 페이지 템플릿을 통해 시작해보세요. getbootstrap.kr See the Pen CSS bootstrap Exam by Byeongyeong Kim (@beark93) on Cod..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 CSS 심화 2. CSS 전처리기 CSS 전처리기란? CSS를 보다 쉽게 작성하고 CSS로는 구현 불가능한 변수 또는 함수를 사용할 수 있게 만들어진 새로운 형태의 CSS . CSS 전처리기의 장단점 장점 CSS 코드를 여러 파일로 나눠 유지보수성이 향상 중첩 선택자를 작성하기 쉬움 일관된 테마를 위한 변수사용. 여러 프로젝트에 걸쳐 테마 파일 공유 가능 반복되는 CSS를 위한 Mixins 생성 가능 단점 전처리기를 위한 도구가 필요, 다시 컴파일하는 시간이 걸림 Less에서는 변수 이름의 접두어가 @이기 때문에, @media, @import, 규칙과 같은 고유 CSS 키워드와 혼동...
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 CSS 심화 1. BEM BEM의 기본 구조 BEM은 Block, Element, Modifier를 뜻한다. 3가지 요소와 __ / -- 구분자를 사용하여 클레스 네임을 만들어서 css를 관리하는 방법론을 BEM 방법론이라고 한다. .block__element--modifier { color: red; } . Block / Element / Modifier Block 재사용 가능한 기능적으로 독립적인 페이지 컴포턴트. 즉, 어딘가에 종속되지 않고 어디서든 재사용할 수 있는 요소를 말한다. Element Block을 구성하는 단위. 자신이 속한 Block 내에서만 의미를 가진다. 재사용..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 CSS 4. Animation 애니메이션 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 Sequence를 나타내는 키프레임(@keyframes)들로 이루어진다. @keyframes 키프레임 rule을 사용하면 애니메이션 Sequence 중의 여러 시점(breakpoint)에서 CSS 프로퍼값을 지정할 수 있다. See the Pen Untitled by Byeongyeong Kim (@beark93) on CodePen. animation-name 사용하고자 하는 keyframe..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 CSS 3. Responsive Design 반응형 웹 (Responsive Web) 디바이스 종류에 따라 웹페이지의 크기가 자동적으로 재조정 되는 웹사이트. 하나의 HTML 소스로 특정 장치에 최적화된 환경을 사용자에게 제공 미디어 쿼리 (Media Query) 미디어 타입 all, aural, braille, handheld, print, projection, screen, tty, tv, embrossed 등이 있다. 위 문법에서 미디어 타입은 1개만 사용가능한 것은 아니며 쉼표(,)를 사용하여 여러 타입을 적용할 수 있다. 속성 width, height, device-width..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 CSS 2. Layouts CSS 페이지 레이아웃 기술은 웹페이지에 포함될 요소들이 일반 레이아웃 대열 상에 기본값 위치 기준과 부모 컨테이너, 메인창과 비례해 어느 위치에 놓일것인가를 제어한다. 레이아웃 기술들에는 diplay, flex, grid, floats, position 등이 있다. Display 기본적인 display 속성으로 block 과 inline이 있다. block 요소는 해당 요소들은 같은 라인이 아닌 바로 다음 라인에 표시되고 inline요소는 바로 옆에 표시된다. Display Block Display Block Display Block Display Inli..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 CSS 1. Styling CSS 란? Cascading Style Sheets의 약자로 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는데 사용되는 스타일시트 언어이다. CSS 문법 CSS 선택자 요소선택자 id 선택자 class 선택자 그룹 선택자 그룹 선택자 CSS 적용 인라인 스타일 HTML요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법 인라인 스타일 내부 스타일 시트 HTML 문서 내에 내부 스타일 시트 외부 스타일 시트 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 하는 방법. (.css 확장자 파일 사용) http://www...
