beforeCreated 인스턴스 생성 후 가장 첫 라이프 사이클 단계 data,methods 속성이 아직 인스턴스에 정의되지 않음, DOM에 접근 불가 created data, methods 속성이 정의되어 this.data처럼 접근 가능 , 인스턴스 화면 부착전. 따라서 template 속성에 정의된 DOM요소로접근 불가 서버에 데이터 요청하여 받아오는 로직 수행하기 좋은 단계. beforeMount 템플릿 속성에서 지정한 마크업 속성을 render()로 변환 후 el 속성에 지정한 DOM에 인스턴스 부착 직전에 수행되는 단계 즉,render() 호출 직전 수행할 로직 구현 적합 mounted el에 지정한 DOM에 인스턴스 부착된 후 호출되는 단계 DOM에 접근 가능, 화면 요소 제어하는 로직 적합..

transform 이름에서 알 수 있듯이 형태를 변환하는 동작을 한다. 보통 기준점이 왼쪽 상단인 것에 비해 트랜스폼은 기준점을 요소의 중앙으로 잡는다. transform-origin를 사용해서 기준점 위치를 변경할 수 있다. 속성: left(0%), top(0%), center(50%), right(100%), bottom(100%) (키워드 대신 괄호 안의 숫자값도 넣을 수 있음) ex) transform-origin: left top; 또는 transform-origin: 0% 0%; 이렇게 하면 왼쪽 상단이 기준이 됨. 요소 형태 변화가 다른 요소들의 위치나 형태에 영향을 주지 않는다. cf) width와 height에 값을 줘서 형태에 변화를 주면 변한 만큼 주변 요소들의 위치에도 영향을 미치는..

position 속성 차원 부모-자식간 마진병합 top,right, bottom, left 적용 가능여부 자식의 높이 값이 부모에게 영향 z- index 적용 static 2차원 O X O X fixed 3차원 X O X O relative 2,3차원 O O O O absolute 3차원 X O X O (참고- fixed는 주로 bar에 사용) *부모-자식간 마진 병합? (부모와 자식이 둘 다 2차원일 경우 발생) 부모와 자식 각각 마진 값을 줬을 경우, 마진값이 더 큰 쪽에 병합된다는 뜻인데 예를들어, 부모에 margin-top: 3px, 자식에 margin-top: 5px; 줬을 때 마진 값이 더 큰 값에 병합되어 부모도5px, 자식도5px 만큼의 margin-top 공간이 생긴다. *float도 3..