코딩하는 감자

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..

21년 6월 8일 저녁 여러 사이트에서 503 에러가 1시간동안 발생 되었다가 복구 되었다. 에러가 발생된 사이트들은 아마존, 레딧, 트위터, 트위치, 핀터레스트, 페이팔, 영국 정부 웹사이트, BBC 등의 큰 사이트들이었다. 503 에러는 저번에 올렸던 스토리인 HTTP 상태 코드(https://wccoding.tistory.com/m/16) 내용을 보면 ' 대표적으로 서버에 오류가 생겼을 때는 500 상태가 발생하고 서버에서 요청 시간안에 주소를 반환하여 주지 않으면 503 상태가 발생한다. ' 라고 말했었다. 따라서 503 에러가 뜬 이 상황은 웹사이트들을 관리하는 서버 업체일 것이라는 추측을 할 수 있다. 미 CNBC에 따르면 접속이 마비된 사이트들에 *CDN(콘텐츠 전송 네트워크) 서비스를 제공..

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 같은 상속 되는 건 계산하지 않음 점수를 통해서 우선순위를 계산할 수 있어야함

box-sizing : 요소의 크기 계산 기준을 지정 content-box : 요소의 내용(content)으로 크기 계산 border-box : 요소의 내용 + padding + border로 크기 계산

border: 선-두께 선-종류 선-색상; -> 요소의 테두리 선을 지정하는 단축 속성 border : 요소의 크기가 커짐 선-두께 : border-width 선-종류 : border-style 선 색상 : border-color ex. border의 기본값 -> border: medium none black; border-width : 요소 테두리 선의 두께 -> 개별 속성 이면서 단축 속성 (padding,margin과 같음) 기본값 : medium(중간 두께) border-style : 요소 테두리 선의 종류 -> 개별 속성 이면서 단축 속성 (padding,margin과 같음) - 기본값 : none (선 없음) solid(실선) dashed(파선) border-color : 요소 테두리 선의 색..

CSS속성 표현 단위 px : 픽셀 % : 상대적 백분률 em : 요소의 글꼴 크기 rem : 루트 요소(html)의 글꼴 크기 vw : 뷰포트 가로 너비의 백분률 vh : 뷰포트 세로 너비의 백분률 margin : 요소의 외부 여백(공간)을 지정하는 단축 속성(0 : 외부 여백이 없음, auto : 브라우저가 여백을 계산), 음수를 사용할 수 있는 속성 -> 단축 속성 :1개의 값부터 최대 4개의 값까지 입력할 수 있다. - 4개 입력 : margin 1px(상) 2px(우) 3px(하) 4px(좌) - 3개 입력 : margin 1px(상) 2px(좌,우) 3px(하) - 2개 입력 : margin 1px(상,하) 2px(좌,우) - 1개 입력 : margin 1px(상,하,좌,우) margin 개별..

CSS속성 - 박스 모델 width : 박스의 가로 영역 범위 지정 (auto : 브라우저가 너비 계산) height : 박스의 세로 영역 범위 지정 (auto : 브라우저가 너비 계산) span : 콘텐츠 영역 설정 용도(인라인 요소(auto(기본값 상태)일 때 가로 넓이 줄이려고 함) div : 콘텐츠의 영역 설정 용도(블록 요소(auto(기본값 상태)일 때 세로 넓이를 늘리려고 함) max-width : 요소가 커질 수 있는 최대 가로/세로 너비 (none : 최대 너비 제한 없음) max-height :요소가 커질 수 있는 최대 가로/세로 너비 (none : 최대 너비 제한 없음) min-width : 요소가 작아질 수 있는 최소 가로/세로 너비 (0 : 최소 너비 제한 없음) min-height..

속성의 종류 박스 모델 : 가로, 세로 너비 글꼴, 문자 : 폰트(서체), 문자 크키 등 배경 : 배경 이미지 등 배치 : 원하는 요소를 원하는 위치에 배치 플렉스(정렬) : 수직에서 쌓이는 레이아웃이 아닌 수평 정렬 전환 : 요소의 전 생태와 후 상태를 자연스럽게 애니메이션 처리를 해주는 것 변환 : 요소를 회전하거나 이동시키거나 크기를 조정시키는 것(2D, 3D변환 등) 띄움 : 요소를 공중으로 띄우는 것(이미지 주변으로 문자가 나타내게 하는것 ex.신문기사 등) 애니메이션 : 복잡한 구조의 이미지 변환을 사용할 떄 자연스럽게 해주는 것 그리드 : 행과 열을 가지고 있는 2차원의 레이아웃을 제어하기 위함 다단 : 여러 단으로 나누고 구별해줄 때 사용 필터 : 이미지 흐림(blur)처리, 흑백(gray..

가상 요소 선택자(Pseudo-Elements) before : 선택자 x요소 내부 앞에 내용(content)을 삽입 .x::before{ content: "앞"; } after : 선택자 x 요소의 내부 뒤에 내용(content)을 삽입 .x::after { content: "뒤"; } 속성 선택자(Attribute) attr : 속성 x를 포함한 요소 선택 [x]{ color: red; } attr=value : 속성 x를 포함하고 값이 y인 요소 선택 [x="y"]{ color:red; }