0701 월 uiux 62일차

0701 월 uiux 62일차

 

멀티 숫자 카운터, 제이쿼리 each ( https://codepen.io/YoungHeom/pen/GRabPvZ )

 

 

드래그(글자 마우스 선택) 안 되게 하는 방법!

ㄴuser-select: none;

줄바꿈 안되는 건 white-space: nowrap;

 

 

$('.box-1__minus').click(function(){
    const num = parseInt($('.box__num').text)
    const newNum = num - 1 >= 0 ? num -1 : 0;
    console.log(num);
});

 

const newNum = num - 1 >= 0 ? num -1 : 0;

' num - 1 >= 0'  조건식

조건식이 참이면 - 1, 거짓이면 0

 

parseInt: 문자 0이 오면 숫자 0으로 변환해줌

$('.box-1__minus').click(function() {     const num = parseInt($('.box-1__num').text());     const newNum = num - 1 >= 0 ? num - 1 : 0;     $('.box-1__num').text(newNum); }); $('.box-1__plus').click(function() {     const maxNum = 5;     const num = parseInt($('.box-1__num').text());     const newNum = num + 1 <= maxNum ? num + 1 : maxNum;     $('.box-1__num').text(newNum); });

 

 

 

---

 

display: none;_visibility: hidden;_opacity: 0; 차이 ( https://codepen.io/YoungHeom/pen/bGyPzEM )

ㄴ 갑자기 궁금해서 따로 정리함

 

요소를 숨기는 css 속성들 (

'display: none;', ' visibility: hidden;', ' opacity: 0;' ) 부모 태그에 bgc 적용한 후 차이점 알아보기

 

부모, 자식 태그에 높이가 없고 자식 태그에 텍스트만 입력되어 있을 때

 

- display: none; 

적용 시 배경(부모 태그)이 아예 화면에서 사라진다.(부모 태그에 높이가 없을 경우) 박스 실종.
그러나 부모 태그에 높이가 적용된 경우엔 자식 태그에 display: none;을 줘도 배경이 사라지지 않는다.

 

- visibility: hidden;

  공간은 차지하면서 해당 속성을 적용한 요소만 사라진다.( opacity: 0;과 동일 ) 빈 박스.

  커서를 대도(hover) 커서 모양이 바뀌지 않는다.

 

- opacity: 0;

  공간은 차지하면서 해당 속성을 적용한 요소만 사라진다. ( visibility: hidden;과 동일 )  빈 박스.
  커서를 대면 커서 모양이 cursor: text;으로 바뀐다.

 

페이지 우측 하단 홈엔드 버튼 만들기( https://codepen.io/YoungHeom/pen/bGyPOXL )