본문 바로가기

분류 전체보기

(60)
sass - .scss & .sass 차이점, sass 에서 변수 지정하기 .scss & .sass 차이점 https://www.sassmeister.com/ 간단하게 .scss, .sass 테스트 가능 SassMeister | The Sass Playground! SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading... www.sassmeister.com 가장 큰 차이점은 indented / nested의 구조이다 scss file의 경우 css에서 가능했던 모든 기능을 사용 가능하고 nested 구조를 가지며 sass file은 indented 구조를 가진다 /****.scss file****/ h1 { color: blue; font-size: 2rem; span { color: red;..
network - 연결 형태 네트워크 연결 형태 컴퓨터 네트워크에서 데이터 전송 및 교환 기술에 따라 네트워크를 분류하는 방식 점대점 (point-to-point) 방식 단말기 간의 데이터 전달과정에서 송신 측 단말기가 중개 단말기와 1 : 1로 연결되므로 다른 단말기로는 데이터가 전달되지 않는다 데이터를 최종 목적지 단말기까지 올바르게 전달하기 위해 인접 단말기에 전송하는 방법을 단계적으로 반복하게 된다 원거리에 있는 시스템 사이에 통신방식으로 원거리 통신망 (WAN) 환경에서 주로 사용된다 장단점 / 해결 전체 연결 개수가 많아질수록 성능 면에서 유리하지만 전송매체의 길이가 증가해 비용이 많이 든다 연결 개수가 적어지면 전송매체를 더 많이 공유해 네트워크의 혼잡도가 증가하게 된다 네트워크 트래픽이 많이 발생하는 구간에서는 전송매..
network 개요 데이터 통신 특정 전송매체 (유선 또는 무선) 를 통해 장치 사이에 데이터를 주고받는 행위 구성요소 메시지(message) 통신의 대상이 되는 정보나 데이터를 의미 텍스트, 숫자, 그림, 소리, 영상물 등 단일 메시지와 멀티 메시지 유형으로 나눌 수 있다 송신자 (sender) 데이터 메시지를 보내는 장치. 단말기 컴퓨터, 전화기 등 수신자 (reciver) 메시지를 수신하는 장치를 의미 컴퓨터, 전화기, 라디오 등 전송매체 (medium) 메시지를 송신자에서 수신자까지 전송하는 물리적인 수단 유선매체와 유선매체 유선매체 이중 꼬임선, 동축 케이블, 광케이블 등 무선매체 라디오파, 적외선, 위성파, 마이크로파 등 프로토콜 (protocol) 데이터 통신을 하기 위한 규약 통신을 하고자 하는 장치등 사이의..
react & sass single child carousel 싱글 차일드 케러셀 https://github.com/joepasss/single-carousel GitHub - joepasss/single-carousel: single child carousel in react single child carousel in react. Contribute to joepasss/single-carousel development by creating an account on GitHub. github.com 작업내용 정리 1. 캐러셀 내부에 들어갈 자식 요소들 정렬하기 2. 캐러셀 자식 또는 부모 컨테이너 이동하기 시작 전 세팅 - 리엑트 세팅 import './singleCarousel.scss'; export const SingleCarousel = () => { const [curre..
grid-alignment (justify-content, align-content) justify-content, align-content 미리보기 HTML 삽입 미리보기할 수 없는 소스 start, center, end, space-around, space-between, space-evenly 의 값을 적용할 수 있다 이전 justify-items, align-items와 같이 부모 요소에 적용하면 된다 코드 예시 section.grid-container { height: 100vh; display: grid; grid-template-columns: repeat(4, 10%); grid-template-rows: repeat(2, 150px); background-color: rgb(255, 255, 255); justify-content: start; align-content: ..
grid alignment (justify-items, align-items) justify-items, align-items 미리보기 HTML 삽입 미리보기할 수 없는 소스 그리드 아이템을 정렬할 때 사용한다. 총 4가지 property (stretch, start, center, end)가 있으며 부모 요소에서 적용할 수 있다 적용 예시 section.grid-container { height: 100vh; display: grid; grid-template-columns: repeat(4, 10%); grid-template-rows: repeat(2, 150px); background-color: rgb(173, 72, 72); justify-items: stretch; align-items: stretch; div.item { font-size: 1.5rem; text-a..
grid areas Grid Areas 미리보기 grid-template-areas 그리드 시스템에서 레이아웃을 짤때 사용 grid-container(부모)에서 grid-template-areas 로 정의하여 사용 가능하다 예시 .grid-container { background-color: #ff7052; display: grid; gap: 25px; grid-template-areas: 'header header header header header header' 'sec-1 sec-1 sec-2 sec-2 sec-3 sec-3' '. sec-4 sec-4 sec-4 sec-4 .' 'sec-5 sec-5 sec-5 sec-6 sec-6 sec-6' 'footer footer footer footer footer foo..
grid item 포지셔닝 css grid item 포지셔닝 포지셔닝의 방법에는 위치를 바꾸는 것, Spanning, template areas를 이용하는 방법이 있다 Set Up html 셋업 item-1 item-2 item-3 item-4 item-5 item-6 item-7 item-8 item-9 item-10 item-11 item-12 css (sass) 셋업 section.grid-container { height: 100vh; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 200px); div.item { font-size: 1.5rem; text-align: center; line-height: 200px; f..
signal-mean, variance, standard deviation Signal mean algorithm 모든 시그널의 평균을 구하는 알고리즘 /**** SIGNAL MEAN FUNCTION ****/ double calc_signal_mean (double * sig_src_arr, int sig_length) { double _mean = 0.0; for (int i=0; i < sig_length; i ++) { _mean = _ mean + sig_src_arr[i] } _mean = _mean / (double)sig_length; return _mean; } 모든 값을 더해서 평균을 내는 간단한 함수 Signal Variance algorithm 분산 특정 시그널이 평균값에서 얼마나 떨어져 있나를 계산할 때 사용한다 mean (평균) 값을 먼저 계산한 후 델..
css grid GRID grid 적용 전 grid 적용 후 flexbox와 다르게 2차원적으로 구성되는 특징이 있다 (column, row) 1. grid 적용 방법 grid-container 라는 클래스를 가진 section이 있다고 가정