If...Else

세로 정렬 center .flex { display: flex; width: 200px; height: 100px; align-items: center; /* 세로 정렬 */ background: #ccc; } 코드 결과 화면 center 가로 정렬 center .flex { display: flex; width: 200px; height: 100px; justify-content: center; /* 가로 정렬 */ background: #ccc; } 코드 결과 화면 center JSFiddle 코드 보기 : https://jsfiddle.net/pilot376/po1qdk4g/16/

CSS 애니메이션 구동 시 자바스크립트에서 시작 종료 시점을 알 수 있다. html css div { width: 100px; height: 100px; background: red; position: relative; animation: mymove 2s linear forwards; animation-delay: 1s; } @keyframes mymove { from { top: 0px; } to { top: 100px; } } javascript var ani = document.querySelector(".ani"); ani.addEventListener("animationstart", function(e) { console.log("시작"); }, false); ani.addEventListen..

em em은 font-size를 정의한다. em값을 이용해 폰트 사이즈를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향을 받는다. 테스트 body { font-size: 14px; } div { font-size: 1.2em; /* 14px * 1.2 = 16.8px */ } em으로 정의한 폰트 사이즈를 모든 자식 div 태그에 선언하면, div는 각 부모의 폰트 사이즈를 상속받아 점점 커지게 된다. 테스트1 테스트2 테스트3 rem rem의 "r"은 "root를 뜻한다. 최상위 html 태그에 지정한 사이즈를 기준으로 삼는다. html { font-size: 14px; } div { font-size: 1.2rem; } 테스트1 테스트2 테스트3 rem 사용 시 모든 div는 16.8px..

마크업 11111111 22222222 33333333 44444444 55555555 66666666 77777777 88888888 99999999 00000000 태그에 position: relative 속성 있을 때 .container { width: 200px; height: 200px; overflow-x: hidden; overflow-y: scroll; border: 1px solid #ccc; } .list { position: relative; padding: 5px 0; } 태그에 position: relative 속성 없을 때 .container { width: 200px; height: 200px; overflow-x: hidden; overflow-y: scroll; border..

에 padding을 주면 파이어폭스(17.0.1)에서는 다른 브라우저들과 다르게 스크롤바 바깥쪽으로 여백이 생긴다. 매우 오래된(10년…) 이슈이고, 현재까지 완벽한 해결법은 없는듯하다. 작업 시 디자이너와의 협의가 필요해 보인다. 파이어폭스 브라우저에서의 렌더링. 크롬 브라우저에서의 렌더링. 파이어폭스를 제외한 모든 브라우저에서 이처럼 스크롤바 바깥으로 여백이 생기지 않는다. 참조 URL http://forums.phpfreaks.com/topic/201677-firefox-incorrectly-padding-textarea/ https://bugzilla.mozilla.org/show_bug.cgi?id=157846

Base64가 뭐지?? “Base 64″란 8비트 이진 데이터(예를 들어 실행 파일이나, ZIP 파일 등)를 문자 코드에 영향을 받지 않는 공통 ASCII 문자열로 바꾸는 인코딩 방식을 가리키는 개념이다. Base64 이미지 사용 이 아이콘을 Base64로 인코딩하면 아래와 같은 문자값을 얻을 수 있다. (http://www.base64-image.de/) data:image/gif;base64,R0lGODlhDwAOAPYBAAAAAP///+Pj5MzS6qy33bfA4sDI5dne8I6e0JGg0Zim1Jqo1aGu2H6SyZOj0HWMxYWYytbY3V98vLG801p9ulN6u2SHw0JvtYiix8vU4TBmsDBmrx9fqyJgrEB1uGCOxRpeqoGjygdXpwlYpw5aqBVhrGOUx6C..