반응형 Web16 javascript 비교 연산자와 불리언(boolean) 조건문이나, 반복문 등의 조건부 코드실행에 자주 활용되는 비교 연산자에 대해 자세히 알아보겠습니다. 비교 연산자의 종류 비교 연산자의 결과는 True나 False인 불리언(Boolean) 자료형으로 출력됩니다. == (이중 등호 연산자) 두 값을 비교해서 참 또는 거짓으로 반환. 좌항, 우항의 값이 동등함을 확인 후 조건에 해당하는 코드만 실행. = (단일기호) - 변수나 상수에 값을 할당하는데 사용 != 값의 부등성을 확인하는 연산자입니다. a, b가 같지 않은 것을 확인 후 이 조건에 해당하는 코드만 실행. === (삼중 등호 연산자) 값과 자료형이 일치하는지 확인 비교합니다. !== 값과 자료형이 일치하지 않은 것을 확인 비교합니다. >, < 크기 비교 연산자입니다. 값이 큰지 작은지 비교하며, 숫.. 2023. 2. 28. css 셀렉터 - 특성 선택자 [class *='text-'] 클래스 모두 선택하기 css선택자(css Selectors)는 아래와 같이 여러종류가 있습니다. 클래스 선택자 특성 선택자 ID 선택자 유형 선택자 전체 선택자 이 중 특성 선택자에 대해 알아보겠습니다. 특성 선택자란 주어진 특성을 가진 모든 요소를 선택하는 것을 말합니다. 특성 선택자 종류도 여러가지가 있는데요, class*='포함할 클래스' 이렇게 사용하면 내가 만든 class이름을 포함하고 있는 모든 태그를 선택할 수 있습니다. 클래스 이름을 포함한 모든 태그를 선택하는 방법에 대해 아래 소스로 예를 들어보겠습니다. '더보기' 라는 글자가 있고, 폰트사이즈와 여백값은 같고 색만 다르게 작업을 하였습니다. 더보기 더보기 더보기 더보기 더보기 font-size와 padding값이 똑같이 반복되고 있습니다. 반복해서 사용해도.. 2023. 2. 27. CSS Scroll Snap(스크롤스냅)으로 이미지 slider 만들기 scroll snap이란 사용자가 터치하거나 스크롤 시 조작을 마쳤을 때 화면에서 다음 화면으로 전환될 때 자석처럼 특정 위치에 탁 붙는 기능입니다. 보통 swiper를 이용하여 슬라이더를 만들었는데, swiper를 사용하는 대신 scroll snap을 이용하여 슬라이더 기능을 간단하게 만들 수도 있습니다. 또는 fullPage js와 같은 기능을 sroll snap을 사용하여 구현할 수도 있습니다. css scroll snap에 대한 브라우저 지원은 대부분 지원을 합니다. scroll snap 의 기본 사용법 스크롤 스냅은 컨테이너 요소에 scroll-snap-type 속성을 설정하고 그 안에 있는 요소에 scroll-snap-align 속성을 설정하여 사용합니다. 가장 기본적인 형태는 다음과 같습니다.. 2023. 1. 17. css 이미지 비율(종횡비) 고정하는 방법 aspect-ratio 사용 aspect ratios는 화면비(종횡비)라는 뜻으로 디스틀레이의 가로 세로 길이의 비율을 뜻합니다. css최신 기능으로 추가된 aspect-ratio속성으로 이미지 비율을 편리하게 설정할 수 있습니다. 지원 가능한 브라우저는 다음과 같습니다. aspect-ratio는 IE를 지원하지 않습니다. IE를 고려하지 않아도 된다면 aspect ratios를 사용하면 좋을 것 같습니다. 속성값은 다음과 같이 사용할수 있습니다. 컨테이너의 기본 가로 세율 비율은 지정된 width와 height 비율입니다. height와 앞의 슬래시( / ) 문자를 생략하면 높이는 1로 설정됩니다. 기본 종횡비의 크기 계산은 box-sizing으로 지정된 상자의 크기로 계산됩니다. aspect-ratio: 1 / 1; aspect.. 2023. 1. 16. 이전 1 2 3 4 다음 반응형
