본문 바로가기

WEB/CSS

a태그 ie에서 font-size:0; 주의 a태그 ie에서는 font-size:0주면 안됨 + absolute로 띄울땐 백그라운드 필수 text-indent:-9999처리로 해결
inline-block 으로 한줄 정렬하기 float을 사용하지 않고 한줄 정렬하는법 이렇게하면 inline-block요소끼리의 알수없는 간격이 발생함 위와같이 부모 요소에 font-size:0; line-height:0을 주어서 간격을 없애면 해결(inline요소가 기본적으로 가지고 있는 간격) 이후에 자식요소에 자유롭게 margin,padding을 주면 된다.
색상 관련 페이지 1. Adobe Kuler Color Code Generator 유명한 색상표 생성 사이트, 샘플 팔레트 제공. 2. Material Palete 마터리얼 UI 제작시 생삭표를 알아서 골라줌. 웹 UI 사용시에도 가능 3. Material Mixer 2.0 4. RGB Color Converter RGB 칼라 코드를 변환기, 헥사코드, rgba, hsl 로 변환 5. Coolors + SkillShake랜덤하게 색상코드 생성 6. Color Hunt 샘플 칼라 팔레트로 느낌있는 색상 선택하기 7. Cohesive Colors 호버 버튼 색상 정하기 곤란할 때 편리하게 색상코드 생성. 8. Color palette generator 업로드한 이미지에서 색상코드 추출하기 9. PHOTOCOPA 위와 같은 이..
반응형 웹 검증 온라인 툴 1. XRespond선호하는 화면 크기를 설정하고 홈페이지 URL을 입력하는 것 만으로 출력되는 레이아웃을 확인 할 수 있는 온라인 도구 2. Responsinator모바일 기기별 출력되는 레이아웃을 확인하고 대응 할 수 있다. 3. Responsive Design Checker지정사이즈 화면으로 재빨리 반응형웹 출력물을 확인할 때 봅니다. 원래 모니터 화면이 적어도MacBook 화면 처럼 1920px 넓은 사이즈 화면 출력도 확인할 수 있다. 4. Google Mobile TestGoogle은 웹 개발자에게 유익한 툴을 많이 공개하기도 하죠, 그 중에 모바일 친화성 검사도 하나이죠. 함 사용해 보세요. 5. Matt Kersley's Responsive Tool디자이너이자 개발자인 Matt Kersle..
animation 01.Squash and Stretch : 짓누르고 늘이기http://codepen.io/donovanh/pen/wBRNqX02.Anticipation : 예비 동작 주기http://codepen.io/donovanh/pen/KwbJvJ03.Staging: 연출http://codepen.io/donovanh/pen/wBRNrx04.Straight-Ahead Action and Pose-to-Pose : 순차적 묘사와 원화에 의한 설계http://codepen.io/donovanh/pen/zxyePG[출처] 디즈니사 만화영화에서 배우는 12가지 애니메이션 원칙 CSS 코드 (하드코딩하는사람들) |작성자 CodingBear05.Follow Through and Overlapping Action: 계속하여 진..