[CSS] 반응형으로 정사각형 만들기

결론: after요소에 padding-bottom을 100% 넣어주면 된다.
내부에 다양한 크기에 컨텐츠가 있다면, position: absolute인 width, height 100%인 div로 감싸준다.

<div class="note">
    <div class="inner">
        <div class="title">{noteData.title}</div>
    </div>
</div>
.note {
  border: 1px solid red;
  &amp;:after { /* after로 반응형 정사각형 만들기 */
    content: &quot;&quot;;
    display: block;
    padding-bottom: 100%;
  }
  .inner { /* 내부에 컨텐츠가 있을 때 추가 */
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

Refer

https://spin.atomicobject.com/2015/07/14/css-responsive-square/

Advertisements

광광 울며 정리하는 Javascript의 this

전역에서 함수를 할당하면 window로 들어가는구나. 그래서 그 속에서 this를 찍어보면 Window객체가 나온다. new Foo()로 초기화하면 예상했던 대로 Foo { }가 나오고. 면접에서 털리고 광광 울며 정리중

 
js에서 모든 함수는 실행시마다 함수 내부에 this가 추가. arguments라는 유사 배열 객체와 함께 암묵적으로 전달. 그렇기 때문에 함수가 호출된 상황에 따라 그 모습을 달리 함.

  • this: 함수의 현재 실행 문맥. js에선 4가지의 함수 실행 타입이 있기 때문
      1. 함수 실행: alert(‘hi’)
      1. 메소드 실행: console.log(‘hello’)
      1. 생성자 실행: new RegExp(”)
      1. 간접 실행: alert.call(undefined, ‘hello’)
    • 각각의 타입은 서로 다른 문맥을 가진다. 더욱이 strict mode또한 실행 문맥에 영향을 미친다.
  • 즉시실행함수 역시 함수 실행의 종류 중 하나
var greeting = (function(name) {
    return 'Hi' + name;
})('Jay');
console.log(greeting)
  • 함수 실행에서의 this는 전역 객체다. 전역 객체는 실행 환경에 따라 결정. 웹 브라우저에선 window가 전역 객체.
function sum(a, b) {
    console.log(this === window); //true
    this.myNum = 20; // this에 추가했고, 전역인 window에 추가됨
    return a + b;
}

function strictSum(a, b) {
    'use strict';
    console.log(this === undefined); //true
    return a + b;
}
sum(1, 2); // 3. 함수 호출 -> 여기서 this는 전역 객체
window.myNum; // 20. this에 추가했는데 윈도우에 추가됨
  • 엄격 모드에서의 함수 실행 this
    • 위의 예제에서 만약 위에 ‘use strict’;를 적어줬다면, this는 undefined가 된다.
    • 엄격 모드는 현재 스코프 뿐만 아니라 내부 스코프에도 적용됨
var numbers = {
   numberA: 5,
   numberB: 10,
   sum: function() {
     console.log(this === numbers); // => true
     function calculate() {
       // this는 window, 엄격 모드였으면 undefined
       console.log(this === numbers); // => false
       return this.numberA + this.numberB; // numbers에 접근 불가
     }
     return calculate();
   }
};
// 이는 객체 내에 있는 메소드를 실행하는 것. 이 실행시의 this는 window
numbers.sum(); // NaN, 엄격 모드였으면 TypeError

refer: http://webframeworks.kr/tutorials/translate/explanation-of-this-in-javascript-1/