☼ 꿈꾸는 도전자 Felix !

0. 시작하는 글 - SCSS에 간단하지만 꼭 필요한 내용들 적어보았다. 1. SCSS 특징 - SCSS는 CSS Preprocessor(CSS 전처리기) 중 가장 많이 쓰이는 CSS 전처리기 중 하나이고, CSS 코드 사용에 편의성을 제공해 준다. - Sass(SCSS), Less, Stylus가 가장 많이 쓰이는 CSS 전처리기이다. - SCSS와 Sass는 비슷한데, 유효범위를 Sass는 들여쓰기로 구분하고, SCSS는 { } 로 범위를 구분한다. 1) variable 선언 가능 ex) $orange-bg : orange; : 변수로 선언하여 여러 곳에 불러서 쓸 수 있음 - LESS는 @로 변수를 선언함 ex) @orange-bg : orange; - SCSS는 변수 재할당이 가능함 (LESS는 ..

0. 시작하는 글 - CSS3부터 나온 flex속성 덕분에 float이나 , inline-block 없이 정렬을 쉽게 할 수 있도록 만들 수 있게 되었다.. - Parent의 상위 구조에 하위 Child를 같는 구조로 설명되었다. - Parent에는 display, flex-direction, jusify-content, align-items 등의 속성을 사용하며, - Child에는 order, align-self, flex-grow, flex-shrink, flex-basis 등의 속성을 사용한다. - Flex Browser 호환성을 보면 많은 모던 브라우저에서 적용이 가능하다. 그러나 IE에서는 적용이 잘 안되는 속성이 존재한다. 1. Flex 구조 - parent와 child로 나눠서 동작함 - c..

CSS 속성 중 상속이 되는 속성 : 상위 엘리먼트에 CSS 스타일을 입히면 하위 엘리먼트에 CSS 스타일이 영향을 받는 것을 말한다. @ 일반적인 CSS 상속 1. font 속성들 - font-size - font-weight - font-family - line-height - letter-spacing 2. text 속성들 - text-align - text-indent - text-decoration - letter-spacing 3. 색상 속성들 - color - opacity @ 강제 상속 - inherit 값을 사용하면 부모에서 자식으로 강제 상속 시킬 수 있음 - 자식은 상속되나 후손에게 적용되지는 않음

1. 시작하는 글 웹 프론트 개발에서 CSS로 왠만한 스타일링은 다 할 수 있다. HTML태그에서 CSS로 일반 스타일링을 하고, 그 밖에 클릭이나 마우스 호버 등의 이벤트를 통해서 스타일링을 할 때는 Javascript가 필요하다. 먼저 이 글에서 다룰 예정인 presudo-element 정의를 MDN을 통해 살펴보도록 하겠다. A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph. -> ..

0. SVG 정의 - Scalable Vector Graphics의 약자로, 2차원 벡터 그래픽을 표현하기 위한 XML 기반 마크업 언어임 - SVG는 본질적으로 그래픽을 표현함 - 1999년 W3C의 주도하에 개발된 오픈 표준 벡터 그래픽 파일 형식임 - 즉, SVG는 점과 점사이의 계산을 통해서 그리는 그래픽임. 1. SVG 장점 - 확대해도 절대 깨지지 않고 절대 늘어나지 않음 -> 웹 그래픽의 표준 - 아이콘 이미지, 그래픽 등에 널리 쓰임 - JPG, PNG 비트맵 이미지로 사용안하고 SVG로 많이 쓰임 - 모양이 안복잡하면 파일 사이즈 작음, 모양 복잡할 수록, 그림 구성하는 포인트 많을수록 용량이 커짐, 성능도 떨어짐 -> 간단한 이미지들이 벡터그래픽인 SVG가 유리 - 비디오를 통해서만 자..