IT/HTML,CSS6 [CSS] 회전하는 로딩 애니메이션 만드는 방법 코드 설명. CSS를 이용하여 회전하는 로딩 애니메이션 만드는 방법에 대해 설명하려고 합니다. 설명 방법은 먼저 아래의 완성된 결과물을 보고 처음부터 코드 만드는 순서에 대해 설명하겠습니다. 완성된 결과물 See the Pen 회전하는 로딩 애니메이션 만들기 by solutiona80 (@solutiona80) on CodePen. 1. 로딩 영역의 동그라미 만들기 body{ margin:0; padding:0; } .count_motion{ height: 178px; position: relative; width: 178px; border-radius: 100%; border: 10px solid transparent; border-color: #00baff #fff #fff #fff; transform-origi.. 2022. 5. 9. [CSS3] object-fit 속성 이해하기 object-fit 속성 object-fit 속성은 , , , 요소와 같은 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정합니다. -형식 구문- fill contain cover none scale-down [예제] See the Pen object-fit by solutiona80 (@solutiona80) on CodePen. 예제를 보면 호두까기 인형을 (원본 사이즈 334 x 936) 사이즈가 큰 상태라서 비율에 맞게 줄였습니다. image origin - 원본 이미지로 비율에 맞게 영역을 잡아줬습니다. object-fit : fill - 대체되는 요소 컨텐츠의 내용이 지정된 너비와 높이에 따라 크기가 확대 혹은 축소, 늘어나거나 움츠러듭니다. - 종횡비는 유지되지 않으며 대체로 너비.. 2022. 3. 2. [CSS] - box-sizing을 이해하기 box-sizing을 사용하는 이유. 박스 크기를 결정할 때 width와 height 지정을 조금이라도 달라지면 박스 크기가 달라져서 전체 레이아웃에 균형이 틀어지는 상태가 발생하는데 이때 요소의 width와 height를 균일하게 유지하게 할 때 사용합니다. 같은 값이지만 다른 결과. See the Pen box-sizing 속성 이해하기_1 by solutiona80 (@solutiona80) on CodePen. 예제에 보시면 속성 값이 같은 두 box가 있는데 실제로 그려지는 모습은 다르게 보입니다. padding, border 제외한 경우 See the Pen box-sizing 속성 이해하기 2 by solutiona80 (@solutiona80) on CodePen. 예제에서 보면 paddi.. 2022. 2. 23. [HTML/CSS] 툴팁 사용 방법 HTML/CSS 툴팁 사용하는 방법 툴팁은 보통 컨텐츠 영역의 공간이 부족하여 객체에 오버 등을 이용하여 부연설명을 하기 위한 공간을 말합니다. 장점으로는 페이지의 가독성을 더 좋게 하여 사용자가 이해하기 쉬운 페이지를 만들 수 있습니다. [툴팁의 종류] 1. title 태그를 사용하여 구현 2. HTML/CSS를 사용하여 구현 title 태그를 사용하여 툴팁 구현 See the Pen [툴팁 예제] 1. title을 사용하기 by solutiona80 (@solutiona80) on CodePen. 예제를 보면 pink 색 박스 영역이 되어 있는 곳에 마우스를 오버하면 툴팁이 생기는 거 볼 수 있습니다. - 장점 - 사용 방법이 쉽다.(예제에 보면 단순하게 div 태그에 속성으로 title=''툴팁 예.. 2022. 2. 17. 이전 1 2 다음
