콘요맘떼 개발일지

1. css의 한계 (1) 클래스명을 작성하는 번거로움 (2) 방대한 스타일 정보로 인한 파일의 크기 → scss, styled-components의 등장 2. Scss - Sass 버전3에서 등장하였으며 Saas의 모든 기능을 구현하면서 CSS 문법과 완전히 호환된다. - 그 자체로 웹에서 돌아갈 수 없기 때문에 전처리기로 작성된 후 CSS로 컴파일 되어야 한다. (Gulp, Webpack, Parcel 등) - 변수 사용이 가능한다. - 연산자가 사용 가능하다 : +, -, /, *, %, ==, != (단 +, -는 단위를 통일시켜서 사용해야 한다.) - Nesting이 가능하다. (상위 요소를 참조할 때는 &를 사용한다.) - Mixin을 사용할 수 있다. (선언 : @mixin, 사용 : @in..

1. Inline Element - , , , , , 등이 있다. - content의 너비만큼 라인을 차지하며 한 라인에 여러 개의 요소가 올 수 있다. - inline 요소의 상·하 여백은 margin이 아닌 line-height에 의해 결정된다. - inline 요소에는 width, height이 적용되지 않는다. - inline 요소가 연속 사용되는 경우 약 5px의 외부 margin이 자동 생성된다. 2. Block Element - , , , , , , , , , , 등이 있다. - 화면 전체 너비를 차지한다. - width : 100% 속성을 기본적으로 가지고 있다. (이로 인해 자동 줄넘김 발생) 3. display 속성 태그가 Inline인지 Block인지 결정해주는 것은 display 속..

1. Inheritance (상속) - CSS에서 한 엘레먼트에 스타일을 주면 그 자식들 역시 영향을 받는다. - 모든 스타일이 상속되는 것은 아니며 border, margin, padding, border 등은 상속되지 않는다. 2. Cascading (캐스케이딩) - 한 대상에 대해 중복되는 스타일 선언이 존재할 경우 어떤 스타일을 선택할지에 대한 규칙이다. - 캐스케이딩은 중요도, 명시도, 순서 이렇게 3가지 규칙에 따른다. (1) 중요도 CSS 소스의 출처로부터 중요도를 구분한다. (먼저 언급될수록 우선순위가 높다) !important 속성 개발자 CSS 인라인 스타일 style 태그 link 태그로 가져온 stylesheet css 파일 유저 CSS : 폰트 설정 등 사용자가 브라우저에 적용한 ..

1. CSS (Casading Style Sheets) - HTML이나 XML로 작성된 문서의 표시 방법을 기술하는 Style sheet 언어 (프로그래밍 언어, 마크업 언어 둘 다 아님!) - HTML에서 디자인을 위한 새로운 태그들을 추가하였으나 해당 방법이 한계가 있음에 따라 CS가 등장하였다. Rule set (줄여서 Rule) - 선택자(Selector) : 꾸며줄 요소를 선택 - 선언(Declaration) : 꾸미길 원하는 요소의 소성 묘사 (각 선언은 ;를 통해 구분한다) 2. 선택자(Selector) 종류 (1) 전체 선택자 - * 모든 요소를 선택한다. (2) 태그 선택자 (요소 선택자) ex) p, div 특정 태그의 엘레먼트를 모두 선택한다. (3) 아이디 선택자 - #id 특정 아..