Programming Step/CSS2 CSS - 3D 윷 제작 css로 3D 윷 제작 시작은 이러하다. 윷 이미지를 가져와야 하는데 맘에드는 이미지가 없었다. css로 만든 건 있을 까 하고 찾다가 비슷한 주사위를 3D로 만드는 내용을 찾았다.(3d 주사위) 주사위를 위아래로 늘이고, 점 대신에 X를 그리니 직육면체의 윷 모양이 완성되었다. 코드를 살펴보니 transform과 rotate 를 사용하여 구현하였으며, 관련 css태그를 좀 더 공부해 보고자 한다. 트랜스폼 translate : 이동효과 scale : 확대/축소 효과 rotate : 회전 효과 skew : 비틀기(기울임) 효과 transform 효과는 translate 과 같이 사용해야 효과가 잘 느껴진다. translateX() translateY() 이동 translate 효과는 원래의 위치를 기반으.. 2021. 6. 21. CSS Flexbox 정리 1. Flex가 필요한 이유 일반적으로 웹페이지의 레이아웃은 display, float 등과 같은 속성을 사용해 구현한다. 하지만 이 속성을 사용하면 구현 방법이 복잡하고 레이아웃을 표현하는데 한계가 있었다. css3에 추가된 레이아웃인 flexbox를 이용하면 가로 및 세로의 사이즈를 따로 계산하지 않고도 간결하게 레이아웃을 표현할 수 있다. 2. flex 기본 요소 2.1 Container와 Items flex는 크게 Container와 Items로 나뉜다. 2.2 주축(main-axis)과 교차축(cross-axis) 주축과 교차 축으로 설명하는 요소들이 많으므로 알아두는것이 좋다. 2.3 flex-start 와 flex-end 주 축이나 교차 축의 시작하는 지점과 끝나는 지점을 지칭한다. 3. F.. 2021. 6. 20. 이전 1 다음
