DevSSOM

미디어 쿼리 PC 뿐만 아니라 모바일과 태블릿으로 웹사이트에 접속해도 기기 사이즈에 맞춰서 레이아웃이 자연스럽게 변경될 수 있도록 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문. 반응형은 브라우저 폭을 줄이거나 늘렸을 때 자연스러운 리사이즈 효과가 나타나는 사이트들을 말하고, 적응형은 뚝뚝 끊겨서 레이아웃의 변화나 폰트 크기가 달라지는 사이트들을 말함. media .media { width: 500px; height: 500px; background-color: red; } @media (min-width: 320px) and (max-width: 800px) { .media { width: 300px; height: 300px; background-color: yellow; } } @me..

Transform & Animation .box1 { animation: rotation 1500ms linear infinite alternate; } @keyframes rotation { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } } box1 이라고 하는 영역에 애니메이션 속성을 입력함. 속성값들을 한 줄로 입력했는데, 각각의 순서는 상관없지만 항상 먼저 나오는 숫자가 duration이고, 나중에 나오는 숫자가 delay라는 것만 알면 됨. 위에서는 rotation이라고 하는 애니메이션 이름을 지정하고, duration은 1500ms라고 해서 (1000ms = 1초) 1.5초 동안 동작하게, linear로 일정한 속도를..

Animation Transition의 경우는 마우스를 오버했을 때와 같은 특정 조건이 필요한데, 조건에 상관 없이 이벤트를 적용할 때 사용하는 것이 Animation. 예를 들어, 웹사이트에 접속을 하자마자 마우스 움직임과 상관없이 오브젝트가 회전을 한다던가 움직인다던가 하는 효과를 만들 때 애니메이션을 사용함. .animation { animation-name: changeWidth; animation-duration: 3s; animation-timing-function: linear; animation-delay: 1s; animation-iteration-count: 6; animation-direction: alternate; } @keyframes changeWidth { from { wid..

Transition 특정 조건 하에서 변화하는 과정을 애니메이션으로 보여주고자 할 때 사용. 예를 들어, 박스에 마우스 오버를 했을 때, 흰색에서 파란색으로 변하게 하고 싶은데 갑자기 휙휙 변하는 게 아니라, 변화하는 과정 자체가 드러나는 자연스러운 변화를 주고자 할 때 트랜지션을 씀. 트랜지션의 각각의 속성값들을 하나하나 알아보면 Property, duration Property은 변화하는 과정을 주고자하는 CSS속성을 작성할 때 사용. 위에서는 width값이 바뀌는 과정을 사용자에게 보여주겠다는 뜻. duration은 바뀌는 과정을 얼만큼의 소요시간으로 보여줄 것인지 정할 때 사용. 위에서는 width값을 바꾸는 데에 2초의 시간을 쓰겠다는 뜻. timing-function, delay timing-..

Transform 웹사이트의 특정 영역에서 어떤 오브젝트의 각도를 튼다거나, 크기를 조절한다거나, 위치를 변경할 때 사용하는 속성. transform에는 다양한 속성값들이 있음. rotate, scale rotate는 입력한 각도만큼 특정 오브젝트에 회전 효과를 줄 때 사용함. 여기서 얘기하는 회전이란, 평면적인 회전을 의미함. 위에서는 45deg로 양수 형태로 값이 들어가있는데, -45deg 처럼 음수 형태로도 입력 가능함. scale은 오브젝트를 확대, 축소시킬 때 사용함. 예시 scale(2, 3)에서 괄호 안의 숫자는 비율을 의미. 2는 width값을 2배, 3은 height값을 3배 확대하겠다는 것. 축소시키고 싶을 때는, 0.5 처럼 소수점을 사용해서 입력하면 됨. scale에서 기준점은, 기..

쇼핑몰 하단 영역 만들기 로 표시되는 하단 영역의 왼쪽에는 저작권 정보, 오른쪽에는 주소지 정보가 있음. 두 영역은 가운데를 기준으로 정확히 반으로 나눠짐. 기본코드 엘리스 사전 캐릭터 소개 줄거리 부록 하얀토끼 체셔 고양이 하트여왕 모자장수 엘리스에 오신 여러분 환영합니다! :) 도도새 애벌레 카드병정 황금열쇠 Copyright © 2016-2018 elice. All rights reserved. 대전광역시 유성구 문지로 193 KAIST 문지캠퍼스 진리관 T326호 >>> 하나하나 따라해보기 1. 하단 영역 전체 #footer에 대한 css 속성을 작성. HTML 코드는 위의 긴 코드로 확인하는 대신 태그만 보면, 아래와 같음. Copyright © 2016-2020 elice. All rights..

Fade 이벤트 영화에서 보여지는 Fade 효과는 다음 제이쿼리 이벤트로 쉽게 구현할 수 있음. $("h1").fadeOut(); // 서서히 사라지게 $("h1").fadeIn(); // 서서히 나타나게 $("h1").fadeToggle(); // fadeOut과 fadeIn 둘 다 실습문제 Hello jQuery Fade Out Fade In Fade Toggle 이제 저 버튼들에 fade 이벤트 기능들을 넣기 위해서 제이쿼리로 index.js 파일을 작성해주기. 가장 먼저, fade-out 버튼. $(function() { $("#fade-out").click(function() { $("h1").fadeOut() }); }); 나머지 버튼들도 코드를 작성해주면 $(function() { $("#f..

쇼핑몰 본문 영역 만들기 태그의 본문 영역에는 ‘엘리스에 오신 여러분 환영합니다! :)’ 를 기준으로 위아래에 각각 4개씩, 총 8개의 이미지가 있음. 이미지 영역에는 이미지와 타이틀 정보가 들어있음. 각 이미지 영역은 모두 크기가 동일하며, 각각의 배경색은 서로 다름. 기본 코드 엘리스 사전 캐릭터 소개 줄거리 부록 하얀토끼 체셔 고양이 하트여왕 모자장수 엘리스에 오신 여러분 환영합니다! :) 도도새 애벌레 카드병정 황금열쇠 태그는 익스플로러에서는 지원하지 않기 때문에, role이라는 속성을 사용해서 main이라고 명시를 해줘야함. 각각의 이미지가 들어가는 영역은 태그를 사용했고, 또 그 각각은 거기서 태그로 클릭이 되게 되어있어. 그리고 그 안에 이미지와 타이틀 정보가 들어있음. 그리고 중간의 에는 ..