분류 전체보기17 CSS margin 속성 사용법 정리 CSS에서 요소 바깥쪽 여백을 설정하는 margin 속성. 정말 많이 사용하는 속성인데 사용하는 방법도 다양하고 사용할 때마다 혼동이 오는 경우가 많아서 오늘 margin 속성 사용법을 정리해 보려고 합니다! 우선 margin 속성을 지정할 div 요소와 영역을 만들어 주겠습니다. 그럼 이제 margin 속성을 부여하며 사용법을 알아 볼까요? 방법1. 내부 속성 이름(left, right, top bottom) 을 모두 지정해 주기 첫번째 방법은 모든 속성을 하나하나 지정해 주는 방법입니다. .inner_area { margin-top: 40px; margin-right: 20px; margin-bottom: 30px; margin-left: 50px; border: 2px solid black; wid.. 2022. 12. 27. CSS 원형 로딩 스피너 (css circle loading spinners) 안녕하세요~ 오늘은 로딩화면에서 빙글 빙글 돌아가는 로딩 스피너를 만들어 보려 합니다! css를 활용하여 style을 주고, 애니메이션을 사용하여 가장 기본적인 스피너를 만들어 볼 계획입니다. 결과 화면을 먼저 확인해 볼까요? 위와 같이 원형 스피너 일부가 색상을 가지고 돌아가는 모양의 스피너 입니다. 그럼 요소부터 말들어 보겠습니다. 1. 사각형 요소 만들고 윗부분 색상 주기 위와 같이 container 영역 내부에 spinner 영역을 사각형으로 만들어 주고 크기와 색상을 지정해 줍니다. 여기서 사각형 테두리의 경우 전체 border 값은 rgba(255, 255, 255, 0.3) 값을 사용해 0.3만큼 투명하게 만들어주고 border-top-color 값만 white로 주어, 윗부분의 테두리 색상.. 2022. 12. 22. CSS box-sizing 속성 (영역, 기준 정리) 안녕하세요! 오늘은 컨텐츠의 영역과 위치의 기준을 정할 수 있는 css box-sizing 속성에 대해 정리해 보려 합니다. css에서 다음과 같이 속성을 설정 할 경우 화면상에 실제 요소의 크기는 어떻게 나타날까요? [html] 아래의 왼쪽 이미지 처럼 내부 width 길이가 200px로 잡히고 padding영역과 border영역이 더해져 전체 width 길이가 300px로 나타 날까요? 오른쪽 이미지 처럼 전체 길이가 200px로 잡히고 내부 영역의 길이가 100px로 나타 날까요? 결과 화면은 box-sizing 속성과 관련이 있습니다. box-sizing 속성을 별도로 지정하지 않을 경우 content-box속성으로 설정 되기 때문에 결과 화면은 왼쪽 화면 처럼 나타나게 됩니다! 그럼 box-si.. 2022. 12. 21. CSS 도트 확대 로딩바 (css dot loading bar) 안녕하세요~ 오늘은 원형 도트가 서서히 확대되는 애니메이션의 로딩바를 만들어 보려고 합니다! 결화 화면 부터 먼저 확인해 보겠습니다. 위와 같은 원형의 도트가 차례로 하나씩 확대대는 로딩바입니다. keyframes, transform 속성을 이용해 원형 애니메이션을 만들고, 시간차를 주어 효과를 적용해 보려 합니다. 우선 요소를 만들고 자리잡아 주겠습니다. 1. 내부 요소 만들기 [html] 위와 같이 전체 초록색 배경의 영역인 container와 내부 도트가 위치할 영역인 area를 만들어 주고, 내부에 dot1, dot2, dot3 3개의 도트 요소를 만들어 줍니다. 도트 요소의 경우 border-radius 속성을 100%로 주어 원형으로 만들어 주었습니다. .area 영역의 margin의 경우 전.. 2022. 12. 20. 이전 1 2 3 4 5 다음 more