조금씩 천천히

자바스크립트30(https://JavaScript30.com) - day1 을 만들면서 알게 된 내용들 -코드는 깃헙에 올려놓았고 JavaScript30 의 내용을 fork한 후 각 DAY폴더에 mywork.html을 만들어 작업하고 있다(start.html, finished.html은 손대지 않기!!!) ##currentTime; The HTMLMediaElement.currentTime property gives the current playback time in seconds. Setting this value seeks the media to the new time. 모질라에서 제공하는 docs에는 위처럼 설명이 나와있다. 짧은 영어로 이해한 내용을 정리하면, 'currentTime을 사용해서 시..

아이콘이 있는 버튼을 만드는 경우가 많다 하지만 만들때마다 아이콘을 이미지태그로 넣는 경우도 있고 버튼의 배경처리를 한다음 text-indent를 이용하기도 하는데 만들다보니 규칙도 없고 버튼 속 텍스트의 길이가 바뀌거나 버튼의 width가 넓어질때 등등 유연하게 대응하지 못할 경우가 많았다 그래서 두가지 종류의 버튼을 다시 만들어 보았다 흰색 버튼은 버튼의 width가 고정되어있고 글자가 길어져서 버튼의 텍스트가 떨어지더라도 아이콘이 항상 가운데에 위치할 수 있도록 만든 것이다 보라색 버튼은 최소 width가 있는 상태에서 글자 텍스트가 길어지거나 width가 100%가 되더라도 아이콘이 항상 텍스트 옆에 붙어있는 상태로 만들어졌다 이미지처럼 흰색 버튼의 텍스트는 버튼의 width가 정해져있어 텍스트가..

최근 작업을 하다가 position sticky라는 새로운 속성을 알게되었다position은 4가지만 있는줄 알았는데 아직 모르는 속성이 있었다니!그래서 정리해보는 position 속성 우선 position에는 총 5가지가 있다. static, relative, absolute, sticky 그리고 static을 제외한 4가지 속성은 각각 top, left, bottom, right를 사용하여 위치를 지정할 수 있다 #### position : static static 요소는 position속성을 지정하지 않은 기본적인 속성이다 1234567891011121314151617181920 div{ padding:10px; width: 500px; text-align: center; box-sizing: bo..

좌우로 움직이는 뱃지 애니메이션(?)딱히 뭐라고 불러야 할지 모르겠어서 이렇게 제목을 적었다 회사에서 두가지 타입의 컨텐츠를 번갈아 가면서 보여줘야하는 페이지에 사용했던 애니메이션처음에 기획을 보고 좌절했지만 기획자님이 원하는 동작을 애프터이펙트로 만들어 보여주셔서 그나마 기획에 맞게 만들 수 있었다 css를 이용해서 만들었고 active클래스를 토글하는 방식으로 애니메이션을 줬다단점은, 두가지 타입만 보여줄 수 있다는....확장이 안되는 너무 큰 단점이 ㅠㅠ 실제 사이트에선 좌우로 한번씩 이동할 때마다 예제의 텍스트 영역에 odometer.js를 사용해서 숫자를 돌리는 애니메이션이 있고, 하단에 글이 써질 때마다 알림텍스트가 아래에서 위로 flip되는 애니메이션까지 들어있다 하지만 odometer.js..

한달전쯤 설문조사 페이지 퍼블리싱을 진행했는데,기획에선 모바일 세로모드만 적용해도 좋다고 해서 가로모드는 전혀 고려하지 않고 만들었다하지만 팀장님이 가로모드에서 화면이 깨지지 않느냐 말씀하셔서 부랴부랴 가로모드 처리 방법을 찾았다 모바일 가로 화면 css를 억지로 맞추기보다 모바일 화면을 세로로 고정시키는 방법으로 하려고 했지만 스크립트를 찾아봤지만 찾지 못했다그래서 차선으로 화면을 가로로 돌렸을 땐 다른 화면을 보여주는 방법으로 수정하기로 결정. 구글링에서 찾은 코드는 함수형태가 아닌 제이쿼리 ready 안에 들어있는 스크립트였는데, 화면 방향을 전환할 땐 적용이 되었지만 가로모드에서 새로고침을 했을 땐 스크립트 적용이 안되어 함수로 만들고 ready 함수 안에도 넣어주었다 또 모바일에서만 사용해야하니..