전체 글164 [CSS]transform(3D)속성 : perspective(원근법) css로 3D 효과를 주기 위해서 가장 중요한 것이 perspective다. 투영점, 원근감 등의 의미이며 3D 환경을 만들기 위해서 깊이감을 주어 입체감을 부여하는 것이다. 픽셀 기반의 길이 값을 지정할 수 있으며, z축을 따라 캔버스로부터 관찰자의 깊이감을 나타내게 된다. 그래서 perspective(300px)는 스크린으로부터 300px 만큼 떨어진 곳에 관찰자가 있다는 것을 근거로 3D 환경을 구성하게 된다. transform-style : preserve-3d; 자식요소들을 3D 공간에서 묘사하기 위해 부모 요소에 적용시키는 속성이다. 기본 값은 flat으로 2D의 2차원에서 부모 요소와 동일한 평면에 배치된다. perspective-origin perspective의 기준점을 지정해주는 속성이.. 2021. 7. 6. 세로모드에서 가로모드로 스크롤하기. 0 1 2 3 4 @charset "utf-8"; *{ margin:0; padding: 0; } .scroll { position: fixed; left: 20px; top: 20px; z-index: 100000; } #section1{ height:200vh; background: #F3EEE8; position: relative; z-index:6000; } #section2{ height:3000px; background: #000; position: relative; z-index:7000; } #section3{ height: 3000px; background: red; position: relative; z-index:4000; } #section4{ height: 4000px; backg.. 2021. 7. 3. Babel이란 ? 자바스크립트의 컴파일러다. 입력, 출력 모드 자바스크립트 코드다. 최신 버전의 자바스크립트 문법은 하위버전의 브라우저가 이해하지 못하기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다. 2021. 7. 2. Build process(인터프리터 언어/ 컴파일 언어) Build란? 컴퓨터는 근본적으로 0과 1밖에 모른다. 우리가 작성하는 코드들은 대부분 고급언어를 사용하기 때문에 결국에 컴퓨터가 이해할 수 있도록 번역을 해주어야 한다. 여기서 컴퓨터가 이해하는 언어를 기계어라고 하는데, 프로그래머가 작성한 소스코드를 기계어로 번역하여 실행 가능한 파일로 만드는 과정을 빌드라고 한다. 이러한 빌드 과정은 크게 3가지 방식으로 분류할 수 있는데 Compile : 소스코드 전체를 기계어로 번역함. Interpreted : 소스코드를 한 줄씩 번역하면서 실행함. Hybrid : 소스코드 전체를 중간코드(바이트 코드)로 번역한 뒤 가상머신(VM)에서 한 줄씩 실행함. 1 Compile Type 우리가 작성한 소스코드를 한꺼번에 번역해서 실행파일로 만들어준다. 한마디로 통번역이.. 2021. 7. 2. 버블이 움직이는 background css animation HTML CSS .bubbles{ position: absolute; width: 100%; height: 100%; z-index:0; overflow:hidden; top:0; left:0; } .bubble{ position: absolute; bottom:0; width:40px; height: 40px; background: rgba(120, 184, 154, 1); border-radius: 50%; opacity: 0.5; animation: flying 15s infinite ease-in-out; } .bubble:nth-child(1){ width:40px; height: 40px; left:10%; animation-duration: 15s; } .bubble:nth-child(2){.. 2021. 7. 1. [Javascript] parseInt() 문자열을 정수로 바꾸는 함수이다. offset 메서드로 인해 소숫점이 많을 때 활용할 수 있다. $(".s1OT").text(parseInt($("#section1").offset().top)); 190.002753 -> 190 2021. 6. 30. 이전 1 ··· 24 25 26 27 28 다음
