Front-End Developer

알아두면 너무 유용한 네거티브 마진

네거티브 마진 쉽게 사용하면, 마이너스 값으로 마진을 설정하는거다. 어떨 때 사용할 수 있나? 우리가 생각하는 마진은 요소와 요소 사이의 공간을 줄 때 사용한다. 이걸 반대로 동작하게 하는게 네거티브 마진인데, 공간이 마이너스로 중첩되어버린다! 그럼 어떻게 될까? 지붕을 뚫고 나간다! 아래 사진을 예시로 보자. 감자튀김 이미지에 margin-top을 줌으로써 이미지를 담고있는 부모div와 공간을 넣어주도록 하겠다. .box img { width: 500px; height: auto; margin-top: 30px; } 위와같이 margin-top 공간이 생긴 것을 알 수 있다. 그렇다면 여기서 negative margin을 적용하여 이미지가 부모 div인 지붕을 뚫고 나가게 해보자! .box img { ..

node nodemon 설치시 code E404오류 해결

터미널에서 노드 설치하는 방법 1 npm install -g nodemon cs 맥은 가끔 위 명령어로 안될 때가 있다. 그럴 땐 1 sudo npm install -g nodemon cs 이후 패스워드를 입력해주면 된다. 아래와 같은 오류를 만났을 때 1 2 3 4 5 6 7 8 9 10 11 npm ERR! code E404 npm ERR! 404 Not Found - GET https://skimdb.npmjs.com/registry/nodemon/-/nodemon-2.0.15.tgz - not_found npm ERR! 404 npm ERR! 404 'nodemon@https://skimdb.npmjs.com/registry/nodemon/-/nodemon-2.0.15.tgz' is not in ..

그냥 꾸미면 되는게 아냐..? - input 체크박스 꾸미기

input 속성의 타입을 checkbox로 만들어주면, 위와 같은 모양의 체크박스가 default로 유지된다. 버튼처럼 그냥 보더를 없애고 예쁘게 꾸미면 되는 줄 알았는데... 그게 아니다? 사실 체크박스는 기본 모양을 다르게 꾸며서 (버튼 꾸미는 것 처럼) 스타일링을 하는 것이 아니고, 기본 모양을 아예 보이지 않게 처리 한 뒤, 그 공간에 원하는 형태의 박스 이미지를 넣어줌으로써(이미지였다니!!) 변경하는 것이다. 체크 했을 때의 변경 된 모습은, 가상선택자 :checked를 사용하여 체크시 변경된 모습의 이미지를 하나 더 넣어주는 것이다.(속았다!) 체크박스 구현해보기 HTML 로그인 상태 유지 위의 체크박스를 만들어주겠다. 1. 일단 기본 체크박스를 안보이게 만들자. input[id="chkbox..

위니브 로그인페이지 클론코딩(멋쟁이사자처럼 지원과제)

URL: https://koreanhamster.github.io/weniv_login_page/ 소스코드: https://github.com/Koreanhamster/weniv_login_page 결과물 구현시 신경 쓴 점 웹 접근성 두번 째 로그인 페이지 - 보여지는 순서대로 마크업을 하면 스크린리더 상에서 아이디 입력으로 넘어가기 전에 닫기버튼이 나오기 때문에, 닫기버튼을 마크업 맨 마지막으로 배치하고 CSS를 통해 상단에 위치하게 함 소스 절약 각 회사 아이콘에 이미지 스프라이트 기법 사용 - 1장의 이미지만 사용함으로서 소스 및 로딩시간 절약 부딪혔던 문제점 1. 약간의 삽질 회원가입과 아이디/비밀번호찾기 사이에 있는 저 수직라인을 만들고 싶었다. 가상요소를 생성하여 라인을 만들어주려고 했는데,..

약방의 감초같은 image sprite기법으로 이모티콘 넣기

img 스프라이트 기법 여러 이미지들을 하나의 이미지로 만들어 background-position 속성으로 이미지 좌표 값을 이용하여 사용하는 기법 위의 로그인 리스트에서~ 구글, 페이스북, 네이버, 카카오 각각의 이미지들을 넣어준 게 아니라 1개의 이미지만 사용했다는 사실! 처음엔 컨셉이 헷갈릴 수 있으나, 아래 과정을 보면 생각보다 엄청 쉽다는 걸 알 수 있다. 왜 사용할까? 한장의 사진만으로 여러번 다른이미지들을 넣을 수 있으니까 당연히 소스절약 이는 로딩시간 단축으로 이어진다! (간단한 웹페이지는 별 차이 없겠지만, 네이버나 다음과 같은 한 페이지 안에 어마무시한 수의 이미지가 들어가는 사이트를 생각해보자..) 주의점 alt값이 들어가야 하는 의미가 있는 사진에는 적합하지 않다. 글의 악세사리처럼..

CSS로 캐릭터 만들기 - 멋사 WEB 캐릭터경진대회 우수상 수상

URL: https://koreanhamster.github.io/character_contest/ 소스코드: https://github.com/Koreanhamster/character_contest Preview 초반 스케치 캐릭터 컨셉을 확실히 잡았다. 이름: 바지리 (내가 키우는 바질에서 영감을 받음. 통통하고 연약해보이는데 잘 자란다. 성격: 외유내강을 생각하며 시크하고 세상이 뭐라던 신경쓰지 않는 내 자아를 담았다. 컨셉: 뉴욕시티 / 에어팟프로 / 주머니손 부딪힌 문제점 사진과 같이 캐릭터의 얼굴 정 중앙에 수직선을 활처럼 휘게 만들고 싶었다. 그냥 얇고 기다란 선을 만들고 각도를 조절하는건 쉬웠지만, 저렇게 활처럼 휘어보이는 표현은 어떻게 해야할 지 막막했다. 검색 중 border-radi..