translate2 position: absolute; 로 중앙(가운데)에 맞추기 position: absolute; 를 사용하여 요소를 컨텐츠의 중앙에 위치시켜보겠습니다. 정중앙에 위치시키고자하는 요소에 transform: translate(-50%,-50%);를 지정할 필요가 있으며, 지정했을 때와 안했을 때의 차이까지 알아보겠습니다. 상하좌우 중앙 정렬(정중앙) 부모요소에 position: relative;를 해주면서 자식요소가 그 범위안에 움직일 수 있도록 position: absolute;와, top와 left를 각각 50%씩 그리고 transform: translate(-50%,-50%);를 지정해줍니다. HTML CSS .middle { position: relative; width: 200px; height: 200px; background-color: #ffd67a; .. 2023. 3. 14. ccs로 화살표 만들기 2 (가상요소 ::before, ::after 활용) css로 삼각형 만들기 1편에서 만든 삼각형에 가상요소를 생산하여, 가운데 막대를 만들어줍니다. 기본원리는 삼각형과 사각형의 조합입니다. 위쪽 방향 삼각형 위쪽 방향을 만든 후, 가상요소의 범위를 정하는 position: relative; 를 지정합니다. ::after에서는 사각형을 만든 후 top 위치를 삼각형의 높이 만큼 위치해줘야 면과 면이 닿을 수 있습니다. 사각형은 삼각형의 정중앙 바로 아래에 배치하기 위해 translate(-50%, 0%)을 사용합니다. -50%는 개체의 너비의 가운데에 위치시키는 것을 의미합니다. .arrow01 { position: relative; width: 0; height: 0; border-style: solid; border-width: 0 40px 60px 4.. 2023. 3. 13. 이전 1 다음
