Programming/HTML & CSS5 CSS Animation - Rotate(빙글빙글 돌기) 한 자리에서 infinite하게 도는 animation을 만들고 싶어서 찾아봤다. 애니메이션은 아래와 같이 사용할 수 있는데, 보통 두번째나 세번째처럼 많이 사용하는 것 같다. 일단 keyframes에 대해 알아보자면, 어떤 모양에서 어떤 모양으로, 혹은 어디에서 어디로 이동할 지에 대해 정해줄 수 있는 메소드(?)다. 나는 360도 도는 동작을 원해서 아래와 같이 적어주었다. from-to 말고도 0% - 100% 이렇게 작성할 수 있다. @keyframes rotate { from { -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360.. 2021. 4. 6. 원하는 곳에 스크롤 넣기 내가 원하는 곳에 scroll 속성을 넣고싶다면, css의 overflow 속성을 이용하면 된다. overflow: scroll - 원하는 상위 태그의 내용이 넘치든, 아니든 항상 스크롤바가 붙는다. overflow: auto - 내용물이 경계를 넘칠 때에만 스크롤바가 붙는다. 내용물에 따라 스크롤바가 붙었다 안붙었다 하기 때문에 디자인에 어려움이 생길 수 있다. overflow: hidden - 상위 태그의 내용이 넘쳐도 보여주지 않음 세로로 스크롤바를 표시하려면 아래와 같이 overflow-y: scroll을 사용하면 된다. 2021. 3. 4. [CSS] em과 rem의 차이 간단히 말해 em은 상위 컴포넌트의 크기를 가져오는 것이고, rem은 root 컴포넌트의 크기를 가져오는 것이다. 예를 들어 안녕 이렇게 되어 있을 때, span의 "안녕" 사이즈는 바로 상위 div인 second-div 클래스의 스타일을 상속받아 오게 된다. first-div의 폰트 사이즈가 100px 이므로, second-div의 font-size는 first-div(root-div)의 영향을 받아 100*0.5로 50px이다. 즉, span의 폰트 사이즈는 50*0.5로 25px가 된다. 하지만 만약, rem을 쓰게 된다면, 안녕 span의 "안녕" 사이즈는 root div인 first-div 클래스의 스타일을 상속받아 오게 된다. first-div의 폰트 사이즈가 100px 이므로, second-.. 2020. 8. 6. HTML & CSS - 2. CSS 기본 HTML & CSS 기본 - CSS란? 1. CSS가 무엇인가요? CSS : Cascading Style Sheet == 상위 스타일이 하위 스타일에 영향을 주는 스타일 시트 Cascading의 뜻은 폭포수가 흐르는 모양이다. 그런 것처럼 css에서는 상위 스타일이 하위 스타일에 영향을 끼친다. 간단히 예를 들자면, body 요소 안의 스타일들은 body 요소의 영향을 받게 된다는 것이다. 문법 body { /* body 안에 스타일을 정해 준다는 것은 결국 이 웹 페이지 전체에 영향을 주는 스타일을 적용하겠다는뜻이다. /* 앞서 말했듯이 body 요소 안에는 유저들에게 보여질 모든 내용이 들어가게 되니까! /* 전체 스타일에 영향을 주는 스타일에는 폰트, 배경, 문서의 너비 등등이 있게 된다. } " .. 2018. 4. 19. HTML & CSS - 1. html 기본 HTML & CSS 기본 - html 이란? 1. HTML이 무엇인가요? HTML : Hyper Text(웹) Markup(활자) Language(언어) == 웹을 만들어내는 마크업 언어 웹 사이트는 곧 웹 문서 라고도 불린다. 그 중에서도 다른 사람들이 모두 접근 가능한 문서이다. HTML은 이러한 문서를 만들기 위한 언어이며, 웹을 구성하는 가장 작은 단위이다. 하지만 요즘에는 문서가 아닌 것을 만들기 위해서도 사용되기도 한다. (웹 어플리케이션, 또는 웹 앱이 있다.) 웹 사이트와 웹 어플리케이션의 차이가 뭐냐면, 웹 사이트는 " 주로 정보 제공" 용이고, 웹 어플리케이션은 "주로 사용자가 작업을 수행할 수 있게" 한다. 쉽게 예를 들자면, 뉴스, 등 정보를 제공하는 페이지는 웹 사이트고, 메일을 .. 2018. 4. 18. 이전 1 다음
