코딩하는 감자

JS 데이터 종류 String - 문자열 Number - 숫자 Boolean - 참/거짓 (불대수) Null - 값이 없음을 명시적으로 표현 undefined - 변수가 정의되었으나, 값이 정의 안 된 상태 Symbol - 유일한 식별자 생성 Object(객체) - single item을 묶어 하나의 박스로 관리 가능하게 해줌 function(함수) - 변수에도 할당이 가능하다(first-class function: 일급함수)

- 표기법 dash-case(kebab-case) : html,css에서 주로사용 ex) the-quick-brown-fox-jumps snake_case : html,css에서 주로사용 ex) the_quick_brown_fox_jumps camelCase : JS에서 주로 사용 theQuickBrownFoxJumps PascalCase : JS에서 주로사용 TheQuickBrownFoxJumps Zero-based Numbering : 0기반 번호 매기기 -> 특수한 경우를 제외하고 0부터 숫자를 시작합니다. - 주석 // 한 줄 메모 /* 한줄 메모 */ /** *여러줄 *메모1 *메모2 */ 단축키 : ctrl + /

perspective : 하위 요소를 관찰하는 원근 거리를 지정(*함수가 아닌 속성) perspective 속성과 함수의 차이점 -속성 perspective: 600px 관찰 대상의 부모에 적용 기준점 설정 : perspective-origin -함수 transform: perspective(600px) 관찰 대상에 적용 기준점 설정 : transform-origin backface-visibility : 3D변환으로 회전된 요소의 뒷면 숨김 여부 visible(기본값) : 뒷면 보임 hidden : 뒷면 숨김 transform: rotateY(180deg); backface-visibility: hidden; -> 뒷면(180도로 뒤집어진 부분)이 보이지 않게 됨

transform : 요소의 변환 효과 transform: 변환함수1 변환함수2 변환함수3 ...; transform: 원근법 이동 크기 회전 기울임; 개별 속성들 2D(2차원)변환 함수 translate(x,y) : 이동(x축,y축) translateX(x) : 이동(x축) translateY(y) : 이동(y축) scale(x,y) : 크기(x축, y축) scaleX(x) : 크기(x축) scaleY(y) : 크기(y축) rotate(degree) : 회전(각도) skew(x,y) : 기울임(x축, y축) skewX(x) : 기울임(x축) skewY(y) : 기울임(y축) matrix(n,n,n,n,n,n) : 2차원 변환 효과 3D(3차원)변환 함수 translateZ(z) : 이동(z축) tran..

transiton : 요소의 전환(시작과 끝)효과를 지정하는 단축 속성 transition: 속성명 지속시간(필수속성) 타이밍함수 대기시간; 개별 속성들 transition-property : 전환 효과를 사용할 속성 이름을 지정 all(기본값) : 모든 속성이 적용 속성이름 : 전환 효과를 사용할 속성 이름 명시 transition-duration : 전환 효과의 지속시간을 지정 0s(기본값) : 전환 효과 없음 시간 : 지속시간(s)을 지정 transition-timing-function : 전환 효과의 타이밍(Easing) 함수를 지정 ease(기본값) : 느리게 - 빠르게 - 느리게 linear : 일정하게 ease-in : 느리게 - 빠르게 ease-out : 빠르게 - 느리게 ease-in-o..

order : Flex Item 의 순서 0(기본값) : 순서 없음 숫자 : 숫자가 작을수록 먼저 order: -1; > order: 0; > order: 2; > order: 17; flex-grow : Flex Item의 증가 너비 비율 0(기본값) : 증가 비율 없음 숫자 : 증가 비율 flex-grow: 1; flex-grow: 2; flex-grow: 1; -> 1대 2대 1 비율로 너비 증가 flex-shrink : Flex Item의 감소 너비 비율 1(기본값) : Flex Container 너비에 따라 감소 비율 적용 숫자 : 감소 비율 *감소 비율을 0으로 입력하면 감소되지 않음 기본값이 1인 Item들은 컨테이너가 줄어들 때 같이 줄어들지만 flex-shrink: 0; 일 때의 Item..

flex-wrap : Flex Items 묶음(줄 바꿈) 여부 nowrap(기본값) : 묶음(줄 바꿈) 없음 wrap : 여러 줄로 묶음 wrap-reverse : wrap의 반대 방향으로 묶음 *대부분의 경우에는 flex를 사용하여 수평 정렬을 한다. justift-content : 주 축의 정렬 방법 flex-start(기본값) : Flex Items를 시작점으로 정렬 flex-end : Flex Items를 끝점으로 정렬 centet : Flex Items를 가운데 정렬 space-between : 각 Flex Items 사이를 균등하게 정렬 space-around : 각 Flex Items의 외부 여백을 균등하게 정렬 display: flex; justify-content: flex-end; ->..

display : Flex Container의 화면 출력(보여짐) 특성 flex : 블록 요소와 같이 Flex Container 정의 inline-flex : 인라인 요소와 같이 Flex Container 정의 Flex Container : flex가 부여된 요소 Flex Items : flex가 부여된 요소의 자식 요소 Flex 속성을 부여할 때 Container와 Items에 부여하는 속성이 각각 다르게 구성되어 있다. Flex Container 에 부여할 수 있는 속성 display flex-flow, flex-direction, flex-wrap justify-content align-content align-items Flex Items 에 부여할 수 있는 속성 order flex, flex-g..

z-index : 요소의 쌓임 정도를 지정 auto(기본값) : 부모 요소와 동일한 쌓임 정도 숫자 : 숫자가 높을수록 위에 쌓임(음수 가능) *z-index를 사용할 때 값을 999와 같이 큰 값은 사용하지 않는 것이 좋다 position 값이 없는 조건에서는 있는 값과 다른 z-index 위치를 갖는다. 요소의 display가 변경됨 position 속성 값으로 absolute, fixed가 지정된 요소는, display 속성이 block 요소로 자동으로 변경됨 display: block; position: absolute; top 30px; left: 30px; z-index: 1; position: absolute; top: 30px; left: 30px; z-index: 1; 따라서 위의 값와 ..

positon : 요소의 위치 지정 기준 static(기본값) : 기준 없음 relative : 요소 자신을 기준 absolute : 위치 상 부모 요소를 기준(위치 상 부모 요소를 꼭 확인해야 함) fixed : 뷰포트(브라우저)를 기준 sticky : 스크롤 영역 기준 *position과 같이 사용하는 css 속성들(모두 음수를 사용할 수 있음) - top, bottom, left, right, z-index top, bottom, left, right : 요소의 각 방향별 거리 지정 auto(기본값) : 브라우저가 계산 단위 : px, em, rem 등 단위로 지정 - ex) 원래 자신의 위치를 기준으로 상30px, 좌30px position: relative; top : 30px left : 30..

background-color : 요소의 배경 색상 transparent(기본값) : 투명함 색상 : 지정 가능한 색상 background-image : 요소의 배경 이미지 삽입 none(기본값) : 이미지 없음 url("경로") : 이미지 경로 * 배경 색은 배경 이미지보다 뒤로간다. background-repeat : 요소의 배경 이미지 반복 repeat(기본값) : 이미지를 수직, 수평 반복 repeat-x : 이미지를 수평 반복 repeat-y : 이미지를 수직 반복 no-repeat : 반복 없음 background-position : 요소의 배경 이미지 위치 0% 0% (기본값) : 0% ~ 100% 사이 값 방향 : top, bottom, left, right, center 방향 단위 : p..

color : 글자의 색상 rgb(0,0,0)(기본값) : 검정색 색상 : 기타 지정 가능한 색상 text-align : 문자의 정렬 방식 left(기본값) : 왼쪽 정렬 right : 오른쪽 정렬 center : 가운데정렬 text-decoration : 문자의 장식(선) none(기본값) : 장식 없음 underline : 밑줄 overline : 윗줄 line-through : 중앙선 text-indent : 문자 첫 줄의 들여쓰기 0(기본값) : 들여쓰기 없음 단위 : px, em, rem 등으로 단위 지정

font-style : 글자의 기울기 normal(기본값) : 기울기 없음 italic : 이텔릭체 font-weigjt : 글자의 두께(가중치) normal(기본값) : 400 기본두께 bold, 700 : 두껍게 100~900 : 100단위 숫자 9개, normal과 bold이외 font-size : 글자의 크기 16px(기본값) : 기본 크기 단위 : px, em, rem 등의 단위로 지정 line-height : 한 줄의 높이, 행간과 유사 normal(기본값) : 브라우저의 기본 정의를 사용 숫자 : 요소의 글꼴 크기의 배수로 지정 단위 : px, em, rem 등의 단위로 지정 % : 요소의 글꼴 크기의 비율로 지정 font-family : 글꼴 서체 지정 글꼴1, "글꼴2", ... 글꼴 계..

SSR(Server Side Rendering) : 서버 단에서 변화된 데이터를 반영해 완성된 화면을 전달해주는 것 (웹 사이트에 접속하면 서버에서 필요한 데이터를 모두 가져와서 html 파일을 만든다.) SSR을 이용하게 되면 페이지 로딩이 빨라진다. 모든 컨텐츠가 HTML에 담겨져 있기 때문에 효율적이다. SSR의 큰 문제점 Blinking 이슈가 아직 남아 있다. 서버의 과부하가 걸리기 쉽다.(사용자가 많을 수록) 서비스를 사용할 때 동적인 활용에 딜레이가 있다.(매우 치명적인 단점) - 초기 view 로딩 속도 Server Side Rendering 에서는 view를 서버에서 처리해 초기 로딩속도는 빠르지만, 정보가 많은 B2C 웹 서버에서 등은 서버의 부담이 크다. - 보안문제 Server Si..

TTI(Time to interact) 사용자가 웹브라우저에서 인터랙션 할 수 있는 시점 TTV(Time to view) 사용자가 웹브라우저에서 내용을 볼 수 있는 시점 CSR 사이트 접속 서버에서 인덱스 파일을 받아 온다. (이 때는 컨텐츠가 없는 상태라 빈 화면으로 보인다.) html 파일에 링크 되어 있는 웹사이트에 필요한 모든 로직이 담겨 있는 자바스크립트 파일을 요청한다. 동적으로 html 요소를 생성할 수 있는 웹 어플리케이션 로직(angular, react, vue와 같은 것들)이 담긴 자바스크립트 파일을 가져온다. => TTV, TTI SSR 사이트 접속 서버에서 이미 잘 만들어진 인덱스 파일을 받아온다. => TTV 자바스크립트 파일을 서버에서 받아온다. https://velog.io/@..

- CSR(Client Side Rendering) : 변화된 UI를 유저의 브라우저에서 만드는 것 (클라이언트 측에서 필요한 것이 있으면 서버에서 파일을 받아온 후 동적으로 html을 생성해서 사용자에게 최종적인 html을 보여주는 방식) CSR(Client Side Rendering)의 큰 문제점 사용자가 첫화면을 보기 까지 시간이 오래걸림 좋지 않은 SEO(Search Engine optimization) Rendering : 웹페이지를 화면에 그려주는 것 - 초기 view 로딩 속도 Client Side Rendering 에서는 CSS, Javascript 파일 등 필요한 파일을 모두 다운로드하기 때문에 view 로딩이 다소 늦지만, 최초 로딩 이후의 요청에 대한 대응이 빠르다. - 보안문제 Cl..

usb나 ssd 등의 저장 장치의 용량을 표시할 때 10진수로 계산된 용량 표현과 2진수로 계산된 용량 표현으로 인해서 용량의 차이가 난다. 예전같이 적은 용량의 저장장치만 있었을 때에는 10진수계산 2진수계산 상관없이 오차가 별로 없었지만 테라바이트 단위의 용량까지 사용하는 현재는 오차 범위가 20기가 이상이 날 정도로 커졌다. 이러한 표현의 방식 때문에 저장장치를 구매하는 사람들은 표시된 용량보다 크기가 작다는 이유로 이상하게 생각을 하는데 이러한 오해를 막기위해 1998년 IEC 라는 단체에서 다른 표기법을 제안하였다. 10진수를 사용하여 표현한 것과 차이를 주기 위해 2진수를 사용하여 표현한 것은 킬로바이트(kilobyte)가 아닌 킬로 2진수 바이트(kilo binary byte)로 부르기로 정..

스마트폰을 충전할 때 보조배터리를 통해 유선 충전을 하면 스마트폰 사용 중에도 배터리 잔량이 조금씩 올라가는 것을 볼 수 있다. 하지만 보조배터리를 스마트폰에 갖다 대어서 무선 충전을 하면 충전하기 전보단 배터리 잔량이 덜 떨어지지만 계속 떨어졌다. 무선 충전을 할 때는 스마트폰과 보조 배터리가 핫팻 처럼 열이 엄청 나는데도 불구하고 충전이 매우 더딘 이유가 궁금해서 무선 충전의 원리에 대해서 조사해 보았다. 무선 충전의 원리는 여러 방법이 있지만 전자기 유도 방식과 공진 유도 방식을 사용하는 무선 충전 원리를 찾아 보았다. 1. 전자기 유도 방식 먼저 전자기 유도 법칙의 현상을 발견한 패러데이의 전자기 유도 법칙의 정의는 다음과 같다. - 패러데이 전자기 유도 법칙 [Faraday's law of el..

- overflow : 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성 visible(기본값) - 넘친 내용을 그대로 보여줌 hidden - 넘친 내용을 잘라냄 scroll - 넘친 내용을 잘라냄, 스크롤 바 생성 auto - 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성 오버 플로 - 단축 속성 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 개별 속성들 overflow-x 와 overflow-y

같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법 - 점수가 높은 선언이 우선 - 점수가 같으면 가장 마지막에 해석된 선언이 우선 인라인 선언 (style="coloe: orange";) - 1000점 css 속성 값 뒤(color: red !important;)!important(중요도) - 999999999점 ID선택자(#color_yellow) - 100점 class 선택자(.color_yellow) - 10점 태그 선택자(div) - 1점 전체 선택자(*) - 0점 body 같은 상속 되는 건 계산하지 않음 점수를 통해서 우선순위를 계산할 수 있어야함