Front End (28) 썸네일형 리스트형 인터랙티브 웹 개발 제대로 시작하기-Transition이벤트 Transition 이벤트 CSS에서 transition은 정해진 시간 동안 요소의 속성을 서서히 변화시키는 속성이다. transition 속성은 다음과 같은 순서로 정의할 수 있다. 1. 해당 요소에 추가할 CSS 스타일 transition 효과를 설정 2. 추가할 transition 효과가 지속될 시간을 설정 transition은 자동으로 발동되지 않기때문에, :hover와 같은 가상 클래스 선택자(Pseudo-Classes) 또는 JavaScript의 부수적인 액션에 의해 발동된다. 만약 트랜지션이 자동 발동(self-invoking transition)이 되도록 하고 싶다면 애니메이션 이벤트를 사용하도록 한다. 전환(transition)을 위해 제공되는 속성(property)의 종류 1. tran.. 인터랙티브 웹 개발 제대로 시작하기-스크롤 다루기 스크롤 이벤트 다루기 스크롤 이벤트는 브라우저에서 스크롤을 줄 때 오브젝트에 어떠한 변화를 주는 것을 말하는 데, 이때 재밌는 효과들을 넣어줄 수 있다. 보통의 경우 웹페이지 인터랙션을 깊게 파지 않는 경우에는 jQeury같은 라이브러리를 쓰는 데, Javascript의 자체 내장되어 있는 속성과 메소드 등의 라이브러리로만으로도 충분히 구현가능하기 때문에, 라이브러리에 너무 의존하지 않는 것이 좋다. ▼아래 페이지에서 스크롤 예시를 확인해볼 수 있다. https://www.lundqvistdallyn.studio/ Art Direction/Design - Lundqvist & Dallyn Crafting experiences and seeking to make the complex clear & beau.. 인터랙티브 웹 개발 제대로 시작하기-객체(Object) Object(객체)에 대해서 공부해보자. 자바스크립트에는 기본 데이터 타입(숫자, 문자, 참과 거짓의 boolean, undefined, null)이라고 불리우는 데이터 타입들을 제외한 나머지는 "객체"라고 할 수 있다. 함수나 변수도 자바스크립트에서는 큰 범주안에서 객체이다. 객체를 설명할 때는 보통 사람을 예를 들어 설명을 하는데, [한 명의 사람 = 객체]이라고 설정한다. 한 사람은 이름과 성별 등등의 기타 속성들을 가지고 있다. 객체는 속성들과 동작 또는 기능(액션)으로 이루어진 집합체라고 생각하면 된다. 객체를 만드는 법 첫번째, 객체를 만드는 법은 중괄호{ }로 만들수있다. (배열은 [ ]) 객체를 생성한 후, 'name' 과 'age' 같은 속성들을 추가해보자. const person = {.. 인터랙티브 웹 개발 제대로 시작하기-자바스크립트 이벤트 다루기 자바스크립트 이벤트의 기본 동작 자바스크립트를 다루면서 간단하게 이벤트를 주는 법을 학습해보자. 이벤트(event)란? 특정 버튼을 클릭했거나 DOM 로드가 완료되었을 때, 동적인 행위로 사용자와 웹페이지의 상호작용을 의미한다. 이벤트 핸들러를 통하여 이벤트가 발생할 시 원하는 함수에 연결하여 실행시킬 수 있다. 기본 메서드 preventDefault() 이벤트의 기본 액션을 취소할 수 있다면 취소 stopImmediatePropagation() 같은 이벤트의 다른 리스너가 호출 방지 stopPropagation() 이벤트 플로우 중 이벤트의 확산(propagation) 방지 기본 속성 type 이벤트의 이름을 반환 view 이벤트가 발생한 윈도우 객체의 참조 반환 bubbles 특정 이벤트가 버블링 이.. 인터랙티브 웹 개발 제대로 시작하기-인터랙티브 웹 개발을 위한 자바스크립트 시작하기 자바스크립트의 워밍업 자바스크립트에서 객체를 다루는 법과 DOM 스크립트에 관하여 학습한다. ※ 수업에서는 새 버전 자바스크립트(ECMA 2015)를 고려해서 var 변수를 쓰지 않고, const, let으로 변수 선언을 대신한다. let 변수: 가변할 값을 담는 용도 const 변수: constant(상수)는 가변하지 않을 값을 담는 용도 변수들은 유효범위가 다르다. 예를 들어 함수 a() 안에서 b라는 var 변수를 선언하고 함수 밖에서 b의 값을 가져오려 한다면 Uncaught ReferenceError: b is not defined 에러가 난다. 반대의 경우는 접근이 가능하다. 함수를 방으로 생각하면 쉽다. 방 안에서는 바깥의 값을 가져올 수 있지만, 방 밖에서는 안에 선언된 변수의 값을 가져올.. 인터랙티브 웹 개발 제대로 시작하기-CSS Flex 'Flex' 해버렸지 뭐야! 가 아니고, 사전적 의미로 Flex란 구부리다. 힘을 주다. 근육을 수축시키다 뜻을 가진 영어로 개발에서는 Flex Box라고 하여 CSS 레이아웃을 잡을 때 필수적인 Flexible한 기능이다. Flex Box와 그리드의 가장 큰 차이점은: 그리드는 축이 X와 Y 두 방향이고, Flex는 가로나 세로의 한 방향 축을 가지고 있다. ※ 그리드는 현재 지원하는 브라우저가 적기 때문에 Flex가 바로 실무에 투입하기 적절하다. Display: flex 적용안한 경우(왼), 적용한 경우(우) 또한 flex의 기본 direction은 row이기 때문에, flex-direction: column; 으로 바꾸어 준다면 이렇게 축의 방향을 바꾸어줄 수 있다. 또한 row-reverse, .. 인터랙티브 웹 개발 제대로 시작하기-CSS 3D 이어서 학습해보자. 그리고 티스토리에서 코드블럭은 코드 문법 강조같은 걸 안해주나보다 라고 생각하고 검색을 해본 결과, 이미 플러그인이 존재한다는 사실을 알고, 이제야 바꿔줌 🥲 진작 찾아볼껄. 심신의 안정 후아후아 [티스토리] 코드블럭 사용법, 테마 비교, 추천 프로그래밍 개발자 블로그에서 필수로 필요한 티스토리 코드 블록 (Code Block) 사용 방법을 알아보고 8가지 테마 별 이미지를 통해 색상, 모드, 줄 간격 등을 비교해보고 가독성이 좋고 본인 취향 wondytyahng.tistory.com 2강. CSS 3D CSS 3D 1 적절히 잘 쓴다면 고급스러우면서 특이한 효과를 낼 수 있다. CSS 3를 이해하려면 element를 감싸고 있는 공간이 3차원 공간이여야만 한다. 원근감 속성인 per.. 인터랙티브 웹 개발 제대로 시작하기-CSS 변환과 애니메이션 들어가면서, 준비물: Chrome 브라우저(최신 CSS, 개발자 도구 지원), 에디터(강의에서는 atom, 원하는 에디터를 써도 무방) 1강. CSS 변환과 애니메이션 Transform Transform은 CSS3에서부터 적용된 개념으로 크기를 바꾸거나, 회전을 시키는 등의 변형 전용 툴이기 때문에 활용도가 높다. 기준점을 자유롭게 바꿀 수 있어 자유도가 높고 성능이 빨라 모바일 환경에서도 부드럽게 움직이는 것을 눈으로 확인할 수 있다. (하드웨어인 GPU를 쓰기 때문) 단순하게 scale을 이용한 예시 ↓ CSS Transform Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis labore ab, dignissimos quo.. 이전 1 2 3 4 다음
