본문 바로가기

Language

 (101)
<자바스크립트 기초> 13. 이벤트 (2) * 이벤트 위임 - 우리는 지난 장에서 for문을 통해 각각의 리스트에 리스너를 달아주고 클릭시 함수가 실행되도록 하는 이벤트를 만들었다. 그러나 이는 양이 많아지면 많아질수록 리스트가 많아진다. DOM 스크립트가 많아질수록 웹이 무거워지므로 우리는 리스너를 줄일 수 있는 방법을 알아보자. - 이벤트 위임이란 리스너를 부모태그에게만 줌으로써 리스너의 사용을 최소화 하는 것이다. var currentMenu; var menu = document.querySelector('.menu'); function clickHandler(e) { if (currentMenu) { currentMenu.classList.remove('menu-active') } e.target.classList.add('menu-act..
<자바스크립트 기초> 12. 이벤트 (1) * 이벤트란 - 이벤트란 정적인 상태의 웹에서 특정한 동작을 시행하는 것을 의미한다. - 예를 들어 웹문서가 로드가 다 되었을 때, 창 크기가 바뀔 때, 마우스가 클릭되었을 때, 마우스 휠이 움직일 때, 화면에 터치가 이루어 졌을 때 등등이 있다. - 우리는 이러한 이벤트에 반응하여 동작을 시행하는 함수를 만들 것이다. * 이벤트 함수 // 클릭 // - 먼저 간단하게 버튼을 만들었다. 우리의 목표는 버튼을 클릭하였을 때 main-title이라는 id를 가진 h1태그의 배경색을 바꾸는 것이다. - btn이라는 변수에 클래스명을 이용하여 버튼을 담아주었다. - 다음으로 변경이 이루어지는 h1태그도 id를 이용하여 mainTitle 변수에 담아주었다. - 이제 클릭되었을 때 시행될 함수를 만들어야한다. 이 ..
<CSS 기초> 14. Box-shadow & Opacity 1. Box shadow 이는 말그대로 박스에 그림자를 주는 속성이다. box-shadow 의 값은 다음과 같이 5개의 값이 순서대로 들어간다. h-offset v-offset blur spread color 왼쪽부터 x값 y값 흐린정도 그림자크기 색상을 의미한다. spread를 생략해도 되지만 순서대로 5개를 사용하는 것을 추천한다. box-shadow: 0 10px 16px 0 rgba(255,75,75,0.5) ; 위와 같이 입력하면 붉은색의 그림자가 만들어진다. 참고로 2020년의 UI 트렌드인 빛과 그림자로 사물을 보여주는 Neumorphism도 구현이 가능하다. 위 사이트는 Neumorphism을 만들어서 css코드로 제공받을 수 있다. 2. Opacity Opacity속성은 투명도를 나타낸다..
<CSS 기초> 13. Transition & Animation 이번 장에서 다룰 내용은 트랜지션과 애니메이션이다. 둘다 뭔가 움직이거나 변경되는 것을 나타낼 대 사용한다. 1. Transition 트렌지션의 경우 호버와 같은 곳에 속성의 다른 변화값을 적어 둔 곳이 있을 때, 즉 어떤 조건으로 인해 변화가 생길 때 자연스럽게 그 속성으로 변화하는 것을 보여주는 속성이다. transition : font-size 2500ms ease-in 1s 트랜지션에 적을 수 있는 값은 property, duration, timing-function, delay가 있다. 하나씩 알아보자. - property : 속성은 변화가 일어나는 속성이 무엇인지 적으면 된다. 기본값은 all이다. 작성하지 않으면 현재 개체의 변경이 이루어지는 모든 속성에 대해 트랜지션이 작동한다. - dur..
<자바스크립트 기초> 11. DOM 스크립트 (2) 우리는 저번 장에서 변수에 HTML의 태그를 불러오는 방법에 대해 배웠다. 이제 불러온 태그를 그 변수를 이용하여 다뤄보자. * 속성 다루기 var link = document.querySelector('.list a'); console.log(link.getAttribute('href')); link.setAttribute('href', 'google.com'); console.log(link.getAttribute('href')); : 먼저 link라는 변수에 list라는 클래스의 a 태그를 삽입하였다. 이 때 변수.getAttribute('속성명') 으로 그 속성의 값을 불러올 수 있다. : setAttribute('속성명', '변경 값') 을 이용하면 속성의 값을 다른 값으로 변경시킬 수 있다. ..
<자바스크립트 기초> 10. DOM 스크립트 (1) * DOM 스크립트란 - DOM 스크립트는 Document Object Model 스크립트의 약자로써 HTML문서의 태그나 클래스, 텍스트, 속성 등을 모두 객체로 취급한다는 의미이다. - DOM 스크립트는 위의 객체들을 조정하기 위해 만들어졌다. * 스크립트의 위치 - DOM스크립트에 들어가기전에 스크립트의 위치에 대해 짚고 넘어갈 필요가 있다. 스크립트 태그는 헤드에 넣어야할 것 같지만 단순히 그렇게만하면 DOM스크립트와 같이 body를 읽어야 변수를 받아들이는 스크립트는 수행이 불가능하다. 그러면 어떻게 해야할까. 이를 알아보기위해 id가 main-title인 h1태그를 title이라는 변수에 넣는 돔스크립트를 작성한다고 치자. var title = document.getElementById('ma..
<CSS 기초> 12. Background 이번 장은 Background 속성이다. 이는 지금까지는 박스의 색이나 텍스트의 배경 색을 입힐 때 사용했으나 실은 주로 이미지를 삽입할 때 사용한다. 하나하나 알아보자. 1. 배경색 가장 기본적인 속성으로 background-color 을 통해 색을 줄 수 있으며 hex코드 rgb, rgba 모두 사용 가능하다. 2. 이미지 삽입 background-image : url(); 을 통해 경로를 삽입하여 이미지를 넣을 수 있다. 기본적으로 원래 크기대로 넣어지며 이미지가 작으면 바둑판배열식으로 반복된다. 3. 반복속성 이미지는 기본적으로 바둑판배열식으로 반복된다. 따라서 background-repeat : no-repeat; 을 통해 반복을 삭제할 수 있다. 4. 사이즈 사이즈는 background-siz..
<자바스크립트 기초> 09. 변수의 유효범위 * 유효범위 - 변수는 각각 유효범위(Scope)를 가진다. 이 때 스크립트 전체에 영향을 미치는 변수를 전역변수라 하고, 특정 부분에서만 작동하는 변수를 지역변수라 한다. 아래에서 더 자세히 알아보자. * 전역변수 var a = 100; 위는 전역변수이다. a를 100이라 선언했으므로, 어디에서든 a를 다른 값으로 주지 않는 한 100이다. 즉 어디에서나 쓸 수 있다. 그러나 이러한 점 때문에 최대한 안쓰는 것이 좋다. 겹칠우려가 있으며, 이 때는 뒤에서 선언된 것만 인식된다. * 지역변수 function sample() { var b = 200; } 위와 같이 함수 내에서 생성된 변수를 지역변수라 한다. 이는 변수가 선언된 함수 내에서만 작동한다. 이 함수 밖에서 b를 호출하면 정의되지 않았다고 뜬다..
<CSS 기초> 11. Web Fonts 이번 장은 지난 장에 이어서 텍스트에 관한 내용이다. 지난 장에서 텍스트에 서체를 입히는 방법을 배웠다. font-family를 이용하는 방식이었는데, 이 때 중요한 문제가 있다. 바로 그 웹을 보는 사람이 그 폰트가 없을 수 있다는 것이다. 그래서 web font를 이용해서 온라인 상에서 폰트를 받아서 보여줄 수 있도록 하는 방법을 알아보자. 1. 간접적 방법 먼저 간접적으로 가져오는 방식이다. 이는 예를 위해 구글 폰트사이트에 들어가보자. 원하는 폰트를 클릭하여 select하면 오른쪽 창에 추가된다. 그럼 구글에서 그것을 html문서와 css문서에서 사용할 수 있도록 코드를 제공하는 것을 볼 수 있다. 형태로 제공되는 것은 html문서의 헤드에 넣고, font-family부분은 css에 넣도록 하자...
<자바스크립트 기초> 08. 객체 * 객체란 - 객체는 배열과 비슷하게 여러가지 데이터를 저장할 수 있는 기능을 갖고 있다. 그러나 배열과 달리 인덱스를 직접 원하는 형태로 지정이 가능하다. - 위와 같이 객체는 인덱스가 아닌 키를 지정하여 각 값과 대응시킨다. - 참고로 위의 사진과는 달리 객체에는 순서가 없다. 우리는 순서와는 별개로 키를 이용하여 값을 대응시킨다. * 객체 만들기 - 객체는 배열과 달리 {} 중괄호를 이용하여 만들 수 있다. var grades = {'harry': 80, 'iu': 98, 'suzy': 95}; : 위와 같이 중괄호 안에 키와 값을 각각 대응시켜 만든다. - 또다른 방법으로 빈 객체를 만들고 키와 값을 추가시켜갈 수 있다. var grades = {}; grades['harry'] = 80; gra..

티스토리툴바