CSS3(2)
-
css transform
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에 값을 줘서 형태에 변화를 주면 변한 만큼 주변 요소들의 위치에도 영향을 미치는..
2019.11.01 -
CSS:position, float
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..
2019.10.26