처음 로딩 시 svg 배경 이미지가 간혈적으로 제대로 나오지 않는 이슈 네트워크에서 이미지는 잘 가져옴 CSS에서 background-position 전에 background-size를 선언하는지 확인 background-size 속성 contain 에서 100% 로 변경 background-size: contain -> background-size: 100% 참고 CSS background-size: 100%; background-image: url(../images/logo.svg); background-repeat: no-repeat; background-position: 0 0; background-color: #fff;

Code files 일반적으로 3가지의 파일 형식으로 구성됩니다. 1. HTML 웹사이트의 구조를 나타냅니다. 집짓기와 비교해본다면, 벽돌, 화장실, 창문 같은 것들입니다. 웹사이트로는 버튼, 텍스트, 이미지 등이 됩니다. 2. CSS 웹사이트의 스타일을 나타냅니다. 집짓기와 비교해본다면, 가구의 배치, 벽지의 모양 등의 인테리어라고 생각해주세요. 버튼의 색상, 크기, 텍스트의 폰트 등이 됩니다. 3. JS 웹사이트의 기능을 나타냅니다. 집짓기와 비교해본다면, 배수관을 통해 물이 흐르고, 스위치를 켜겨나 플러그를 꽂으면 전기를 사용할 수 있게 하는 것입니다. 버튼을 눌렀을 때 실제 동작하게 만드는 일을 하죠. 웹사이트에 생명을 불어넣어줍니다. 브라우저 URL 입력 후 이루어지는 일들 URL parsing..

/* 3, 6, 9, 12 번째(3의배수) 배경변경 */ li:nth-child(3n){ background: red; } /* 10번째 부터 이후 모든 리스트 컬러변경 */ li:nth-child(n+10) { color: blue; } /* 1번째 부터 5번째 까지 배경변경 */ li:nth-child(-n+5) { background: green; } /* 15번째 부터 20번째 까지 배경변경 */ li:nth-child(n+15):nth-child(-n+20) { background: hotpink; } /* 끝에서 부터 3번째 */ li:nth-last-child(3) { background: gold; } /* 홀수 */ li:nth-child(odd) { color: red; } /* 짝수 ..

css display 속성을 이용해 컨텐츠 영역을 접거나 펼치는 방법 입니다. if ( $('.box').css('display') === 'none' ) { $('.box').show(); } else { $('.box').hide(); } 위 코드를 자바스크립트로 변경하면 아래와 같습니다. var box = document.querySelector('.box'); if ( box.style.display === 'none' ){ box.style.display = 'block'; } else { box.style.display = 'none'; }

What CSS Properties Are Supported When You Drop IE6 Support > - Immediate descendant (child) selector.[attr] - Attribute selector (starts with, ends with, contains).:first-child - First child selector.min-width - Minimum width layout.max-width - Maximum width layout.min-height - Minimum height layout.max-height - Maximum height layout.position:fixed - Fixed position layout..A.B - Multiple class ..