Programmers

1) transform 2D 변환 함수 글꼴(서체) 지정 속성 값 값(변환함수) 의미 기본값 translate(x, y) 이동(x축, y축) 단위 translateX(x) 이동(x축) 단위 translateY(y) 이동(y축) 단위 scale(x, y) 크기(x축, y축) 없음(배수) scaleX(x) 크기(x축) 없음(배수) scaleY(y) 크기(y축) 없음(배수) rotate(degree) 회전(각도) deg skew(x-deg, y-deg) 기울임(x축, y축) deg skewX(x-deg) 기울임(x축) deg skewY(y-deg) 기울임(y축) deg matrix(n,n,n,n,n,n) 2차원 변환 효과 없음 matrix보다는 명시적으로 다른 함수를 사용하는 것이 효율적이다. rotate 회..

1) transform 요소의 변환 효과(변형)를 지정 사용법 transform: 변환함수1 변환함수2 변환함수3 ...; transform: 원근법 이동 크기 회전 기울임; .box { transform: rotate(20deg) translate(10px, 0); } translate 이동을 지정( x축으로 10만큼, y축으로 0만큼) skew scale perspective... 속성들은 다음페이지부터

1. 개발자모드에서는 잘되는데 실제 모바일에서는 아래가 짤리는 현상이 발생 CSS 사용자 정의 속성: 크기 조정을 위한 트릭 CSS 사용자 정의 속성과 몇 줄은 JavaScript내가 필요로 하는 일관되고 정확한 크기를 얻는 완벽한 방법일 수 있다는 생각이 들었습니다 . JavaScript에서는 전역 변수를 사용하여 항상 현재 뷰포트의 값을 얻을 수 있습니다. window.innerHeight. 이 값은 브라우저의 인터페이스를 고려하며 가시성이 변경되면 업데이트됩니다. 트릭은 뷰포트 값을 CSS 변수에 저장하고 이를 요소에 적용하는 것입니다.대신에 의 vh 단위. CSS 사용자 정의 변수가 --vh이 예를 위한 것이라고 가정해 보겠습니다 . 즉, 다음과 같이 CSS에 적용하려는 것입니다. .my-elem..

1) visibility:hidden 실제로 존재하지만 보이지 않지만 공간은 존재한다. display:none 사용법 html css div{ width:100px; height:100px; border: 4px red solid; } .div1{ visibility:hidden; } 출력결과 현업활용 대게 조건문을 활용해서 구현 할 것으로 예상 js document.all.(className).style.visibility="hidden" 예제 html js prev() { if(Num > 1) Num-- // 1보다 작을 경우 예외처리 if(Num === 1) document.all.prev.style.visibility="hidden";//0보다 작을경우 아이콘 안보이게 }, next() { if(..

1) marquee HTML에서 텍스트나 사진을 움직이게 할 수 있는 태그 속성 값 속성 의미 bgcolor 배경색상설정 width 가로크기 설정 height 세로크기 설정 direction 스크롤의 움직임 방향 behavior 움직임의 속성 loop 움직임 반복횟수 scrollamount 스크롤 되는 거리간격 scrolldelay 스크롤의 속도 vspace 위 여백 hspace 아래 여백 사용법 이 텍스트가 움직인다. 배경 색상은 파란색 가로와 세로는 100/50 스크롤 방향이 위쪽 스크롤의 무한반복 스크롤을 5회반복 한번에 2픽셀씩 이동 0.2초마다 스크롤을 이동 스크롤의 위/아래 여백 출력 See the Pen by EunshinNoh (@nes0410) on CodePen.

1) transition CSS 속성의 시작과 끝을 지정(전환 효과)하여 중간 값을 애니매이션 속성 값 값 의미 기본값 transition-property 전환 효과를 사용할 속성 이름 all transition-duration 전환 효과의 지속시간 설정 0s transition-timing-function 타이밍 함수 지정(타이밍 함수란?) ease transition-delay 전환 효과의 대기시간 설정 0s 사용법 1. transition, transition-property, transition-duration html css .box { width: 100px; height: 100px; background: tomato; margin: 50px; transition: width 1s, back..

1. 돈에 대해 가난한 아버지와 같은 접근 방식을 취하는 경우가 얼마나 자주 있는가? - 대부분 돈에 대해 가난한 아버지처럼 필요하지만 욕심내지 않아야 한다고 생각해왔다. 바로 1년 전까지만 해도 그게 맞다고 생각해왔다. 그래서 돈은 필요한 정도만 있으면 된다고 믿고 있었고 실제로 필요한 정도만 벌어가며 만족했다. 만족했다고 하는 것은 내 자신을 속이는 형태였고 돈을 쓸때마다 실제로는 불안하고 쓰지 않을 때에는 쫌생이 같아서 더 불안했다. 하지만 언젠가부터 돈은 필요하고 필수적이며 가치있는 것이라고 생각하기 시작했다. 그리고 돈이 모든 행복을 다 사줄것이라고 걱정거리를 모두 다 없애 줄 거라는 생각은 하지 않는다. 하지만 돈이 없을 때에는 행복하기가 어렵고 걱정거리는 더욱 더 많을 것이라는 것에는 확신한..

반응형 웹 -> 기본적인 div로 와꾸를 만든다. -> CSS로 중앙정렬등 지저분하지 않게 만든다. -> 웹, 모바일이나 테블릿에서 화면이 잘리거나 글씨가 잘리지 않게 출력한다.(생각보다 잘안됨) -> Frontend에서 기본적인 구조를 보고 차트를 하나 만드는 정도를 한다.(겨우 해낸다) -> Backend는 아직까지 선임들이 해주면 같다 붙이는 정도한다.(아직 잘못한다.) 새로운 프로젝트 -> 보통 연구과제의 자료조사를 담담한다.(시간을 사용해야 하는 부분) -> 여러가지 프로젝트가 시작되면 대부분 자료조사를 한다. 팁 -> 선임들에게 물어보면 대게 10분안에 해결가능한 일들이 많다. -> 1시간~2시간이상 고민한 문제는 선임들에게 물어봤을 경우 이제 같이 고민해야 하는 부분들이 발생한다. -> 고민..