-

[Javascript] 조건문 switch

switch특정 변수나 상수 또는 반환값에 따라 작업을 실행하나의 값이 여러 경우 중 어디에 해당하는 지 찾을 때 유용switch (표현식) { case value1: // value1일 때 실행 break; case value2: // value2일 때 실행 break; default: // 어떤 case와도 일치하지 않을 때 실행} expression의 결과와 case의 값을 **===(엄격 비교)**로 비교함.일치하면 해당 case의 코드를 실행하고 break를 만나면 빠져나감.break가 없으면 다음 case로 계속 넘어감(이걸 "fall-through"라고 부름).어느 case에도 일치하지 않으면 default 실행.표현식 안에 설정 가능한 값값을 도출할 수 있는..

Framework (프레임워크)애플리케이션의 구조와 흐름을 제어하기 위한 기본적인 구조(뼈대)를 제공보다 구조화된 방식으로 코드를 작성하도록 강제하며, 프레임워크의 규칙과 구조를 따라야 함프레임워크는 개발자에게 미리 정의된 규칙과 구조를 제공하여 일관성 있는 개발을 도와주며, 개발자는 프레임워크에서 호출되는 메소드를 구현하는 역할자바스크립트 프레임워크 종류 : Angular, React, Vue.js, Spring ...도구설명Angular전체 구조와 생명주기를 Angular가 제어ReactUI 컴포넌트만 다루지만, Next.js 같은 프레임워크와 함께 쓰면 프레임워크처럼 사용 가능* 프레임워크와 라이브러리 경계가 모호함Vue.js전체 구조와 구성요소를 정의 .. CSS 프레임워크 종류 : Bootsta..

backdrop-filter적용된 요소의 영역만큼 원하는 필터를 적용하는 속성으로, 벤더 프리픽스와 사용 (* 사용 시 브라우저 지원 확인)backdrop-filter : 속성(속성단위)속성설명blur- 이미지를 흐리게 함- 예) blur(10px)- 픽셀 값이 높아질 수록 더 흐려brightness- 밝기 조정contrast- 색 대비 조정- 원래 상태 100%을 기준으로 낮으면 흐려지고, 높으면 뚜렷해짐- 대비가 높을 수록 밝은 색은 더 밝아지고, 어두운 색은 더 어둡게 표현됨saturate- 채도 조정, 색을 얼마나 다채롭게 표현하는지 정함- 0% : 완전히 뺀 흑백 상태- 높을수록 더 많은 색을 사용해 진해짐grayscale- 채도 조정- saturate 와 반대 설정- 100% 에 가까울 수록 ..

aspect-ratio요소의 가로 세로 비율을 지정하는 속성상위 컨테이너나 뷰포트의 크기가 변경되더라도 브라우저는 지정된 종횡비를 유지하며 크기를 조정속성은 : auto, n, width / height 형태로 설정반응형 작업 시 PC에서 고정으로 사용하던 이미지를 Mobile 100%로 가변 비율을 변경 시 이미지의 비율을 유지하기 aspect-ratio: auto aspect-ratio: 1 / 1;aspect-ratio: 1;/* 콘텐츠 비율 우선, 없으면 설정값 사용 다만, 현재 브라우저 지원 낮아 잘 사용되지 않음*/aspect-ratio: auto 3/4;aspect-ratio: inherit;aspect-ratio: initial;aspect-ratio: revert;aspect-rati..

transitioncss 속성을 변경할 때 애니메이션 속도를 조정하는 방법을 제공transition : 속성 지속시간 시간함수 지연시간;transition-property트랜지션을 적용할 css 속성의 이름transition-duration트랜지션이 일어나는 지속시간 설정transition-timing-function트랜지션 시간함수 설정속성값 : ease, linear, ease-out, step-end 등 cubic bezier() 함수를 이용하여 설정 가능transition-delay트랜지션 시작 지연시간 설정

transform주변 요소에 영향을 끼치지 않으면서 원하는 요소의 모습을 변경하는 속성scale요소의 배율을 지정하는 함수두 개의 요소를 지정해서 x, y를 다르게 설정 가능transform : scale(n)transform : scale(x, y)rotate요소의 회전을 지정하는 함수속성 단위 : deg, tum1 tum = 360도, 0.5 tum = 180도transform : rotate(45deg)transform : rotate(1tum)translate요소의 위치를 지정하는 함수속성 단위 : top, left, bottom, right, 숫자 단위 (px, % 등)%는 부모가 아닌 해당 요소의 너비와 높이를 기준으로 함transform : translate(1px, 24px)transfor..

CSS 상속 CSS 상속 속성colorletter-spacingvisibilityline-heightfont 속성letter-spacinglist-style 관련 속성text-aligntext-decorationtext-shadow inherit어떤 요소의 속성값이 지정되어 있는 상태에서, 부모의 값을 상속받고자 할 때 사용상속 적용이 해당되는 css 속성에 한함initial요소의 기본 속성 초기값 사용display:initial은 display:inline으로 설정되므로, display:block 명시 필요unset상속된 값이 있을 경우 inherit와 같이 사용, 없는 경우 initial과 같이 사용상속 적용이 해당되는 css 속성에 한함.container { color:red}.container>d..

HTML 기본 정보 태그DOCTYPEHTML 문서가 어떤 형식과 버저으로 작성되었는 지를 명시해당 선언을 빠뜨리면 쿽스 모드(quirks mode)로 읽게 되고, 이는 지금은 사용하지 않는 옛날 브라우저 형태로 HTML을 읽는것을 의미 lang을 선언하여 검색엔진, 스크린 리더에게 언어를 알려줌 해당 문서의 메타 데이터, 컴퓨터가 읽어 낸 문서 정보가 담겨 있음페이지 정보, 파비콘, 메타정보, css, javascipt 코드 및 링크 포함웹 페이지의 제목브라우저 탭, 즐겨찾기, 검색 결과에 표시되는 제목문서의 상세 정보 포함charset웹 페이지 문자 인코딩 방식 지정반드시 형식을 명시해야 글자가 깨지는 형상이 발생하지 않음viewport화면에 보여지는 웹사이트 영역 제어ㅈㅅ모바일의 경우 시각적 뷰포트(..

Flex항목을 행이나 열로 배열하는 레이아웃 방법float나 position을 사용하지 안혹도 유연한 반응형 레이아웃 구조를 쉽게 디자인할 수 있음flex의 기본 조건flex는 항상 부모 요소(flex container)와 자식 요소(flex items)로 구성됨부모요소에 기본적으로 display: flex가 설정되어야 함flex의 특징flex를 무시하려면 자식요소에 postion:absolute를 활용flex container와 flex item에 정의하는 속성으로 나누어 짐자식요소는 행으로 배치된다(축으로 정렬)Flex container모든 요소는 부모 요소에 disply:flex/inline-flex 설정을 기본으로 함flex container 속성은 전체적인 정렬이나 흐름에 관련된 속성 설정 : ..

text-decoration글자를 꾸며주는 속성원하는 색이나, px로 선 굵기 조정 가능선 모양속성설명wavy물결선dotted점선dashed파선 선 위치속성설명underline아래overline위line-through중간Lorem.Lorem 2Lorem 3s