프론트엔드 정복하기

img 태그로 이미지를 그릴 경우 이미지 로드에 실패하면, 아래처럼 onerror 함수로 대체 이미지를 출력할 수 있다.function imgError (imgTag) { imgTag.onerror=""; imgTag.src="/img/noname.jpg";}   그렇다면 background-image css 속성으로 이미지를 불러온 경우에는 에러 처리를 어떻게 할까?.backgroundImg { background-image: url('원본 이미지'), url('실패시 이미지'); ...} --> 원본 이미지 url 값 뒤에 실패 시 보여줄 이미지 url 값을 입력하면 된다. 어떤 원리인가?)background-image, background-repeat 등 background 관련 속성은 콤마..

bootstrap 모달을 열 때 모달창 뒤에 검은 화면이 생성된다. 이 검은 화면 요소는 어디에 위치해 있을까? 다음과 같이 body태그 맨 끝에 'modal-backdrop'이라는 클래스를 가지고 생성된다. ... ... ... 만약 모달창이 연달아서 여러 개 생성될 경우, 나중에 생성된 모달창의 backdrop이 기존의 backdrop에 이어서 body 태그 맨 끝에 생성된다. ... ... ... //먼저 생성된 모달의 back //나중에 생성된 모달의 back 모달창을 연달아 여러 개 띄울 경우, 문제가 하나 생긴다. 흰색 모달 박스를 띄운 후 => 버튼을 클릭하면 => 하늘색 alert모달창이 흰색 박스 위에 뜨도록 하고 싶었다. 즉, 하늘색 alert모달창의 backdrop에 흰색 모달박스가 ..

cursor css 속성이 제대로 적용되지 않는 경우가 종종 있다. 이유가 무엇일까? 1) cursor 속성을 적용한 엘리먼트가 다른 요소에 의해 가려진 경우cursor 속성을 적용한 엘리먼트가 다른 엘리먼트보다 뒷편에 존재하지 않은지 확인한다. 맞다면 z-index값을 높게 조정해서 다른 요소보다 앞으로 오도록 조정한다. 2) 그래도 제대로 작동되지 않는다면?부모나 자신에게 'pointer-events:none;' css  속성이 들어있진 않은지 확인해보라.   +) 여기서 pointer-events란?pointer-events 는 HTML 요소들의 마우스/터치 이벤트들(CSS hover/active, JS click/tap, 커서 드래그등)의 응답을 조정할 수 있는 속성이다. pointer-even..

SCSS V2가 릴리즈되면서 사용법이 매우 편리해졌다. (이전에는 sass-loader를 추가하는 등 복잡했음) 1) node-sass를 설치해주고, npm i node-sass 2) .scss 확장자를 가진 파일을 만들어 주고 AnyName.scss 3) AnyName.js파일에 AnyName.scss 파일을 import 해준다. import './AnyName.scss'

SCSS 중첩(Nesting) (LESS의 내포 규칙과 많이 비슷하다.) 중괄호 안에 해당 요소의 자식 요소들의 스타일을 작성하면 된다. LESS 기법에서 접두어만 @에서 $로 바꾸면 된다. 기존 CSS SCSS div { width: 500px; color : #000000; } div h3{ width: 500px; color : #f96d9c; } div h3 a { color : #000000; } div h1{ width : 300px; color : #ff0000; } $color-black : #000000; $color-pink : #f96d9c; $color-red : #ff0000; $width-default : 500px; div { width : $width-default; colo..

LESS 내포 규칙(Nested Rules) 중복되는 부모 태그, 클래스를 생략해주는 기법 => CSS 전체 구조도를 파악하는 데도 도움이 된다. 기존 CSS LESS div { width: 500px; color : #000000; } div h3{ width: 500px; color : #f96d9c; } div h3 a { color : #000000; } div h1{ width : 300px; color : #ff0000; } @color-black : #000000; @color-pink : #f96d9c; @color-red : #ff0000; @width-default : 500px; div { width : @width-default; color : @color-black; h3 { wi..