프론트앤드개발 (5) 썸네일형 리스트형 [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 47회차 미션 패스트캠프 프론트엔드 인강 47일차 Sass(SCSS)의 if문과 @if(지시어)에 대하여 알아보았다. 조건과 반복(Control Directives / Expressions) if(함수) 조건의 값(true, false)에 따라 두개의 표현식 중 하나만 반환 조건부 삼항 연산자(Conditional ternary operator)와 비슷. 조건의 값이 true이면 표현식1을, 조건의 값이 false이면 표현식2를 실행. if(조건, 표현식1, 표현식2) 예시 $width: 555px; div{ width:if($width > 300px, $width, null); } 만약 $width > 300px 이냐? 맞으면 $width, 즉 555px. 그렇지않으면 null이되어서 출력이되지않는다. @if(지시어.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 46회차 미션 패스트캠프 프론트앤드 인강 46일차 Sass(SCSS)의 함수(functions)과 함수를 사용할때 주의점에 대해 배워보았다. 함수(functions) 자신의 함수를 정의하여 사용할 수 있다. 함수와 Mixins은 거의 유사하지만 반환되는 내용이 다르다. Mixin은 위에서 살펴본대로 지정한 스타일(style)을 반환하는 반면, 함수는 보통 연산된(Computed) 특정 값을 @return 지시어를 통해 반환한다. //mixin @mixin 믹스인이름($매개변수){ 스타일; } //functions @function 함수이름($매개변수){ @return 값; } @function columns($number, $columns, $width){ @return $width * ($number/$columns.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 43회차 미션 패스트캠프 프론트앤드 인강 43일차 Sass(SCSS) 의 Mixins 사용법과 인수에 대해 알아보았다. 재활용(Mixins) Sass Mixins는 스타일 시트 전체에서 재사용 할 CSS 선언 그룹을 정의하는 아주 훌륭한 기능이다. 약간의 Mixin(믹스인)으로 다양한 스타일을 만들 수있다. 우선, Mixin은 두가지만 기억하면된다. 선언하기(@mixin)와 포함하기(@include)이다. 만들어서(선언), 사용(포함)하면 된다. @mixin size($w, $h){ width:$w; height:$h; } .box1{ @include size(100px,200px); } .box2{ @include size(100px,200px); } .box3{ @include size(100px,200px); }.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 39회차 미션 패스트캠프 프론트앤드 인강 39일차 scss 데이터의종류와 다양한 문법을 알아보았다. 주석 //을 할경우 컴파일안되고 /*내용*/을 할경우 컴파일이되어 보인다. 데이터의 종류(데이터타입) 데이터의 종류에는 숫자,문자,컬러,boolean,null,list,map등이 있는데 문자는 따옴표가 있을수도있고 없을수도있다. null을 사용하면 컴파일하지않는다. 자바스크립트의 배열과 유사한 List의 경우 ,가 들어가면 괄호로 묶어준다. Map의 경우 (key:value, key:value)형태로 ()를 꼭붙여 진행한다. scss의 중첩 중첩을 이용하면 상위선택자의 반복을 피할수있다. Ampersand(상위 선택자 참조) 중첩안에 & 키워드는 상위(부모)선택자를 참조하여 치환합니다. 예제실습 .btn{ width:1.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지22회차 미션 패스트캠프 프론트앤드 인강 22일차 리액트에서 배열에 항목 제거와 수정을 배워보았다. 배열에 항목 제거하기 onRemove라는 props를 받아와 food컴포넌트에 추가한다. Italian함수에 전달되었기때문에 onRemove를 받아온다. import React from 'react'; //onRemove를 Italian함수에 전달했으니 받아와야한다. function Italian({foods, onRemove}){ return( {foods.foodname} {foods.ingredient} onRemove(foods.id)}>삭제 ); } //onRemove props를 받고 컴포넌트에 추가한다 export default function Remove({food, onRemove}){ return( {.. 이전 1 다음
