전체 글 검색 결과

해당 글 251건

form

form html의 form태그는 입력받은 데이터를 서버로 전송할 때 사용하는 양식이다 form태그의 내부 속성에는 action과 method가 있다 action action은 데이터를 보내줄 장소를 지정해주는 곳이라고 생각하면 쉽다 button 여기서 button은 눌렀을 때 받은 데이터를 전송하는 실행 장치라고 생각하면된다 form을 submit했을 때 action에 적힌 주소로 이동하는 것을 볼 수 있다 action을 생략하면 현재 페이지에 데이터를 전송한다 method method는 입력받은 데이터를 전송하는 방식을 설정하는 속성이다 입력 값은 get과 post가 있다 get get은 받은 파라미터를 url에 담아서 그대로 전송시킨다 url에 데이터를 담아서 전송시키기 때문에 용량에 제한이 있으며..
HTML 2020. 10. 13. 21:02

scroll event

스크롤 이벤트에 쓰이는 몇가지 메소드, 프로퍼티를 알아보자 top 스크롤 이벤트는 말 그대로 웹 페이지에서 스크롤할 때 발생하는 이벤트다 (function () { const top = document.querySelector('.fixedTop'); window.addEventListener('scroll', function () { top.innerHTML = ''; }); })(); 클릭 이벤트와 동일하게 addEventListener를 사용하고 첫번째 인자로 scroll을 주면 스크롤을 이동할 때 이벤트가 발생하게 된다 그 안에 있는 콜백 함수는 스크롤 이벤트가 발생할 때 상단에 고정되어있는 top문자열을 수정하게끔 작동한다 window.pageYOffset const top = document...
JavaScript 2020. 10. 12. 18:56

전역 변수 줄이기

전역 변수의 남용은 혼자서 진행하는 프로젝트에서는 눈치채기 힘들지만 협력하는 프로젝트에서는 내가 선언한 전역 변수가 남의 함수에 의해서 값이 바뀌는 등 문제점을 가지고 있다 그래서 프로그래머들은 전역 변수를 최소화하기 위해서 노력한다 이전 포스팅의 클래스a를 가진 박스를 클릭시 apply라는 코드를 적용하는 간단한 이벤트 코드다 이런 간단한 코드에서 벌써 전역 변수를 boxA와 clickHandler 2개나 사용하고 있는데 이를 줄이려면 어떻게 해야할까? 저 코드를 통째로 함수 안에 넣어버리면 된다 이렇게 하면 이전에 있던 두개의 전역 변수는 clickA 함수 안의 지역 변수가 돼서 전역 변수를 줄이는 효과를 봤다 하지만 clickA도 결국 전역 변수인데 이 clickA 함수는 페이지가 로드되는 처음에만..
JavaScript 2020. 10. 11. 02:11

이벤트

이벤트라는 웹페이지에서 일어나는 모든 사건을 말한다 우리는 자바스크립트에서 일어날 사건에 대응하는 함수를 미리 준비해 놓고 사건을 감지해서 그에 맞게 준비해 놓은 함수를 실행시키도록 할 수 있다 JS EVENT A B C 웹페이지에서 가장 흔하게 일어나는 이벤트는 무엇일까? 바로 클릭 이벤트이다 a박스를 클릭하면 박스에 빨간테두리를 생성하는 간단한 코드를 만들어보자 이전 포스팅에서 자바스크립트로 클래스 이름을 추가하는 것이 응용된다 .apply { border: red solid 2px; }빨간색 테두리를 만드는 apply코드 const boxA = document.querySelector('.a'); boxA.addEventListener('click', function()..
JavaScript 2020. 10. 10. 01:45

DOM 조작

DOM이란? DOM(Document Object Model) 문서 객체 모델은 웹 페이지에 대한 인터페이스다 HTML을 파싱해서 노드 트리 구조로 만든 것을 DOM이라고 한다 자바스크립트는 이 DOM을 이용해서 작동한다 조작 방법 말했듯 우리는 자바스크립트를 이용해 DOM을 조작해서 시각적 효과나, 우리가 원하는 동작들을 구현할 수 있다 언제나 그렇듯 기본 CSS는 생략 JS DOM A B C D 엘리먼트 가져오기 자바스크립트로 B상자의 색을 바꾸고 싶다면 어떻게 해야할까? 우선 html의 test b클래스인 div를 자바스크립트 속으로 가져와야한다 html 조작하기 위한 여러 메소드를 제공해주는 document객체를 사용해야한다 const b = document.querySelector('.b'); c..
JavaScript 2020. 10. 8. 01:49

var, let, const

책과 내가 배운 강의들에는 var만을 사용해서 변수를 선언하고 초기화 했는데 응용 강의를 듣다보니 var의 사용을 자제하고 let과 const의 사용을 권장했다 그래서 찾아봤다 let, const 유효 범위 let,const도 var처럼 변수 선언인데 스코프의 유효 범위가 다르다 var은 함수 단위의 스코프였지만 let과 const는 블록 단위의 스코프를 가진다 if(true){ let test = 110; } console.log(test); 위의 코드가 var로 선언되어 초기화되었다면 아무 문제없이 콘솔창에 110을 찍었겠지만 결과는 그렇지 못하다 에러를 뱉는다 블록 단위란 {로 시작해서 }로 끝나는 그 괄호 안의 범위를 블록 단위라고 한다 if(true){ let test = 110; } conso..
JavaScript/ES6 2020. 10. 7. 02:35

flex

flex는 display의 속성 값 중 하나이며 세로 레이아웃을 잡기편하게 도와준다 CSS flex AAA B CCCCCC DDD E 기본 디자인 css는 생략 flex를 이용하기위해 display에 속성값을 줌 컨테이너에 flex를 주고 요소들을 배치하는 설정을한다 display{ display : flex; } flex-direction : ;축의 방향을 설정하는 속성 row : 행의 축을 기준으로 요소들을 나열 column : 열의 축을 기준으로 요소들을 나열 justify-content: ;수평 정렬을 설정하는 속성 flex-start : 축의 시작을 기준으로 정렬 flex-end : 축의 마지막을 기준으로 정렬 center : 축의 중앙을 기준으로 정렬 space-around : 요소들만의 간격..
CSS 2020. 10. 7. 01:39

카드 뒤집기

이전 포스팅에서 카드를 입체감으로 보이기 위한 작업을 했다 배운 내용을 복습하기 위한 포스팅인데 gif까지 따서 업로드까지하는 정성을 들이기엔 너무 귀찮아서 코드와 설명만으로 복기하려한다 CSS 3D Front Back 우선 카드는 앞면,뒷면을 구성해야 하기에 front,back 두개로 나누었고 Front Back두 카드를 겹쳐야하기 때문에 두 카드가 공통적으로 가지고 있는 class인 .card-side에 absolute를 줘야한다 하지만 그 전에 absolute는 static을 제외한 모든 부모를 기준으로 위치를 정하기 때문에 .card { position: relative; ... }부모에 relative 값을 주고 .card-side{ position: absolute; left: 0; top: ..
CSS 2020. 10. 5. 16:44

3D

우리는 transform 포스팅에서 CSS속성을 이용해 회전시키는 법을 배웠다 Front html코드 world는 녹색 박스 card는 빨강 박스 기본적인 css스타일 코드는 생략 transform: rotateY(45deg); 위 코드를 카드의 css에 추가해 카드를 뒤집듯이 Y축으로 45도 회전 시켜보자 회전이 된건가? 그냥 찌부시킨 걸로 밖에 보이지 않는다 3D효과를 제대로 주기 위해선 투영점을 줘서 공간감을 줘야하는데 효과를 주려는 대상의 컨테이너에 perspective를 적용 .world{ display:flex; ... ... perspective: 500px; } px값은 대충 대상과의 거리값 정도로 생각하면 된다 제대로 적용되었다 하지만 컨테이너 안에 개체가 여러개면 효과가 조금 달라진다 ..
CSS 2020. 10. 4. 03:34