CSS3 [CSS] <transform-function> translate() translate() CSS 함수는 요소의 위치를 수평 또는 수직 방향으로 변경하거나, 수평 및 수직 방향으로 변경한다. 실행 결과로 데이터 유형을 반환한다. 즉, 반환값이 transform 속성에 사용할 수 있는 변환함수임을 의미하는 것이다. /* 단일 값 */transform: translate(200px);transform: translate(50%);/* 이중 값 */transform: translate(100px, 200px);transform: translate(100px, 50%);transform: translate(30%, 200px);transform: translate(30%, 50%); translate() = translate( , ? )specifies a 2D tran.. 2024. 8. 27. [CSS] display 속성 display 속성display 속성은 요소를 어떻게 보여줄지를 결정한다. 주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다르다. 1) none: 보이지 않음2) block: 블록 박스3) inline: 인라인 박스4) inline-block: block과 inline의 중간 형태 none요소를 렌더링하지 않도록 설정한다. 영역도 차지하지 않는다. blockdiv태그, p태그, h태그, li태그 등이 이에 해당된다. 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보인다. width, height 속성을 지정할 수 있으며, block 요소 뒤에 등장하는 태그가 그 이전 block 요소의 오른쪽에 배치될 수 있어도 항상 다음 줄에 렌더링된다. inli.. 2024. 7. 23. [CSS] position 5가지 속성 정리 position 속성은 요소의 위치를 제어하는 데 사용된다.포지션을 어떻게 주느냐에 따라서 요소가 보이기도 하고 사라지기도 하던데 정확히 아는 것이 중요해보인다.position: staticposition 속성을 별도로 지정해주지 않으면 기본값으로 static이 적용된다. 요소는 일반적인 문서 흐름에 따라 배치된다. 이 때에는 top, right, bottom, left 속성을 주어도 적용되지 않는다. 왜냐면! static은 블록 요소는 위에서 아래로, 인라인 요소는 왼쪽에서 오른쪽으로 배치되기 때문에 위치 속성을 지정해도 무시되게 된다. position: relativeposition 속성을 relative로 설정하게 되면, 요소를 원래 위치에서 벗어나게 배치할 수 있게 된다. 요소를 원래 위치를 기준.. 2024. 7. 18. 이전 1 다음