분류 전체보기
220929
220929
Date.
보호글
[JavaScript] 형변환 까먹지 말기
[JavaScript] 형변환 까먹지 말기
Date.

진짜 단순한 숫자비교 큰숫자 > 작은숫자 비교하는데 형변환을 까먹고 스크립트를 짰다

안될이유가 없는데 왜 안되지 하구 어제 찾다가 오늘 출근해서 다시 봤는데 바로 보였음 🤦‍♀️

 

 

잘못된 예시 : 

 

See the Pen Untitled by kim so yeon (@ksoyy) on CodePen.

 

 

올바른 예시 : 

 

See the Pen 숫자형변환1 - 올바른 예시 by kim so yeon (@ksoyy) on CodePen.

 

 

다시한번 형변환 까먹지 않기...ㅠ

 

[CSS] 상속 inherit, initial
[CSS] 상속 inherit, initial
Date.

inherit

https://developer.mozilla.org/ko/docs/Web/CSS/inherit

 

부모 요소로부터 해당 속성의 값을 받아서 사용합니다.

 

 

예제1

span{color:#fff; background:#000;}

 

<p>Lorem ipsum dolor sit, amet <span>consectetur</span> adipisicing elit.</p>
<p style="color:blue">Lorem ipsum dolor sit, amet <span>consectetur</span> adipisicing elit.</p>
<p style="color:green">Lorem ipsum dolor sit, amet <span>consectetur</span> adipisicing elit.</p>

 

결과

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

 

 

예제2

.t1 span{color: inherit;}
span{color:#fff; background:#000;}

 

<p class="t1">Lorem ipsum dolor sit, amet <span>consectetur</span> adipisicing elit.</p>
<p style="color:blue">Lorem ipsum dolor sit, amet <span>consectetur</span> adipisicing elit.</p>
<p style="color:green">Lorem ipsum dolor sit, amet <span>consectetur</span> adipisicing elit.</p>

 

결과

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

 

initial

 
속성의 기본값(초깃값)을 요소에 적용합니다.
기본값은 브라우저가 지정합니다.

 

 

예제

p{color:tomato}
em, i{color: initial;}

 

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. 
  <em>Nesciunt accusantium, </em>
  minus delectus laudantium architecto 
  <i>autem molestias labore ut placeat </i>
  distinctio assumenda eius explicabo possimus, 
  deserunt veritatis iste eaque ipsam beatae?
</p>

 

결과

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt accusantium, minus delectus laudantium architecto autem molestias labore ut placeat distinctio assumenda eius explicabo possimus, dieserunt veritatis iste eaque ipsam beatae?

 

상속 되는 속성

z-index X
position X
top/right/bottom/left X
overflow X
float X
opacity ⭕
display X
width/height X
margin X
padding X
border X
box-sizing X
font ⭕
color ⭕
line-height ⭕
text-align ⭕
text-decoration X
white-space ⭕
background X
vertical-align X
visibility ⭕

 

참고 : https://poiemaweb.com/css3-inheritance-cascading

 

 

 

[CSS] container/inner 너비 만큼 % 구해야할때1
[CSS] container/inner 너비 만큼 % 구해야할때1
Date.

git : https://github.com/ksoyy/LEVEL-UP/tree/main/css/container%2Cinner%20너비%20만큼%20%25%20구해야할때1

codepen : https://codepen.io/ksoyy/pen/abYqrdy

 

- 반응형사이트

- 고정값이 아닌 유동적으로 움직일때

 

웹사이트 돌아다니다가 혹은 일하실때 자주 봤을법한 레이아웃입니다~!

빨간색 부분 (삼각형, 빨간색 배경)을 구하는 방법입니다

 

See the Pen container/inner 너비 만큼 % 구해야할때1 by kim so yeon (@ksoyy) on CodePen.

예시로 첨부한 codepen은 반응형 코드로 제작되어 있기때문에 1200px 이상해상도에서 확인해주세요!

 

css calc 함수 (바로가기)를 활용해서 구하는 방법입니다!

container,inner 너비 ÷ 2 해서 계산하시면됩니다!

 

220802
220802
Date.
보호글
[Swiper] 슬라이드에 맞게 재생되는 애니메이션 바
[Swiper] 슬라이드에 맞게 재생되는 애니메이션 바
Date.

github : https://github.com/ksoyy/LEVEL-UP/tree/main/swiper/슬라이드에%20맞게%20재생되는%20애니메이션%20바

codepen : https://codepen.io/ksoyy/pen/abYpMOG

animate 와 스와이프 옵션에 있는 transitionEnd 를 활용하여 만들었습니다.

 

function mainSlideAni(actEl) {
  actEl.find('.bar').animate({ width: '100%' }, 3000);
}

 

애니메이션 바에 animate 를 사용해서 스와이프 재생시간인 3000 동안 가로가 100% 되도록 설정했습니다.

애니메이션 바가 중복으로 생기는걸 방지하기 위해 슬라이드가 전환될때마다 애니메이션 바를 지우고 다시 만들었습니다.

 

 

 

 

DEMO

 

See the Pen Untitled by kim so yeon (@ksoyy) on CodePen.

[Swiper] 슬라이드 index 구하기
[Swiper] 슬라이드 index 구하기
Date.

github : https://github.com/ksoyy/LEVEL-UP/tree/main/swiper/슬라이드%20index%20구하기

codepen : https://codepen.io/ksoyy/pen/XWEjqVj

swiper 슬라이드를 사용하게 될때 응용작업에서 가장 많이 사용하고 있는 슬라이드 인덱스 구하는 방법입니다!

그냥 index를 구할때 loop 옵션과 함께 사용할경우 정확한 index 구하기가 어렵습니다.

slideChange 이벤트를 사용해 슬라이드가 변경될때 정확한 index값을 구할수있습니다.

 

 

DEMO

 

See the Pen Untitled by kim so yeon (@ksoyy) on CodePen.

 

참고

https://swiperjs.com/swiper-api#prop-swiper-realIndex

[Swiper] 동일 형식 슬라이드가 반복될때 each문 사용하기
[Swiper] 동일 형식 슬라이드가 반복될때 each문 사용하기
Date.

github : https://github.com/ksoyy/LEVEL-UP/tree/main/swiper/동일%20형식%20슬라이드가%20반복될때%20each문%20사용하기

codepen : https://codepen.io/ksoyy/pen/eYMdrdN

 

동일한 형태의 슬라이드가 반복될때 each문을 활용하는 방법입니다.

 

 

 

DEMO

 

See the Pen [Swiper] 동일 형식 슬라이드가 반복될때 each문 사용하기 by kim so yeon (@ksoyy) on CodePen.

[Swiper] 페이지(swiper-pagination-bullet) 표시 - 기본, 숫자, 스타일 응용
[Swiper] 페이지(swiper-pagination-bullet) 표시 - 기본, 숫자, 스타일 응용
Date.

github : 

codepen : https://codepen.io/ksoyy/pen/poLELqG

swiper 페이지 표시 관련글 입니다


기본형
모든 pager 버튼 클래스 : swiper-pagination-bullet
활성화 버튼 클래스 : swiper-pagination-bullet-active

숫자형
활성화 페이지 번호 클래스 : swiper-pagination-current
전체 페이지 번호 클래스 : swiper-pagination-total

위에 적힌 클래스 명으로 스타일 조절 가능합니다.
마지막 슬라이드처럼 가상선택자, 혹은 다른 태그를 이용해 번호 사이 단순 디자인적인 표시 혹은 슬라이즈 재생 시간과 같은 스타일도 가능합니다.

 

 

DEMO

See the Pen Untitled by kim so yeon (@ksoyy) on CodePen.

 

[JavaScript] 숫자 올림, 내림, 반올림, 버림
[JavaScript] 숫자 올림, 내림, 반올림, 버림
Date.

codepen : https://codepen.io/ksoyy/pen/abYNpNd

let num = 123.456789;

console.log(Math.ceil(num)); // 올림 : 124
console.log(Math.floor(num)); // 내림 : 123
console.log(Math.round(num)); // 반올림 : 123
console.log(parseInt(num)); // 버림 : 123

 

결과 확인

See the Pen 숫자 올림, 내림, 반올림, 버림 by kim so yeon (@ksoyy) on CodePen.

 

 

 

참고

올림 | Math.ceil()

내림 | Math.floor()

반올림 | Math.round()

버림 | parseInt()

티스토리툴바