Outputor

더보기 더보기 더보기 HTML 나이키 아디다스 반스 참 잘했어요. 앞으로도 계속 잘부탁합니다 이정도면 괜찮아요. 조금 더 발전하면 좋겠습니다 너무 부족하네요. 이러면 같이 가기 힘들어요 1 of 2 2 of 2 1 of 3 2 of 3 3 of 3 더보기 더보기 더보기 SCSS // LIST @mixin list () { border: 1px solid #e9ecef; padding: 10px 0px 10px 10px; font-size: 20px; } @mixin active () { background-color: #1c7ed6; color: #fff; } ul { list-style: none; margin: 0; padding: 10px; .list { @include list(); } .list..

@mixin 1. 스타일 여러줄을 한 단어로 치환해서 사용가능함 2. 형태: @mixin 이름 ( ){ 스타일 } 3. @mixin을 사용하려면 @include 이름( )을 작성해주면 됨 4. @mixin 이름 ( $bgColor ) { background-color: $bgColor } 이렇게 함수처럼 사용가능함 @mixin box-style ($bgColor) { width: 150px; height: 100px; margin:auto; margin-top: 20px; background-color: $bgColor; } .box { @include box-style(blue); } 5. @mixin 이름 ( $bg ) { #{bg}: blue } 처럼 스타일 이름에도 사용가능함 @mixin box-..

SASS와 SCSS 1. SASS와 SCSS 차이: SASS는 코드짤 때 중괄호 생략이 가능하고 SCSS는 중괄호 생략이 안됨 클래스를 확장하는 @extend 1. %를 사용해서 이름을 적어주면 파일 자체에서 적용되지 않고 @extend를 해줘야만 적용됨 2. 기존 클래스도 @extend 가능함 3. @extend를 사용한 후 복사할 클래스명을 뒤에 적으면 클래스명에 있던 모든 내용이 복사됨 셀렉터 대신 쓰는 Nesting 1. .box p { } 이렇게 쓰는 대신 아래처럼 사용 가능함 ⬇ 2. hover를 사용할 때 &를 쓰지않으면 h3 :hover처럼 뛰어서 작성되어 작동안됨 더보기 더보기 HTML Sass Sass Sass Sass 더보기 더보기 SCSS $bg-color: #f06595; $fon..

변수 1. 값을 저장해놓고 쓸 수 있음 2. $기호를 사용한 다음 이름을 적고 값을 넣어주면 됨 3. root를 사용하지 않고 변수를 저장할 수 있어서 편리함 사칙연산 1. calc를 사용하지 않고 바로 계산이 됨 2. px 단위는 px 단위끼리, % 단위는 % 단위끼리 맞춰져야 함 3. 곱셈 나눗셈은 보통 뒤에 단위를 쓰지 않음 (괄호 안에 작성해야 잘먹음) 더보기 더보기 더보기 HTML .scss 파일을 만든 다음 Watch Sass 버튼을 누르면 같은 이름을 가진 .css파일이 만들어 지는데 이걸 연결해줌 Sass Sass Sass Sass 더보기 더보기 더보기 SCSS $bg-color: #f06595; $font-color: #fff; $font-size: 50px; body { width: 1..

SASS 개발환경 세팅 (VScode 이용) 1. extension 메뉴에서 Live Sass Compiler 검색해서 높은 버전을 설치함 (5.0.0 버전 이상) 2. 하단에 Watch Sass 버튼이 생기는데 누르면 현재 작성한 SASS 파일을 자동으로 CSS 파일로 변환해줌 (하단 바가 안보이면 View - Appearance - Status bar 클릭하면 됨)