개발 일기

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..

자바스크립트의 컴파일러다. 입력, 출력 모드 자바스크립트 코드다. 최신 버전의 자바스크립트 문법은 하위버전의 브라우저가 이해하지 못하기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다.

Build란? 컴퓨터는 근본적으로 0과 1밖에 모른다. 우리가 작성하는 코드들은 대부분 고급언어를 사용하기 때문에 결국에 컴퓨터가 이해할 수 있도록 번역을 해주어야 한다. 여기서 컴퓨터가 이해하는 언어를 기계어라고 하는데, 프로그래머가 작성한 소스코드를 기계어로 번역하여 실행 가능한 파일로 만드는 과정을 빌드라고 한다. 이러한 빌드 과정은 크게 3가지 방식으로 분류할 수 있는데 Compile : 소스코드 전체를 기계어로 번역함. Interpreted : 소스코드를 한 줄씩 번역하면서 실행함. Hybrid : 소스코드 전체를 중간코드(바이트 코드)로 번역한 뒤 가상머신(VM)에서 한 줄씩 실행함. 1 Compile Type 우리가 작성한 소스코드를 한꺼번에 번역해서 실행파일로 만들어준다. 한마디로 통번역이..

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){..

문자열을 정수로 바꾸는 함수이다. offset 메서드로 인해 소숫점이 많을 때 활용할 수 있다. $(".s1OT").text(parseInt($("#section1").offset().top)); 190.002753 -> 190

선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시키는 메서드다. parallox에서 요소의 좌표값을 알기 위해 사용한다. 문법1 var jb = $('h1').offset(); //예제 $(".s10T").text(parseInt($("#section1").offset().top)); h1 요소의 좌표를 변수 jb에 저장한다. 아래 예제는 클래스명이 s10T인 요소에게 #section1의 y축 좌표값의 정수값(parseInt함수)을 텍스트로 추출하라는 명령이다. 문법2 .offset(coordinate) $('h1').offset({left:100, top:50}); 선택한 요소를 특정 위치로 이동시킨다. 예를 들면 h1 요소를 왼쪽에서 100px, 위에서 50px위치로 이동시키는 명령이다.

선택한 요소의 세로 스크롤 값을 설정하거나 반환한다. 문법 $("선택자").scrollTop(); $("선택자").scrollTop("속성값");

CSS에 변수를 만들어서 사용할 수 있다. 여러 값을 한 번에 변경할 수 있기때문에 유지보수에 효율적이다. CSS 변수 만들기 :root{ --red : #dc3545; --blue : #007bff; } CSS 변수 사용하기 .box{ background-color:var(--red); }

HTML5에서 새롭게 추가된 태그와 요소이다. 보통 여러가지 요소들을 묶을 때 div를 많이 사용했으나 figure태그를 통해 웹 접근성을 높일 수 있다. figure가 '형태'라는 뜻으로 여러가지 요소들을 묶어 한 형태로 만들어 놓는 것이라고 볼 수 있다. 태그 - 설명 글을 붙일 대상 지정 - 설명 글을 붙여야 할 대상을 지정하거나 웹 문서에서 오디오나 비디오 같은 멀티미디어 파일을 비롯해 사진이나 표, 소스 코드 등 웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용한다. - 만약 이미지 태그만 사용한다면 굳이 태그를 사용하지 않아도 되지만 이미지에 설명 글을 넣으려면 태그로 묶어줘야 한다. 태그 - 설명 글 붙이기 - figure 요소 안에서의 콘텐츠에 대한 제목 출력 See the Pen by..