PRDEN

1. SVG란 : SVG란 Scalable Vector Graphics의 약자로 벡터 이미지를 뜻한다. jpg/jpeg, png파일을 크게 화대해 나타내면 이미지 테투리 부분이 울퉁불퉁해진다. 이런 이미지를 비트맵 이미지라고 한다. 반면, 이미지를 아무리 확대하거나 축소해도 원래 깨끗한 상태 그대로 유지되는 이미지를 벡터 이미지라하는데 그런 이미지가 SVG이미지이다. 아이콘이나 로고 이미지에 SVG 이미지 파일 형식을 많이 사용한다. 복잡한 데이터를 웹에 표현해주는 d3.js나 Raphael.js 같은 자바스크립트 라이브러리에서 차트나 그래프를 표현하는 방식이 바로 SVG 이미지이다.

1. text-align = "center" block 요소 안 inline 요소만 가운데 정렬 된다. https://blog.pages.kr/2556 [html/css] text-align 속성으로 정렬하기 (left, right, center, justify) html에서는 문서를 수평으로 정렬할 때 align 속성을 썼는데요 align은 html5에서 지원하지 않는 속성으로 되도록 css로 정렬하는 것을 권장한다고 합니다... css에서는 문서를 수평으로 정렬할 때 text-a blog.pages.kr 2. display = "flex", justifycontent="center" 3. maring = "0 auto" https://kikit-study.tistory.com/entry/%EC%B4%..

1. flex- container = Parentdisplay : inline-block을 display : flex로 변경하기display: flex 와 inline-flex 차이 명확히 flex-direction : row(default) vs column // row-reverse, column-reverseflex-wrap : nowrap(default) vs wrap...2. Main Axis vs. Cross Axisflex-direction : row(default) vs column // row-reverse, column-reverse3. Flex Items = Childrenalign-items : stretch(default), flex-start, ...   align-content..

1. 가상클래스와 가상요소 웹 요소를 클릭하거나 마우스 커스를 올러놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶을 때 활용한다. 1) : link, 가상 클래스 선택자 : 방문하지 않은 링크 스타일에 적용 2) : visited : 방문한 링크 스타일에 적용 3) : hover : 마우스 커서를 올려놓았을 때 스타일 적용 4) : active : 웹 요소를 활성화 했을 때 스타일 적용 5) : focus : 웹 요소에 초점이 맞추어졌을 때 스타일 적용 6) : enabled, :disabled : 요소를 사용할 수 있을 때와 없을 때 7) :checked : 라디오 박스나 체크 박스에서 해당항목을 선택했을 때의 스타일 지정 8) :root : 문서 전체에 적용하기 ... ex13) ::befo..

1. outline https://aboooks.tistory.com/228#google_vignette [css] outline 속성, 용도는? [css] outline 속성, 용도는? 오늘 배울 outline 속성은 border 속성과 비슷합니다. border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법) boder를 테두리라고 한다면 outline은 border 바깥 외곽 aboooks.tistory.com 2. width: 100%, height: 100% vs. 100vh, 100vw https://shinye0213.tistory.com/372 [CSS] 100%와 100vw/100vh % %는 부모의 영향을 받는다. 정확히 말하면 부..

1. CH10. Making our Website Responsive 1) hardware device pixels vs. software CSS pixels 생략 시 mobile에서 전체화면 전체가 작게 보임. content에 maximum-scale, minimum-scale, user-scaleable,... 넣을 수 있다. 2) viewport metatag vs. @media query viewport : device viewport에 맞게 hardware pixel을 software CSS pixel로 바꿔주는 역할을 함. 그러나 design의 변화는 없음. @media query : size에 따라 디자인 변경 3) mobile first 4)media query 40rem이상이면~ @med..

1. ThemeProvider styled-components에서 ThemeProvider를 이용해 공통스타일 속성 관리할 수 있다. 하위 자식의 모든 컴포넌트는 의 props로 넘어가는 theme 값을 사용할 수 있게된. {layout === "dashboard" && ( {/* Context API 활용한 태마 변경 */} {configsButton} )} {layout === "vr" && } {getRoutes(routes)} {/* Dialog popup 전역으로 등록해 두기 */} 2. MUI ThemeProvider 3. reset -css margin 0, padding 0의 의미 : 브라우저마다 default padding 값과, default margin 값이 다 다르다. 그렇기 때문에..

1. && (A && B) A가 Truthy한 값이면 B가 결과값이 된다. example1 && example2 = example1이 true인 경우 example2을 반환하고 그렇지 않은 경우 example1을 반환 console.log(true && 'hello'); // hello console.log(false && 'hello'); // false console.log('hello' && 'bye'); // bye console.log(null && 'hello'); // null console.log(undefined && 'hello'); // undefined console.log('' && 'hello'); // '' console.log(0 && 'hello'); // 0 console..

1. 설치 https://www.popit.kr/%ec%b9%b4%ed%94%84%ec%b9%b4-%ec%84%a4%ec%b9%98-%ec%8b%9c-%ea%b0%80%ec%9e%a5-%ec%a4%91%ec%9a%94%ed%95%9c-%ec%84%a4%ec%a0%95-4%ea%b0%80%ec%a7%80/ 카프카 설치 시 가장 중요한 설정 4가지 | Popit 카프카 보안과 커버로스(Kerberos)를 이용해 구성하는 방법에 대해 다루는 글을 쓰려다가, 현재 제가 구성한 보안 클러스터 구성환경에 접속할 수도 없고 새로 구성하기도 어려운 상황이라, 평소 www.popit.kr

1.카프카 브로커 https://devbksheen.tistory.com/entry/Kafka-Broker-Zookeeper Kafka Broker & Zookeeper란? Kafka Broker & Zookeeper란? 브로커(broker)는 실행된 Kafka application 서버를 뜻한다. 주키퍼(zookeeper)는 이러한 분산 메세지 큐의 정보를 관리해 주는 역할을 한다. kafka를 띄우기 위해서는 주키퍼가 반드시 devbksheen.tistory.com 2. 프로듀서 컨슈머 https://devbksheen.tistory.com/entry/Kafka-Producer-Consumer Kafka Producer & Consumer란? Producer & Consumer란? 프로듀서(produ..