목록Web/CSS (4)
noname02
CSS로 애니메이션효과를 만들 수 있다.애니메이션은 우선 키프레임을 정의하여 효과를 부여한다. 1234567@keyframes name { 0% { ... } n% { ... } 100% { ... }}cs 와 같이 키프레임을 정의한다. 키프레임을 정의했으면 애니메이션을 적용할 셀렉터에 animation 프로퍼티로 적용한다. 1234567891011.selector { animation: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state;} cs anim..
1. div박스 내에 이미지를 삽입했는데 이미지 아래에 div박스 공간이 남는다면, 이미지에 vertical-align: bottom 속성을 주면 박스가 이미지로 꽉 차게 된다. (모던 웹사이트 디자인의 정석 - 207p) 2. 미디어쿼리(뿐만 아니라 무언가 덮어씌울 css를 설정할 때)작성할 때, 당연하지만 css 선택자의 레벨에 따른 우선순위를 꼭 맞춰서 작성해줘야 한다. 3. position: fixed에서 left, right 값을 0으로 지정하고 margin: 0 auto; 를 주면 가운데로 배치된다. 4. 화면 밑에서 slide-up 되는 효과 : div박스 height를 0으로 설정하고 bottom: 0으로 바닥에 붙인 뒤, height: 100%로 트랜지션을 주면 쭈욱 올라옴. 5. pos..
float이 적용된 div박스가 3개가 있다고 하자. 첫번째 div박스부터 div1, div2, div3라고 하자.그럼 여기서 div2의 클리어 속성은 div1에 대해서만 적용이 된다.div1에 클리어 속성을 넣어봐야 어떠한 변화도 일어나지 않는다. div2, div3와는 상관이 없다. 왜냐하면 div1에 영향을 주는 float이 없기 때문이다.