✏️ 트랜지션(transition)웹 요소의 배경색을 바꾸거나 도형의 테두리를 사각형에서 원형으로 바꾸는 것처럼 스타일 속성을 바꾸는 것예를 들면 파란색 사각형 위에 마우스를 가져다대면 빨간색 사각형으로 바뀌는 것 등을 생각해 볼 수 있음이런 식으로 웹 요소의 스타일 속성이 시간에 따라 바뀌는 것을 의미 ✏️ 트랜지션과 속성종류설명transition-property 트랜지션의 대상을 설정transition-duration트랜지션의 실행 시간을 설정transition-timing-function트랜지션의 실행 형태를 지정transition-delay트랜지션의 지연 시간을 지정transition위의 속성들을 한꺼번에 지정 #1 트랜지션의 대상을 지정하는 transition-property 속성..
✏️ transform과 변형 함수CSS에서 변형을 적용하려면 transform 속성과 변형 함수 이름을 함께 작성 해야 함 기본형 => transform: 함수 ✏️ 2차원 변형 함수종류설명translate(tx,ty)지정한 크기만큼 x축, y축으로 이동translateX(tx)지정한 크기만큼 x축으로 이동translateY(ty)지정한 크기만큼 y축으로 이동scale(sx,sy)지정한 크기만큼 x축, y축으로 확대.축소scaleX(sx)지정한 크기만큼 x축으로 확대.축소scaleY(sy)지정한 크기만큼 y축으로 확대.축소rotate(각도)지정한 각도만큼 회전skew(ax,ay)지정한 크기만큼 x축, y축으로 왜곡skewX(ax)지정한 크기만큼 x축으로 왜곡skewY(ay)지정한 크기만큼 y축으로 왜..
✏️ 연결 선택자종류형식설명하위 선택자상위요소 하위요소상위 요소에 포함된 모든 하위 요소를 선택자식 선택자상위요소 > 하위요소부모 요소에 포함된 자식 요소만 선택인접 형제 선택자요소1 + 요소2요소1 이후 맨 처음에 오는 형제 요소를 선택형제 선택자요소1 ~ 요소2요소1 이후 오는 모든 형제 요소를 선택✏️ 속성 선택자종류선택 요소예시[속성]해당 속성이 있는 요소[required][속성=값]지정한 속성값이 있는 요소[target = _blank][속성~=값]지정한 속성값이 포함된 요소(단어별)[class ~= button][속성|=값]지정한 속성값이 포함된 요소(하이픈 포함, 단어별)[title |= us][속성^=값]지정한 속성값으로 시작하는 요소[title ^= eng][속성$=값]지정한 속성값으로 ..
✏️ 사용자 동작에 반응하는 가상 클래스사용자가 웹 요소를 클릭하거나 마우스 포인터를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 함 #1 가상 클래스 - link 가상 클래스 선택자웹 문서의 링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시 / 이때 링크의 밑줄을 없애거나 색상을 바꿀 수 있음 #2 가상 클래스 - visited 가상 클래스 선택자웹 문서의 링크 중에서 한 번 이상 방문한 링크에 스타일을 적용하며 한 번 이상 방문한 링크는 보라색이 기본값사용자가 방문한 텍스트 링크와 색상이 달라지지 않게 하려면 visted 선택자를 사용하여 조절 #3 가상 클래스 - hover 가상 클래스 선택자웹 요소 위로 마우스 포인터를 올려놓..
- Total
- Today
- Yesterday
- 카운팅 정렬
- C++ Stack
- CSS
- DFS
- 스택
- Do it!
- js
- java
- html
- 에라토스테네스의 체
- 자바
- HTML5
- 반복문
- 우선순위 큐
- 자바스크립트
- 이분 매칭
- 알고리즘
- C++
- 최단 경로
- 자료구조
- 유클리드 호제법
- BFS
- 세그먼트 트리
- 유니온 파인드
- DP
- 투 포인터
- c++ string
- 알고리즘 공부
- 백준
- 백준 풀이
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |