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..

웹페이지 구조 상단 영역은 엘리스 사전 캐릭터 소개 줄거리 부록 >>> 하나하나 따라해보기 1. index.css 파일에 다음 속성값을 작성. 모든 영역에서 margin, padding을 0으로 설정하고, .container에서 기본 바 넓이를 960px로 설정. * { margin: 0; padding: 0; } .container { width: 960px; } 2. , 의 불렛 설정과 의 텍스트 설정을 적용. ol, ul { list-style: none; } a { text-decoration: none; color: #000; } 3. 상단 영역 전체 #intro의 넓이와 높이를 설정. width: 100%, height: 80px #intro { width: 100%; height: 80px;..

display 이전에, HTML 태그는 크게 두 가지의 성격을 가지고 있다고 했음. Block과 Inline. 근데, 간혹가다 태그를 가지고 공간에 대한 크기를 입력해주고 싶다. 태그가 공간에 대한 크기를 갖고 있지 않으면 좋겠다. 하고 원래 태그가 갖고 있는 성격을 바꾸고 싶은 거야. 그럴 땐 display라고 하는 CSS 속성을 사용하게 되면, 태그를 inline으로 바꿀 때 속성값으로 inline을 주면 됨. display : Block과 Inline 요소가 가지고 있는 원래의 성격을 바꾸고 싶을 때 사용. 속성값으로 inline-block을 적용하면 두 요소의 성격을 모두 가짐. x축 정렬이면서 공간에 대한 크기를 만들고 상하 배치 작업까지 하고 싶다고 할 땐 inline-block. inline..