차곡 차곡 쌓아올린 지식들
- [JS] 1장 데이터 타입 - 데이터타입, 변수 선언과 데이터할당 코어자바스크립트 (위키북스) 1장 - 데이터 타입 데이터 타입의 종류 데이터 타입에는 크게 두가지가 있다 : 기본형과 참조형 기본형은 숫자, 문자열, 불리언, null, undefined 등 (+ ES6에서 symbol 추가됨) 참조형은 객체, 배열, 함수, 날짜, 정규표현식 등 (+ ES6에서 Map, WeakMap, Set, WeakSet 추가됨) 기본형은 할당이나 연산시 복제되고 참조형은 참조된다. 두가지 형태 모두 복제를 하긴 하지만, 기본형은 값이 담긴 주솟값을 바로 복제하는 반면 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다. 기본형은 불변성을 띈다? let a = 10; a = 20; console.log(a); // 20 이렇게 보면 값이 변하는 것 처럼 보이는 .. 2024.04.10
- [CSS] 반응형 웹 반응형 웹 반응형웹이란? 다양한 디바이스에 접속했을 때, 기기의 viewport 규격에 반응하여 레이아웃이 자동으로 변경되는 웹페이지 미디어쿼리란? 뷰포트의 너비에 따라 웹사이트의 스타일 시트를 수정할 수 있다. 뷰포트 너비 외에도 단말기의 종류, 해상도 등을 기준으로 설정할 수 있다. @media 미디어 쿼리 @media screen and (max-width : 500px) { // 스크린의 viewport 너비가 500px 이하일 경우 // 적용시킬 스타일 시트 } breakPoint 반응형 웹 사이트 작업의 기준이 되는 중단점을 말한다. 간단하게 말해서, pc / 태블릿 / 모바일의 기준이 되는 규격 분기! 반응형웹에서 자주 쓰이는 속성 max-width & max-height 해당요소의 최대 너.. 2024.04.09
- [CSS] grid레이아웃 grid 레이아웃 CSS 레이아웃의 흐름 : Float > Flex > Grid grid 레이아웃 시스템의 구조 flex는 1차원적 배열 구조 : row, column 방향 택 1 flex를 여러번 중첩시켜서 사용하여 구조를 짠다. grid는 2차원적 배열 구조 : row와 column 레이아웃 동시 설정 가능 grid 속성 요소의 속성을 grid로 변경 grid-line, grid-number grid-template-rows grid의 행의 개수 및 크기를 지정할 수 있다. grid-template-rows : 1fr 2ft 200px grid-template-columns grid의 열의 개수 및 크기를 지정할 수 있다. fr : fraction(분수)의 약자, grid-template에서 사용할 .. 2024.04.09
- [CSS] animation animation animation이란? 여러 이미지를 연결해서 자연스럽게 움직이는 것처럼 보이게 만드는 기법 CSS을 이용해서 애니메이션을 만드는 두 가지 방법 transition 속성 활용 animation 속성과 keyframe 활용 transition VS animation transition : 특정한 이벤트를 기점으로 작동함 (hover 등) animation : 시작하기 위한 이벤트가 필요 없음. 시작, 정지, 반복까지 제어할 수 있음 animation 속성은 @keyframes로 애니메이션을 정의하고, 정의한 애니메이션을 불러와서 제어해주어야 한다. animation-name 어떠한 keyframes를 요소에 적용할 것인지 지정 animation-duration 애니메이션을 한 번 재생하는.. 2024.04.09