주어진 기간 동안 속성값을 부드럽게 변경할 수 있도록 해줍니다. 예시를 만들 때 영상을 찍어 gif로 만들어서 첨부하면 보시는데 편하시겠지만 시간이 오래 걸리는 관계로 만들지 못했습니다. Transition 의 프로퍼티 종류 transition transition-delay transition-duration transition-property transition-timing-function transition transition효과를 주기위해서는 두개의 값이 필요합니다. 효과를 주길 원하는 CSS 속성(transition-property) 효과의 지속 시간(transition-duration) 참고: 지속시간의 명확하지 않다면 기본값이 0이 되어 trasition 효과가 발생하지 않습니다. 너비 100..

3D transform 메소드 종류 rotateX() roetateY() rotateZ() rotateX() 주어진 회전율에 따라 x축을 회전합니다. origin: x축을 기준으로 180도 회전시켰습니다. rotateY() y축을 기준으로 회전합니다. origin: y축으로 180도 회전시켜보겠습니다. rotateZ() origin: 43도 만큼 z축을 회전했습니다.

transform, transitions, animations, keyframes Transform 요소를 이동(move), rotate(회전), scale(), skew(비튼다) 기능 translate() 요소를 현재 위치에서(x축과 y축에 대한 지정된 매개변수에 따라) 이동합니다. origin: 현재 위치에서 x축을 50px, y축을 100px이동해보겠습니다. 인자로 음수값도 가능합니다. rotate() 주어진 각도에 따라 요소를 시계 방향 또는 반시계 방향으로 회전합니다. origin: rotate의 인자값에 따라 시계방향으로 회전합니다. rotate에 인자로 음의 값을 사용하면 반시계 방향으로 회전합니다. scale() 지정된 매개 변수에 따라 요소의 크기를 늘리거나 줄입니다. origin: 너비..

position 속성은 요소의 위치를 지정합니다. position은 웹 페이지를 만들때 정말 자주 사용하게 되는데요. 디자인 시안에 맞춰 디자인을 적용할 때 position이 없으면 어떻게 됬을까 생각듭니다. 그런데 정확히 스크롤을 내릴때라던지 구체적으로 각각 뭐가 다른지 잘 모르고 사용해왔기 때문에 오늘은 제 궁금증을 전부 풀어보는 시간을 가져보려합니다. value의 종류 static relative absoulute fixed sticky position: static; position을 지정하지 않으면 기본으로 설정되는 값 입니다. top, bottom, left, right을 사용할 수 없습니다. 일반적인 페이지 흐름에 따라 위치하게 됩니다. top속성을 넣어보겠습니다. position: rela..

참고자료 https://youtu.be/W6VSA3GDK6s https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA https://youtu.be/MQHNTzdqet0 ARIA W3S의 공식 스펙으로 HTML에 추가할 수 있는 속성 화면낭독기와 같은 보조 기술들에 접근성을 향상시켜 주는 속성 총 3가지로 정의 역할(Role) - UI에 특정 컴포넌트의 역할을 정의 속성(Property) - 해당 컴포넌트에 속성명으로 aria-xx라는 접두사를 사용 상태(State) - 컴포넌트의 상태 정보를 정의 무조건 aria가 좋은거는 아니다. aria를 사용하는 것 보다 오바르고 의미있는 HTML요소를 사용하는 것을 목표로 작업을 해야한다.

이름에서 알 수 있듯이 Vue 라우터가 제공하는 탐색 가드는 주로 리디렉션이나 취소로부터 탐색을 보호하는데 사용됩니다. 경로 탐색 프로세스에 연결하는 방법에는 전역, 경로별 또는 component 내 등 여러가지가 있습니다. Global Before Guard 'router.beforeEach'를 사용하여 가드하기 전에 전역에 등록할 수 있습니다. const router = createRouter({...}); router.beforeEach((to, from) => { //탐색을 취소하려면 명시적으로 false를 반환합니다. return false }) Navigation이 트리거될 때마다 작성 순서대로 가드를 호출하기 전에 전역으로 이동합니다. 가드는 비동기식으로 해결될 수 있으며 모든 후크가 해결되..

1. 기본타입 number string boolean undefined null unknown 알 수 없음 사용하지 않는 것이 좋다. 자바스크립트 라이브러리에서 리턴하는 값을 모를 때 any 알 수 없음 사용하지 않는 것이 좋다. void never 함수에서 리턴하는 값이 없을 때 thorw new Error while(true) object 2. 함수타입 3. 배열과 튜플 4. Type Alias 5. Union 6. Discriminated Union 7. Intersection 8. Enum 9. 타입 추론 10. Type Assertion 예) (result as string).trim() (result).trim()

참고 자료: https://learn.microsoft.com/ko-kr/azure/aks/tutorial-kubernetes-prepare-app Azure의 Kubernetes 자습서 - 애플리케이션 준비 - Azure Kubernetes Service 이 AKS(Azure Kubernetes Service) 자습서에서는 Docker Compose를 사용하여 AKS에 배포할 수 있는 다중 컨테이너 앱을 준비하고 빌드하는 방법을 알아봅니다. learn.microsoft.com 실습을 위한 준비물로 docker를 실행시켜 줘야한다. 이제 시작을 해보자. github에서 실습할 소스코드를 clone한다. 소스 코드를 보면 docker-compose.yaml이 있는데 이것을 통해 이미지를 다운받고 컨테이너를..