FDS12_Markup_Summary
Tansform, Transition
Transition(전이)
- : a 속성과 b 속성이 있으면, a에서 b로 점진적으로 변화하는 과정을 보여주는 것
-
이 기능을 이용하면 속성이 변화하는 과정을 통해 애니메이션 효과가 적용되어 동적인 느낌을 줄 수 있다.
- Transition property : 점진적으로 변화시키고자 하는 속성을 지정
- Transition duration : 변환이 진행되는 시간을 지정
- Transition delay : 변환이 진행되기 전 지연되는 시간을 지정 (얼마나 있다가 변화할건지)
- Transition timing function : 진행 속도의 형태를 지정하는 속성 (빨랐다가 느리게 등)
- Animation과 다르게 iteration, fill-mode 등이 없다.
Transition 통합 속성 :
/* 예시 */
div {
transition : all 3s ease-in 2s ;
}
Transition 실습
:hover시 색상 바뀜
- 다중 속성 transition은 property 이름을 명시해줘야 일어남
.box{
border: 5px solid #000;
background: yellow;
width: 300px;
height: 300px;
transition: background 1s, border-radius 1s 1s, border-color 1s;
display: flex;
justify-content: center;
align-items: center;
}
.box:hover, .box:focus {
outline: 0;
background: pink;
border-radius: 50%;
border-color: salmon;
transform: rotate(2turn) translateX(50px);
}
: 순서대로 property name, duration, delay
Transform(변형)
- rotate() 쓸거임
.box{
border: 5px solid #000;
background: yellow;
width: 300px;
height: 300px;
transition: background 1s, border-radius 1s, border-color 1s, transform 1s;
}
.box:hover {
background: pink;
border-radius: 50%;
border-color: salmon;
transform: rotate(360deg);
}
- 다중 transform
.box:hover {
background: pink;
border-radius: 50%;
border-color: salmon;
transform: rotate(2turn) translateX(50px);
}
- Keyboard focus를 이용해서도 transition할 수 있게
.box:hover, .box:focus {
outline: 0;
background: pink;
border-radius: 50%;
border-color: salmon;
transform: rotate(2turn) translateX(50px);
}
<div class="box" tabindex="0">박스</div>
- 모든 속성에 다 transition 부여
.box{
border: 5px solid #000;
background: yellow;
width: 300px;
height: 300px;
transition: all 1s;
}
Web Cafe | 관련 사이트
var listRelated = $('.related-list');
// 관련 사이트 transition
listRelated.on('mouseover focusin',function(e){
listRelated.addClass('list-act');
});
listRelated.on('mouseout focusout', function(e){
listRelated.removeClass('list-act');
});
- mouseover는 직접 event를 걸지 않은 자식 요소에 mouse ponter가 와도 event 발생
- mouseenter는 오로지 자기 자신에게 pointer 와야 발생
[log를 찍어본 결과]
<ul>의 자식요소인<li>로 mouse pointer를 이동시킬 때, 원래 pointer가 올라가있던 요소에서 mouseout이 일어나는 것과 동시에 다른<li>에 mouseover가 되므로 transition이 일어나는 시간보다 다시 mouseover가 돼서 addClass되는 시간이 더 빨라 상태가 유지되는 것처럼 보인다.- Focusin과 focusout 또한 마찬가지이다.
Web Cafe | 인기 사이트
- Semantic Markup
<ol>원래의 numbering 안 보이게 overflow hidden하고 number 사용해서 가상요소 만들기
.favorite-list li{
counter-increment: number;
}
.favorite-list li::before{
content: counter(number);
}
<li> 중간에 이미지가 오게 만들기!
- 글씨 크기가 커져도 중간에 위치할 수 있어야 함.
- position: absolute , top: calc(50%-(item-height)*.5)
.favorite-list em{ position: absolute; top: calc(50% - 11px*.5); right: 0; width: 9px; height: 11px; padding-top: 11px; overflow: hidden; }- Sprite 기법 Background position을 %로 주기
.favorite-list em.up{ background-image: url(images/rank.png); background-position: 0 0; } .favorite-list em.down{ background-image: url(images/rank.png); background-position: 0 100%; } .favorite-list em.stop{ background-image: url(images/rank.png); background-position: 0 50%; } - x% : 배경 이미지의 x% 부분과 box의 x%부분을 동일하게 맞춘다.
### Overflow: hidden 시 margin collapsing이 안 됨!
- Block formatting context
- Overflow가 넘어가면 Noamal flow를 벗어나 margin collapsing이 되지 않는다.
-
Flex 이용해서 배치하기
(1) .favorite-list li에 display : flex, justify-content : space-between을 준다.(2) 오른쪽으로 붙여야할 .favorite-list em의 왼쪽 여백을 auto로 지정한다.
이는 가장자리 item을 양 옆으로 배치하고 남은 여백 margin을 em의 left-margin으로 몰아넣는다는 뜻이다.
Web Cafe | Slogan
슬로건에 사용되는 Semantic Tags
- 인용구 tag
<blockquote>: block 형태 인용<q>: 문장 형태 인용<cite>: 출처
- Absolute요소 내부의 absolute : padding 없이 Image Replace
.slogan-heading::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(images/coffee.png);
}
.slogan-heading{
position: absolute;
bottom: -35px;
left: 0;
width: 110px;
height: 83px;
text-align: center;
padding-top: 10px;
}
- .slogan-heading::before는 .sogan-heading(position: static이 아니므로)을 기준으로 위치를 잡는다.