img의 적절한 사용 페이지 출력시 이미지를 포함시킬 경우 이미지에 경고 아이콘과 같은 중요한 의미가있는 경우 img의 실용적인 사용 이미지가 로고, 다이어그램 또는 사람 (스톡 사진 인물이 아닌 실제 인물)과 같은 콘텐츠의 일부인 경우 브라우저 크기 조정에 의존하여 텍스트 크기에 비례하여 이미지를 렌더링하는 경우 배경 이미지 대신 img를 사용하면 배경에서 애니메이션 성능을 크게 향상시킬 수 있다. background-image를 사용하는 경우 이미지가 콘텐츠의 일부가 아닌 경우 이미지 위에 텍스트가 들어가는 경우 페이지 출력시 이미지를 제거해야하는 경우 sprite 이미지를 사용하는 경우 sprite처럼 이미지의 일부만 표시해야하는 경우 전체 창을 채우기 위해 배경 이미지를 늘리는 경우 아이콘과 같이..
CDN 설정 방법 # 01:00 보안때문에 외부 연결을 못하는 경우, 플러그인을 다운받아서 사용하고, 보통은 CDN을 사용한다. # 01:18 swiperjs.com/get-started#installation Getting Started With Swiper Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 각각 2개의 CDN 중 CSS는 일반 CSS를 사용한다. => 커스텀 마이징을 하기 위해서 JS는 min 버전을 사용한다. # 02:10 Swiper을 사용하기 위해서 제이쿼리를 사용해야 함. code.jquery.c..
부모의 z-index 레벨을 점검해 본다. .content { position: relative; z-index: 1; } .modal { position: fixed; z-index: 100; } .side-tab { position: fixed; z-index: 5; } [원인] modal의 z-index가 100이라도, 부모인 content의 z-index가 1이면 side-tab은 modal의 위에 배치될수밖에 없다. 이유는 마크업에서 같은 레벨의 부모의 z-index 값이 낮으면 자식의 값도 강제로 값이 낮아지기 때문이다. (z-index를 100해봐야 content 안에서만 100이라는 의미) [해결 방법 2가지] modal을 content 밖으로 뺀다. content의 position을 제거..
See the Pen [CSS3] background-size by mill (@millfeel) on CodePen. 값 background-size: 25px 50px; 기본 값은 auto auto이고, 이미지를 비율에 맞게 늘린다. 값이 하나인 경우: 너비 값에 적용되고, 높이 값은 auto가 된다. 값이 두개인 경우: 첫번째 값은 너비, 두번째 값은 높이가 적용된다. 여러 배경 이미지의 크기를 지정하려면 각각의 값을 쉼표로 구분한다. 키워드 background-size: cover/contain; [cover] 이미지가 잘려도 이미지를 최대한 크게 조정한다. 빈 공간이 남지 않는다. [contain] 이미지가 잘리지 않는 기준에서 가장 크게 이미지를 조정한다. 빈 공간이 남는다. [공부 좌표] b..
node.contains( otherNode ) - 주어진 인자가 node의 자손인지, 아닌지에 대한 Boolean 값을 리턴한다. - 자신의 node를 선택해도 true를 반환한다. *node와 문자열은 다르다! See the Pen [JS] Node.contains() by mill (@millfeel) on CodePen. // 자신을 선택하는 것을 방지하는 방법 function isInPage(node) { return (node === document.body) ? false : document.body.contains(node); } [공부 좌표] Node.contains() [이름이 비슷한 매서드] DOMTokenList.contains()
tokenList.contains(token); [tokenList] DOMTokenList 인터페이스는 공백으로 구분 된 토큰 세트를 나타낸다. 이러한 집합은 아래의 List를 반환하고, 선택해서 사용하면 된다. (ex. classList.contains) Element.classList HTMLLinkElement.relList HTMLAnchorElement.relList HTMLAreaElement.relList [token] 목록에 있는지 확인할 DOMString [반환] 호출 목록에 토큰이 포함되어 있으면 true, 그렇지 않으면 false [공부 좌표] DOMTokenList.contains() DOMTokenList [이름이 비슷한 메서드] Node.contains()
clip-path 요소의 클리핑 범위를 지정한다. 클리핑 범위 안의 부분은 보여지고, 바깥은 숨겨진다. clip-path 문법 자료형에 따라 문법이 달라지기 때문에 자세한 것은 MDN을 참고하세요. inset() 함수 clip-path: inset(top right bottom left); - 사각형 - 값은 띄어쓰기로 구분한다. - 값(매개변수)의 갯수 1개인 경우: 상, 하, 좌, 우를 한꺼번에 컨트롤 한다. 2개인 경우: 상,하 / 좌,우로 나눠서 컨트롤 한다. 4개인 경우: 상/하/좌/우를 각각 컨트롤 한다. polygon() 함수 clip-path: polygon(x좌표 y좌표, x좌표 y좌표, x좌표 y좌표); - 다각형 - 띄어쓰기로 구분하고, 꼭지점은 ,(쉼표)로 구분한다. [inset()..
let newClone = node.cloneNode([deep]) [node] 복제할 노드 [newClone] 노드에서 복제 된 새 노드. 문서의 일부인 다른 노드에 추가 될 때까지 문서의 일부가 아니다. [deep - 옵션] false인 경우: ‘얕은’ 복제본이 만들어진다. (후손 노드 복사 없이 elem만 복제) - 기본값 true인 경우: ‘깊은’ 복제본이 만들어진다. (속성 전부와 자손 요소 전부가 복제) See the Pen [JS] cloneNode by mill (@millfeel) on CodePen. [공부 좌표] cloneNode로 노드 복제하기 Node.cloneNode()
- Total
- Today
- Yesterday
- 객체의 프로퍼티
- 점 표기법
- 동등 연산자
- 일치 연산자
- offsetTop
- prototype 프로퍼티
- clinetTop
- 불일치 연산자
- @font-face
- javascript class
- property
- 부등 연산자
- scrollHeight
- 링크막기 #a링크막기
- scrollTop
- clientHeight
- offsetHeight
- innerHeight
- [[Prototype]]
- 프로퍼티
- outerHeight
- __proto__
- constructor
- 동치 연산자
- 대괄포 표기법
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |