조금씩 천천히

꽤 오래전에 작업했던 pc 마크업에서 발견했던 이슈. a태그 안에 a태그를 중첩해서 사용할 수 없기 때문에 a 태그를 absolute position 으로 띄워서 작업하는 경우가 종종 있는데, ie 하위 브라우저에서 선택영역이 잡히지 않는 이슈가 있었다. See the Pen absolute link not work in IE by eunhye Park (@kurepark) on CodePen. 위처럼 디자인상 선택영역 안에 선택영역이 있을 경우에 a.outer 처럼 absolute 로 띄운 후 덮어쓰는 경우가 있는데, 크롬 브라우저나 최신 ie11에서도 잘만 잡히던 선택 영역이 ie10 이하 브라우저에선 텍스트 부분이 선택되지 않는 이슈가 있었다. codepen으로 확인하려고 했으나 codepen과 j..

https://kure0406.tistory.com/26 아이콘이 있는 버튼만들기 아이콘이 있는 버튼을 만드는 경우가 많다 하지만 만들때마다 아이콘을 이미지태그로 넣는 경우도 있고 버튼의 배경처리를 한다음 text-indent를 이용하기도 하는데 만들다보니 규칙도 없고 버튼 kure0406.tistory.com 과거에 작성한 글을 보다가 이불킥을 할만한 글을 발견했다. 취업하고 3개월때 작성한 글이었는데, 버튼 아이콘 정렬을 이렇게 고민했나 싶다. 지금 작업하라고 하면 이렇게 하지 않았을까.... 이전 글을 다시 읽어보니 당시에는 버튼 텍스트가 2줄로 떨어지더라도 아이콘이 가운데 정렬이 되어야 했던 것 같다. 생각해보면 버튼 텍스트가 2줄이 되면 디자이너님이 의도한 버튼 모양이 깨지는 것인데, 아이콘을 ..

See the Pen slot machine by eunhye Park (@kurepark) on CodePen. 회사에서 사용해야할 일이 생겨서 만든 css slot machine 애니메이션. 해당 동작이 css로 가능할지 문의를 주셔서 실제 업무를 하기 전에 테스트로 만들어보았다. 만들기전에 대략 이런식으로 만들면 되겠지 싶었는데, 잘 안만들어져서 결국 구글의 힘을 빌렸다. 슬롯머신처럼 동작하지만 슬롯머신 디자인으로 사용할건 아니기에 불필요한 것은 만들지 않고 필요한 부분만 작업했다. transform 을 다시 공부하는 기회가 되었다. 3차원은 어렵다. 'li를 둥글게 굴려서 뱅글뱅글 돌리면 되지 않을까' 여기까진 생각이 닿았지만 막상 구현하는건 어려웠다..ㅎㅎ;; 아직 많이 부족함을 느꼈음..ㅠㅠ ..

자바스크립트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..

최근에 calc() 이라는 css 함수의 존재를 알게되었다. calc()은 이름에서도 알 수 있듯이 계산을 해주는 css함수로 자바스크립트로 css계산을 하던 것을 상당부분 대체할 수 있다 + - * / 의 사칙연산을 사용 하여 width, font-size, margin 등 px, %, em, rem, deg 등의 단위를 쓰는 영역에 모두 사용이 가능하다 유의사항은 + - 사용시에 반드시 연산자 양 옆에 공백을 주어야 한다. -사용시 공백이 없을 경우 음수값으로 처리되기 때문에 + -의 경우는 공백이 반드시 필요하다. * / 의 경우는 공백이 필수 사항은 아니지만 표현의 일관성을 위해 공백을 사용해주자 잘못된 사용 1width: calc(100%-80px);cs + - 연산자를 붙여쓰면 이미지처럼 in..

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

디자인에 따라 input이나 textarea의 placeholder의 색상을 변경해줘야할 경우가 종종 생긴다기본 색상이 너무 안보인다거나 너무 진하거나 디자인과 어울리지 않거나 등 등....아래 코드처럼 css만으로도 쉽게 변경할 수 있다 브라우저별 접두어를 사용해서 각 브라우저마다 다른 색상을 적용할 수 있다(왼쪽부터 크롬-익스플로러-오페라-파이어폭스) 초보 퍼블리셔의 공부정리 블로그입니다.내용에 오류가 있거나 수정사항이 있다면 꼭 댓글 부탁드립니다

일하다보면 종종 사용하는 스크롤고정!! 매번 사용하지만 할 때마다 까먹는 것 같아서 정리한다 처음엔 스크롤 안에 함수가 아닌 if문을 직접 넣어서 사용했는데 새로고침을 할 경우 적용되지 않아서 함수로 만들어 스크롤상황과 최초접속(새로고침) 두가지 모두 적용되도록 만들었다 그리고 앵커태크 클릭 시 부드럽게 해당 영역으로 애니메이션 되는 것까지 함께 정리!.hash가 아니라 클릭한 a태그의 href값을 읽어서 하는 방법도 있다 12345678 $(document).on('click','#gnb a',function(event){ var targetHash = $(this).attr('href'); var headerHeight = $('header').outerHeight(); event.preventDef..