# translate

soosoorim

transform 관련 CSS 속성들 transform 은 어떤 요소를 독립적으로 움직이게 만들고 싶을 때 사용한다. 본인 원래 위치에서 자유롭게 (다른 요소에 영향 없이) 이동하게 된다. rotate는 회전, translate는 좌표이동, scale은 확대축소, skew는 비틀기 > 복잡한 애니메이션 구현법 이전 정리 버전에서는 간단한 a -> b 애니메이션들은 시작스타일, 최종스타일, 트리거, transition 주면 된다고 했다. 근데 a -> b -> a, a -> 1초정지 -> b 같은 복잡한건 못하는데 @keyframes를 쓰면 가능하다. 1. 가장 먼저 @keyframes 를 정의하기 @keyframes는 커스텀 애니메이션을 정의하기 위한 공간이라고 생각하면 된다. '움찔움찔'이라는 애니메이션을 0% 진행했을 때 CSS, 50% 진행했을 때 CSS, 100% 진행했을 때 CSS를 각각 작성한

bami

오늘 소개할 CSS의 기능은 트랜스폼(transform)입니다. 트랜스폼은 그 이름 그대로 요소의 크기/위치/형태를 변경하는 기능을 수행합니다. 트랜스폼을 잘 사용하면 정적인 웹사이트에 액션을 불어 넣어서 사용자의 이목을 끌 수 있습니다. transform transform은 기존 속성처럼 사용하지만 변형 함수라는 것을 이용해서 요소를 이동시키거나 확대/축소 시킵니다. 변형 함수는 x, y 축으로만 움직이는 2차원 함수와 z축까지 움직이는 3차원 함수 두 종류가 있습니다. 말이 z축이지 동작을 보면 확대와 축소에 가깝습니다. 각 속성의 값은 좌표평면계를 따르므로 x에서 양수는 오른쪽, y에서 양수는 위쪽, z에서 양수는 앞으로 요소가 움직입니다. 2차원 변형 함수

koyk0408

transform은 필자가 개발을 처음 배웠을때부터 꽤나 잘 사용하던 css 속성이다. 다만, 그저 translate를 쓰기 위한 등용문처럼 써왔달까...허허 그 외에도 scale도 좀 사용했고, rotate가 있다는 것 정도만 알았다. 그런데 이번에 프로젝트를 진행 중 흥미로운 걸 알게되어서 블로그에 박제해두려고 한다. 이김에 transform을 제대로 알고싶기도하고. > mdn에서 소개하는 transform translate() 보통 after나 before를 쓸 때 함께 사용했다. 브라우저와 사람의 기준점이 다르기때문에 요소의 한가운데를 중심으로 재정의하는데 주로 사용했다. 그 외에도 위치를 재조정하는데도 요긴하게 사용한다. px, %, rem 등등 모든 단위 사용 가능하다. X, Y축만 가공하는것도 가능하다. 3d, Z축도 가능한데, 이건 trans

myseventh

Text Input KeyUp Function 전화번호 입력을 위한 text 타입의 input 버튼 생성 맨 앞 3 자리는 고정 선택지 중 선택, 뒤의 각 4 자리는 입력 maxlength 속성은 입력 가능한 최대 text 개수를 의미 keyup() 함수는 키보드의 키를 눌렀다 뗄 때 이벤트 발생 text 타입의 input 버튼은 text의 글자 혹은 숫자의 개수만큼 length 값 발생 focus() 함수는 대상 태그에 커서를 깜빡이게 함 즉 2번째 자리 숫자 4개를 입력 시 3번째 자리로 자동적으로 넘어가게 하는 코드 Transform Attribute 이미지 3개 생성 transform 속성은 style 속성이므로 css로 속성 부여 가능 x도 시계 방향 회전을 위해서는 속성 값으로 rotate(xdeg) 부여 deg, rad, grad는 회전을 위한 동일한 의미의 단위 rotate(0deg)는 원

brinymaestro05

transform : translate(00, 00), rotate(00deg), scale(00) 지정한 요소의 크기, 위치, 각도회전 transition: 00s transform이 작용하는 시간

yj05037

transition과 transform을 간단히 정리해보자. transition은 css속성 변경시 두가지 상태에서 일어나는 변화를 커스텀할 때 사용한다. > transform: 회전, 크기조절, 기울이기 등 에니메이션 효과 > translate : transform에 사용할 수 있는 이동효과를 담당 > x좌표로 10px이동

ohmy0418

Transform(변형) | 웹접근성과 웹표준 요소 박스를 변형하는 속성. 2차원 및 3차원 변형이 가능하며 변형 형태별로 함수 타입의 속성 값을 지정한다. transform translate(value, [value]); HTML 요소 박스를 평면 상에서 수평 이동하는 기능 요소가 변형 기준점으로부터 가로 및 세로 방향으로 이동하는 길이 값을 지정할 수 있다. translate()로 이동된 요소는 다른 요소의 배치에 영향을 끼치지 않는다. scale(number, [number]); HTML 요소 박스의 크기를 변형하는 기능 translate()함수와 마찬가지로 x, y 값을 지정하여 가로 및 세로 크기를 조절할 수 있다. 지정 값은 단위를 가지지 않는 number 단위로, 이 값은

dohan_

좋은 아침이네요. Github Universe에 오신 여러분 그리고 온라인으로 시청하고 있는 모든 분들 안녕하세요! 저는 Thomas이고 개발자 입니다. 오늘 이 공간을 가득 매운 개발자분들을 볼 수 있다는 것 제게 가장 큰 기쁨이자 원동력입니다. 저 또한 여기 계신 많은 분들처럼 코드를 짜는 것에 열정을 담고 있습니다. 어릴 때 처음 코드를 짜기 시작했을 때에는 BASIC을 사용해서 작은 프로그램들을 개발했었고, 대학생이 되어서는 Linux와 Emacs를 사용해서 개발했으며, 20대 중반 자동차 공장에서 일할 때에는 Windows PC와 Visual Studio를 사용해서 개발하였습니다. 그리고 지금 20대 후반이 된 저는 Github만으로 개발합니다. iPad로 code space를 통해 어디서든 코드를 짤 수 있습니다. 심지어 공항에서도 말이죠. 많은 것이 변했고 인터넷이 급부상 하면서 오픈 소스는 날개를 달았습니다. 오픈소스가 세계를 이끌고 있습니다! 심지어 오픈

dohan_

✨ 개요 많은 개발자분들의 최종목표라고 할 수 있는 운영체제 개발 혹은 커널 개발이라는 분야에 관해 찾다보면 정말 많은 자료를 볼 수 있는 사이트는 [wiki.osdev.org] (https://wiki.osdev.org/Main_Page) 라는 사이트입니다. 아직 학생이고 어리지만 제게 있어서도 개발자로서의 저의 최종 목표는 운영체제 개발이고 몇 년 전부터 대학교 도서관을 통해 운영체제론과 관한 책 부터 개발관련 책까지 읽으며 공부한적이 있고 아직 현재진행형입니다. 배우면서 느낀 점은 어렵다.어렵다.어렵다.어렵다.어렵다. 입니다ㅋㅎㅋㅋㅋㅋ 내용 자체도 어렵지만 영어라는 언어의 벽이 너무나 큰것도 있습니다. 그래서 제가 위에서 언급한 위키 사이트를 번역 중 입니다. 실제 위키 사이트를 만들고 싶은데 여건이 안되어서 Notion에서 작업 중 입니다. 느리지만 착실히 번역하고 있으니 많이들 구경 와주세요ㅎㅎ! 😲 그래서 링크는요? 노션 페이지 [OsDev Wik

southbig89

transtion CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있다 > transition-property - 동적인 효과를 적용할 프로퍼티를 지정(가로길이, 세로길이 등) transition-duration - 동적인 효과가 진행되는 시간을 지정 transition-timing-function - 효과의 진행속도를 조절(점점 빠르게, 점점 느리게 등) transition-delay - transition 요청을 받은 후 실제 실행할 때까지 지연시간을 설정 transform 엘리먼트에 회전, 크기 조절, 기울이기, 이동 효과 등을 부여할 때 사용 translate transform 속성에 사용할 수 있는 변형 함수 중 하나로 이동 효과를 담당한다

rondido

transform translate 이동 0,0기준으로 이동 첫번째 인자 x축, 두번째 인자 y축 한개의 인자 값만 입력 시에는 x축으로만 이동 사용 가능한 단위는 length(px, rm) or percentage 음수 사용시에는 0,0을 기준으로 x축은 왼쪽으로 y축은 위쪽 이동 >translateX 프로퍼티 사용시에는 x축으로만 translateY 프로퍼티 사용시에는 y 축으로만 이동

rlaclgns321

transition : 엘리먼트의 CSS 속성을 변경할 때 두 가지 상태에서 일어나는 변화를 커스터마이징 transition : background-color linear 2s; MDN_transition transform : 엘리먼트에 회전, 크기 조절, 기울이기, 이동 효과 tranform : scale(2); MDN_transform translate : transform 속성에 사용할 수 있는 변형 함수 중 하나로 이동 효과를 담당 transform : translateX(10px);

mangojang

목적 : 이미지에서 텍스트를 추출 하고, 그것을 영문으로 번역한 산출물을 얻는다. > OCR Fullname : Optical Character Recognition , 텍스트를 감지하고 추출 함. 아래의 작업개요는 google cloud OCR 튜토리얼 공식 문서를 기반으로 함. https://cloud.google.com/functions/docs/tutorials/ocr 작업 개요 google cloud 서비스 계정 생성 및 환경 세팅 cloud storage API - bucket cloud vision API - 텍스트 추출 cloud translation api - 추출된 텍스트 번역 텍스트 bucket에 저장 GCP (google cloud platform) setting [서비스

kdeun1

The New Vue Evan You Nov 2021 @ VueConf Toronto 이 세션에서 Evan You는 새로운 구문, 문서, 빌드 도구, devtools 및 TS/IDE에 이르기까지 새로운 Vue 3 경험에 대한 이야기를 하였다. Vue가 세상에 처음 소개되었을 때는 Library였다. cdn을 통해 가져와 브라우저에 로드하고 즉시 작동할 수 있는 단일 스크립트였다. 하지만, 시간이 지나 웹 개발이 진행되어 더 좋은 방향으로 발전되어 프레임워크 영역에서 확고하게 자리잡고 있다. > framework는 단순한 APIs이상을 수행한다. Build tooling IDE support Devtools Documentation Routing, State Management... 프레임워크는 페이지에 포함되는 단일 스크립트보다 더 많은 일을 한다. vue-cli, webpack으로 프로젝트를 구성할 수 있고, VS Code의 Vue를 위한 도구인 Vetur(htt

darcyu83

Slider를 구현한다. pure CSS로 구현할려고 하는데 헷갈린다. 아래는 정리된 코드이다. 기억 메모 ─Slider 슬라이더 영역을 설정 └ areaBeShown 컨텐츠가 보여지는 영역 (오버되는 컨텐츠는 감춘다. overflow:hidden) └ movingStage 좌우로 움직이는 영역 + 모든 컨텐츠가 표시된다. 예) 슬라이더 영역 {width : 1000px;} 컨텐츠가 보여지는 영역 {width: 500px; overflow : hidden;} 좌우로 움직이는 영역 {width: 1500px;} // 500px를 넘은 곳은 감춰진다. 그러면 애니메이션은 어디에 설정하나? 움직이는 객체에 transition 옵션을 설정한다. transition : all or transform 5s ease-in-out; 이상.

ttorrongggit

translate() 실행문 결과문   주의사항 문자만 변경 가능

gygy

🥯 margin: auto > 수평정렬만 가능하고, 수직 정렬은 불가능하다. 예를 들어 div는 블록 레벨인데, margin이 오른쪽으로 기본적용되어있는 것을 양쪽이 동일한 간격으로 자동으로 margin을 맞춰주는 것이기 때문이다. 🥯 text-align: center text외 다른 요소들을 가운데 정렬할 때도 쓰인다. > div같은 경우는 블록레벨이라 한 줄에 하나씩만 나오기 때문에 마진이 기본적용되어 있어, margin:auto를 적용해야만 가운데 정렬이 된다. > 수평정렬만 가능하고, 수직 정렬은 불가능하

songjy377

🔄 Transform 요소에 회전, 크기 조절, 기울이기, 이동 효과를 줄 수 있다. ⏹️ scale() > 2D상의 요소 크기를 재조정 할 수 있다. 한가지 값만 입력하면 x축에 대해서만 크기가 움직인다. 소수점, 음수 사용 가능하다. 요소의 container자체 크기는 그대로 유지하고, 해당 요소 자체의 크기를 변경한다. ⏹️ rotate() > <angle>값을 이용하여 요소를 회전시킨다. 단위는 deg이다. 양수는 오른쪽, 음수는 왼쪽으로 회전한다.

soryeongk

1. transform transform은 특정 영역에 회전, 확대/축소, 각도 변경, 위치 변경 등의 효과를 적용할 때 사용됩니다. 상기 코드로 기본 세팅을 하면 다음과 같이 빨간 네모가 생성됩니다. 1-1. rotate() transform의 속성 중 회전을 위한 속성값입니다. 괄호 안에 {각도}deg를 넣으면 해당 각도만큼 오른쪽으로 회전을 합니다. 음수를 넣으면 왼쪽으로 회전합니다. 결과 화면 1-2. scale() 확대 또는 축소를 위해 사용되는 속성값입니다. 괄호 안에 `{가로 몇 배},

drv98

Transform 4_transform.html css style 태그 실습 https://codepen.io/learnwebcode/pen/GOWxzz?editors=1100 https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin