조금씩 천천히

최근에 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..

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

2017년 6월 26일. 국비 지원학원을 마치고 운 좋게 일주일 만에 입사한 회사에서 1년이라는 시간을 보내게 되었다2018년 7월. 지난 1년을 돌아보는 시간을 가져야 할 것 같아서 간단하게라도 블로그에 글을 써본다. 웹 퍼블리셔는 무조건 에이전시에 가야 한다고 생각한 시절이 있었다. 국비 학원 막 마친 직후에는 에이전시와 스타트업(비 에이전시)를 구분 하는 눈도 없었기 때문에 지금 회사에 입사했겠지만... 그래서 입사하고 3개월간은 에이전시에 가야 하나 매일매일 고민했었다.몇 가지 이유가 있었는데 1. 웹 퍼블리셔는 에이전시를 가야 실력이 늘어난다는 이야기를 들었다2. html, css, 그리고 간단한 제이쿼리만 배운 국비 출신의 퍼블리셔에게 jsp, less, git, spring eclipse 등..

디자인에 따라 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..

회사에서 새해인사 팝업을 쓸 때 사용했던 코드.구글링으로 검색했고 일부 수정해서 사용 사용할때에는 setCookie함수 파라미터의 쿠키명과 만료일을 수정하면 된다 처음 구글에서 찾은 코드는 n일 팝업만 띄우는 코드였고특정일자부터는 안보이게 해야해서 날짜를 비교하는 코드를 추가했다 서로 다른 레이어 팝업이라면 쿠키명을 다르게 해주어야하는데 이를 몰라서같은 이름으로 사용했다가 오류가 났었다ㅠㅠ 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869/*쿠키 만들기*/function setCookie(name, value, expired..