1. codepen tip
Lorem*100 탭치면 의미없는 글자들로 화면을 넘어가게 글자를 채울 수 있다.
2. pxied
position absolute의 경우 아무리 높이를 100%로 줘도 스크롤바를 내리면 더이상 해당 요소가 이어지지 않느낟.
이럴때 position: pixed를 주면 사이드바 위치를 고정할 수 있다.
3. transition
transition(변화)
transition: background-color 5s; 백그라운드 컬러가 바뀌는데 5초 걸리겠다.
이벤트 발생시 줄 건지 요소 자체에 줄 건지에 따라 반응이 다르다.
예를들어 hover에 속성을 주면 마우스를 올릴때만 경과에 시간이 걸리지만
요소 자체에 transition을 걸고 hover에서 해당 속성의 변화를 주면 마우스를 올릴 때도, 땔 때에도 일정 시간에 걸쳐서 변화한다.
아래와 같이 여러속성에 걸쳐 transition 속성을 줄 수도 있다.
transition: background-color 5s, width 3s;
4. width0짜리 블록에 애니메이션 효과를 주려면?
Q. width 0 짜리 블록에 애니메이션 효과를 주려면 어떻게 해야 될가?
너비가 있는 형제블록에 hover됬을 때 width 0짜리 블록이 변화하도록 하면 된다.
5. after, before
요소의 앞 뒤로 가상의 공간을 선택한다.
이때 content속성으로 가상의 공간에 글자등 추가할 수 있으나 선택이 되지는 않다.
앞 뒤 공간은 요소에 포함된다. (if: a 태그의 befor, after 영역에는 링크가 걸린다.)
순서 머리속으로 생각하여 글 쓰기.
6. 선택자 응용
a:only-child (형제 요소가 없는 a만 선택)
a:not(:only-child)0 (형제 요소가 있는 a만 선택)
7. ul에 빈틈없이 꽉차는 li 만들기
안 1. li에 width %주기. -> 안된다. 줄이 내려갔다.
안 2. li에 width 140px주기. -> 안된다. 줄이 내려갔다.
안 3.
.menu_box_1 > ul > li:not(:first-child) {
margin-left: -6px;
} -> 안된다 전체적으로 우측 여백이 조금 남는다.
안4. ul에 width inherit준 후에 1해보기: 변화 없다. 줄이 내려간다.
왜? li사이에 빈 공간이 있다.
안5. li사이 공간을 esc로 삭제해 문자로 인한 여백을 없앤다. -> 포맷이 망가진다.
강사님답안. 간격을 줄이기 위해 기본 폰트사이즈를 0으로 함
8.float
float(left) 공백을 무시하고 왼쪽부터 블록을 쌓는다.
float -> 떠오르다는 의미. 아! 그래서 부동소수점 방식이 flaot구나!소수점이 둥둥 떠다녀서!
row(cell의 부모한테 줄것)
.row:after{
content: "";
clear: both; ->(HTML의 colspan같은 개념)
display: block;
}
