뇌 채우기 공간

전체코드보기↓ 더보기

오픈그래프와 트위터카드는 다른 사이트에서 공유가 될때 어떤 사이트인지 알려주는 역할을 한다. http://ogp.me/ Open Graph protocol The Open Graph protocol enables any web page to become a rich object in a social graph. ogp.me https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html Getting started with Cards By using Twitter’s services you agree to our Cookies Use. We use cookies for purposes including ..

width값을 디바이스의 크기로 하겠다, 처음 크기를 확대 축소 없이 1배율로 하겠다. 사용자가 손이나 뭣으로 확대축소를 할 수 있냐? no 최대 크기를 1 최소 크기를 1로 한다.

Sass(SCSS) 완전 정복! | HEROPY Sass(SCSS) 완전 정복! Style(CSS) 작업 시 필수가 되어버린 CSS Preprocessor(전처리기) Sass(SCSS)에 대해서 이해하고, CSS로 컴파일하는 방법부터 자세한 SCSS 문법까지 살펴봅니다. heropy.blog Sass: Built-In Modules (sass-lang.com) Sass: Built-In Modules Compatibility: Dart Sass since 1.23.0 LibSass ✗ Ruby Sass ✗ Only Dart Sass currently supports loading built-in modules with @use. Users of other implementations must call f..

@while 은 조건이 false로 평가될때까지 무한 반복하기 때문에 빠져나갈 조건을 만들어야한다. @while 조건 { // 반복 내용 } $i가 원래 6이었는데 while문에서 $i를 재정의한다. 그래서 while문의 조건에서 false가 될때까지 루프를 돈다. 다른 반복문으로 대체가 가능하기 때문에 권장하지는 않는다.

@each 는 List , Map 데이터를 반복할 때 사용한다. for in 문과 비슷하다. @each $변수 in 데이터 { // 반복 내용 } 리스트에 있는 것들이 순서대로 $fruit에 들어간다. 혹시 매번 반복마다 Index 값이 필요하다면 index() 내장 함수를 사용할 수 있다. Map 데이터 사용 map데이터는 key: value로 값이 저장된다. 위의 코드의 뜻은 .box- 뒤에 key (apple, orange, banana) 가 순서대로 오는 이름을 가진 클래스에 background 이미지명이 value( korea, china, japan) 순서대로 온다는 뜻이다. map에서는 위에 사용한 것 처럼 index()를 사용할 수 없다. 따라서 map을 key와 value따로 따로 리스트..

@for는 스타일을 반복적으로 출력한다. @for $변수 from 시작 through 종료 { } 관례적으로 숫자가 증가하는 변수 이름은 i나 index를 사용한다. from ~through i가 1부터 시작해서 3까지 반복을 한다. 그러면 3번 반복을 한다. through의 1번째 자식은 20px, 2번째 자식은 40px, 3번째 자식은 60px이다 from~to 두번째 코드는 1에서 3 전까지니까 2번반복한다. 주의할 점은 nth-child() 이 안에 괄호에 바로 $i를 넣는게 아니라 문자보관을 하는 표시인 #{}를 사용하여 넣어주어야한다.

if(함수) 조건의 값 (true, false)에 따라 두 개의 표현식 중 하나만 반환한다. 조건부 삼항 연산자와 비슷하다. 조건? 맞으면 : 틀리면; ↑이게 삼항 연산자이다. if(조건, 표현식1, 표현식2) if에서 함수로 $width가 300px보다 크다면 , width: $width로 들어가고, 아니면 null로 넣겠다. null은 속성을 사용하지 않는다는 뜻이다. @if(지시어) 같이 사용할 수 있는 지시어는 @else , if가 있다. // @if @if (조건) { /* 조건이 참일 때 구문 */ } // @if @else @if (조건) { /* 조건이 참일 때 구문 */ } @else { /* 조건이 거짓일 때 구문 */ } // @if @else if @if (조건1) { /* 조건1이..

함수 자신의 함수를 정의하여 사용 할 수 있따. mixin과 약간 비슷하다 차이점은 mixin은 지정한 스타일을 반환하는 반면 함수는 연산된 특정 값 @return 지시어를 통해 반환한다. box1에서는 함수를 그대로 썻으므로 기본 값 정의 그대로 들어간다. box2와 3에서는 첫번째 인수를 정의해주었으므로 number가 각각 8과 3인 상태이다 함수는 내장함수가 있는데 내가 만든 함수랑 충돌할 수가 있다. 그래서 내가 만든 것은 별도의 접두어를 붙인다. my-custom-func-red() 이런식으로

@extend 특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우 사용한다. 하지만 원치않은 부작용이 초래할 수 있으므로 사용 권장하지 않는다. 엄청나게 확장됨