![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bQHAKW/btsHedpcuqF/hW8XH1oKzpZrmUrthHUEB0/img.png)
✏️ 미디어 쿼리(Media Queries)사이트에 접속하는 장치에 따라서 특정한 CSS 스타일을 사용하는 방법 미디어 쿼리를 사용함으로써 접속하는 기기의 화면 크기에 따라서 레이아웃이 달라짐 / 즉, 사용자가 어떤 미디어를 사용하는가에 따라 사이트의 형태가 바뀌도록 CSS를 작성하는 방법을 뜻함 ✏️ 미디어 쿼리 구문@media 속성을 사용해 특정 미디어에서 어떤 CSS를 적용할 것인지 지정사이에 사용하며 대소문자 구분x, 미디어 유형을 지정해야 하며 and 연산자로 조건 적용기본형 => @media [only | not ] 미디어 유형 [and 조건] * [and 조건]only : 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않음not : not 다음에 지정하는 미..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/m8HsW/btsHealHAoP/V3kti90a6TN6ppKD91YY20/img.png)
✏️ 반응형 웹 디자인웹 요소를 화면의 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어서 사이트를 구현하는 것 ✏️ 뷰포트(ViewPort)반응형 웹 디자인에서 기본적으로 알아둬야 할 개념 / PC에 맞게 제작한 웹 사이트를 모바일 기기에서 접속해서 보면 모든 내용이 작게 보이는데 이는 PC화면과 모바일 화면에서 표시되는 픽셀의 차이 때문에서 발생함. 여기서 뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시할 수 있음. 즉, 뷰포트는 스마트론 화면에서 실제 내용이 표시되는 영역 #1 뷰포트 지정뷰포트는 스타일 태그처럼 태그를 이용해 태그 사이에 작성기본형 => 종류설명사용 가능한 값기본값width뷰포트 너비device-with 또는 크기브라우저 기본값height뷰포트 높이..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/1kJY6/btsG3mocyVZ/z5KIkPB1eMvxiOr1I1OjRk/img.png)
✏️ 변형 함수translate() 함수: 요소 이동하기transform: translate(tx,ty)지정한 크기만큼 x축과 y축으로 이동transform: translate(tx,ty,tz)지정한 크기만큼 x축과 y축, z축으로 이동transform: translateX(tx)지정한 크기만큼 x축으로 이동transform: translateY(ty)지정한 크기만큼 y축으로 이동transform: translateZ(tz)지정한 크기만큼 z츅으로 이동scale() 함수: 요소 확대 및 축소하기transform: scale(sx,xy)지정한 크기만큼 x축, y축으로 확대 및 축소transform: scale3d(sx,xy,sz)지정한 크기만큼 x축, y축, z축으로 확대 및 축소transform: sca..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/MxkDT/btsG3N6MiDT/JW6zdjq8ndjSidjB6pH7uk/img.png)
✏️ animation 속성자바스크립트를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있음 / 특정 지점에서 스타일을 바꾸면서 애니메이션을 만들고, 이렇게 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임이라고 함, 키프레임은 @keyframe 속성으로 정의하고, animation 속성과 그 하위 속성을 이용해서 애니메이션의 특성을 지정종류설명@keyframes애니메이션이 바뀌는 지점을 지정animation-delay애니메이션의 시작 시간을 지정animation-direction애니메이션을 종료한 뒤 처음부터 시작할지, 역방향으로 진행할지 지정animation-duration애니메이션의 실행 시간을 지정animation-iteration-count애니메이션의 반복 횟수를 지정animation-na..
- Total
- Today
- Yesterday
- HTML5
- 자바스크립트
- 알고리즘 공부
- 카운팅 정렬
- js
- 세그먼트 트리
- 이분 매칭
- C++ Stack
- 백준
- 자바
- C++
- c++ string
- 유니온 파인드
- html
- CSS
- 백준 풀이
- java
- DFS
- 자료구조
- 알고리즘
- 에라토스테네스의 체
- 스택
- 투 포인터
- Do it!
- 유클리드 호제법
- BFS
- 최단 경로
- 우선순위 큐
- 반복문
- DP
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |