본문 바로가기

분류 전체보기

 (18)
javascript 6. DOM Manipulation javascript에서 DOM Manipulation은 상당히 중요한 것 같다. DOM Manipulation이라 함은, Document Object Model의 약자로써, javascript에서 HTML에 있는 요소에 접근해서 변경할 수 있게 해준다. 한마디로, 웹페이지를 자바스크립트로 제어한다. 예를들어, document.querySelector("선택하고싶은 요소") 를 이용해보자. "선택하고 싶은요소" 부분을 자바스크립트에서 바꿀 수 있다. HTML Hello! javascript const text = document.querySelector(".title"); text.style.color = "red"; HTML에 title이라는 클래스명을 querySelector의 요소 부분에 넣어주고 변..
javascript 5. For Loop and While Loop 반복문 For Loop const guys = ["Jay", "Son", "Park", "Messi", "Jimmy"]; 이러한 배열이 있다고 치자. 만약 저 사람들이 접속할 때마다 Hello라는 인사를 하고싶으면 어떻게 해야할까? 우선 반복문 for문을 통해 저들을 다 불러보겠다. const guys = ["Jay", "Son", "Park", "Messi", "Jimmy"]; for (guy of guys) { console.log(guy); } for (guy of guys) 에서 guy는 뒤에 있는 복수형의 단수를 써주면 된다. 예를들어, for ( 단수 of 복수) for (name of names) const names = ["Jay", "Son", "Park", "Messi", "Jimmy"]; f..
javascript 4. Array(배열)에 대하여 Array는 배열로써, 여러개의 자료를 저장할 수 있는 자료구조이다. 순차적으로 저장되며, 저장된 데이터에는 인덱스를 통해서 접근가능하다. 인덱스를 쓰는 이유는 원하는 데이터를 쉽고 빠르게 처리하기 위해 사용한다. 배열은 [ ] 로 감싸서 나타내고 쉼표를 통해서 구분한다. const schedule = ["Wake up", "Eat", "Work", "Watch a movie"]; console.log(schedule); 결과를 보면 0부터 시작하는, 길이가 4인 배열을 볼 수 있다. 1부터 시작하는게 아니라 0부터 시작한다. 만약 배열의 마지막 부분에 있는 "Watch a movie"에 접근하고 싶으면 어떻게 하면 될까? 0부터 시작하기 때문에, schedule[3]으로 입력하면 된다. const sc..
javascript 3. if문에 대하여 if 문은 조건문이다. 설정한 조건에 따라 실행시킬수도, 또는 실행을 안시킬수도 있다. 예를 한번 보자. const age = 30; if (age > 18) { console.log("welcome"); } 위에서 볼 수 있듯이 기본적인 사용법은 if ( 조건 ) { 내용 }; 이다. 조금 더 예를 들어보자. else if는 또다른 조건을 제시할 수 있다. else는 위의 모든 조건이 맞지않을 때 실행된다. const age = 17; if (age > 20) { console.log("welcome"); } else if (age > 15) { console.log("Oh you are really young"); } else { console.log("You are not old enough") }..
javascript 2. Single quote(' '), double quote(" "), backtick(` `) 오늘은 javascript에서 string에 관해 얘기해 보려고한다. String은 문자열로써 크게 3가지 방법으로 표현할 수 있다. 1. 'Jason' 2. "Jason" 3. `Jason` 물론 이런 간단한 단어에는 상관이 없지만 문장을 만들 때는 더욱 신경써야 한다. const name = 'Jason'; const age = '30'; console.log('Hi it\'s me ' + name + ' and my age is ' + age); console.log("Hi it's me " + name + " and my age is " + age); console.log(`Hi it's me ${name} and my age is ${age}`); 결과는 3가지 모두 똑같다. 하지만 보다시피 쓰..
javascript 1. var, const, let 의 차이점 1. var var의 특징. 변수를 중복해서 선언한다고해도, 에러가 나오지 않는다. 이는 코드량이 많아지면 독이 될 수 있는 단점이다. 게임을 만든다고 치면 데미지 입을때 사용할 수 있을 것 같다. 2. const const는 한번 선언하면 바뀌지 않는다. 쇼핑몰 웹사이트 같은 곳에서 바뀌지 않는 사진? 같은 곳에 쓸 수 있을 것 같다. 3. let 만약 변수를 사용하고 이를 바꾸고 싶으면 let을 사용하면 된다.
움직이는 배경화면 만들기 https://coder-jason.github.io/video-background/ 비디오 배경 coder-jason.github.io 사실 이건 엄청 간단한데 화면에 보이는건 뭔가 있어보인다. autoplay loop는 자동으로 계속 재생. muted는 소리없이. 그리고 css에서 화면 크기 조정해주고 투명도만 조금 낮춰주면 끝! .video-background { position: absolute; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; } z-index는 아직 잘 이해가 가지 않는다. 그래서 자세히 보면 웹페이지에 오류가 살짝 있다. 이건 새로 공부해야겠다. @m..
회원가입 페이지 연습 https://coder-jason.github.io/sign-up-form/ 회원가입 coder-jason.github.io 회원가입 페이지를 만들어봤다. 우선 1.form 을 만들고 2.그 안에 input type 3개를 만들어서 각각 이름, 이메일, 비밀번호를 구성했다. 3.button을 이용해서 회원가입 버튼을 만들었다. 1.form 만들기 html body탭에 을 만들어주고 css form에서 box shadow 만들어주면 박스 형태의 폼이 나타난다. 2. input type 3개 만들기 html form 탭 안에 input type 3개 넣어주기. placeholder는 어떤 문자를 입력하기 전까지 설정한 이름을 고정으로 나타내줌. required를 설정해주면 꼭 입력해야하는 정보임. 입력안하..
카드 뒤집기 연습 coder-jason.github.io/flip-card/ i-phone flip coder-jason.github.io 아이폰 SE2 카드에 마우스를 올리면 저절로 뒤집히면서 가격화면을 나타낸다. 몰랐던 부분 1. transition: transform 1s ease-in-out; 1초동안 효과가 천천히 시작되어 천천히 끝남. 몰랐던 부분 2. transform-style : preserve-3d; 3d로 나타내는 건데 아직도 헷갈린다. 참고자료 css-tricks.com/things-watch-working-css-3d/ Things to Watch Out for When Working with CSS 3D | CSS-Tricks I've always loved 3D geometry. I began ..
비전공자 - 페이지 만들기 (ft 요리 레시피) 평소 요리를 잘 하는 편이 아니지만 꼭 필요한 경우에 영상을 보면서 요리하면, 나같은 똥손도 맛있게 요리 할 수 있다는 것을 깨닫곤 했다. 그래서 훗날 요리 페이지를 만들게 될 것 같아서 미리 재미삼아 첫 페이지만 만들어봤다. https://coder-jason.github.io/Recipe-page 로고 이미지는 미리캔버스에서 조금 수정해서 만들었다. 오늘 중점적으로 다룰 내용은 1. list에 마우스를 대면 밑에 노란선이 생기는 hover 효과. 2. 화면 작아졌을 때 우측 상단 바 클릭 기능. 먼저 1. hover 효과 먼저 밑에 글을 읽어보시길 바람. https://developer.mozilla.org/ko/docs/Web/CSS/::after ::after (:after) CSS에서, ::af..

티스토리툴바