컴과생의 끄적끄적

CSS 함수 CSS의 함수는 괄호 안에 인수를 전달하면, 인수에 따른 결과값을 속성에 적용하는 방식으로 동작한다. ex) 함수명(x) calc() 계산식의 결과를 속성값으로 지정할 수 있음 괄호 안에 표현식 하나를 받고, 표현식의 결과가 최종값이 됨 *표현식은 단순 계산식이면 무엇이든 가능하다. ex) width: calc(30px - 20px) *calc() 함수를 통해 textarea의 width를 가변으로 만들어 button이 고정 100px이더라도 브라우저 크기 변화에 따라 여백이 만들어지지 않도록 설정함. DOCTYPE html> calc 함수 .message{ display: flex; justify-content: space-around; align-items: center; height: ..

비율에 기반한 크기 조절 폰트 뿐 아니라, 레이아웃에도 비율에 기반한 개념을 적용할 수 있다. 부요 요소의 크기에 비례해 자식 요소의 크기가 변하는 방식은 가변 레이아웃을 만들 때 흔히 사용되는 방식이다. % (퍼센트) - %단위는 백분율 값을 나타냄. 보통 부모 요소와의 상대적 크기 지정할 때 사용 너비와 높이, 여백 뿐 아니라 글자 크기에도 사용 가능 주의! 너비와 여백은 부모 요소의 너비에 비례해 계산됨 font-size: 50%; height: 50%; width: 50%; margin: 10%; /*부모의 여백기준이 아닌, 부모의 width 기준*/ padding: 10%; /*부모의 여백기준이 아닌, 부모의 width 기준*/ DOCTYPE html> 가변 레이아웃 .container{ wid..

em과 rem은... 상위 요소 글자 크기에 따라 달라지는 가변성을 지니고 있는 것이지, 브라우저나 기기 화면에 따라 크기가 달라지는 단위는 아니다. 따라서 진정한 반응형 단위라고 할 수는 없다. 반응하는 단위들 아래 몇 가지 단위들은 뷰포트 크기를 기반으로 값을 계산하여 크기를 결정하는 가변 단위이다. vw /* 뷰포트 너비의 100분의 1*/ vh /* 뷰포트 높이의 100분의 1*/ vmin /* 뷰포트 너비와 높이 중 작은 쪽의 100분의 1*/ vmax /* 뷰포트 너비와 높이 중 큰 쪽의 100분의 1*/ DOCTYPE html> 다른 상대 단위들 p{ margin: 0; /*p태그는 기본적으로 margin의 속성을 가지고 있음*/ font-size: 50vw; } 반응형

절대단위 대신 사용해 볼 상대단위 절대 길이 단위 px : 어떤 상황에서도 동일한 값을 유지, 가변성 없음. em과 rem : 박스에서 텍스트 크기를 조정할 때 사용하는 상대 단위 em: 부모 요소의 글꼴 크기 더 알아보기! em으로 여백 크기(padding과 margin)를 정할 때는, 자기 자신의 글자 크기를 기준으로 함 rem: 루트 요소의 글꼴 크기 루트요소란? 요소. 기본값은 16px DOCTYPE html> em과 rem .outer{ font-size: 24px; } .inner{ font-size: 2em; /*48px*/ display: inline-block; width: 200px; height: 200px; background-color: tomato; } 고양이

수강 계기 우연히 광고를 통해, 스파르타 코딩클럽에서 진행하는 크리스마스 디데이 캘린더 만들기 강의를 접하게 되었다. "HTML/CSS/JS로 단 1시간 만에 만들 수 있다!"라는 문구를 보곤 짧은 강좌로 결과물을 만들어낼 수 있다는 생각에 바로 수강신청을 하였다. 이번 겨울 크리스마스 디데이 캘린더를 만들어 보고 싶기도 해 크리스마스가 지나기 전 빠르게 수강하였던 것 같다. 결과물 먼저, 결과물은 다음과 같다. 강의 총평 강의 총평을 하자면, 1시간만에 진행되는 강좌답게 직접 코딩을 통해 실력을 기를 수 있다기보다 전체적인 그림을 잡기에 좋을 거 같았다. 코드스피넷으로 코드를 Ctrl + C, Ctrl + V 하고, 코드에 대해 설명해주는 형식으로 진행되었다. 결론적으로는 제가 만든 결과물이라기 보다는..

Chapter4.4 사설 IP 주소와 NAT NAT? 네트워크 주소를 변환하는 것 (*사설 IP, 공인 IP 주소 변환에 주로 사용) 공인 IP 주소와 사설 IP 주소 NAT(Network Address Translation) NAPT(Network Address Port Translation) IP 주소 구분 - 공인 IP 주소(Public IP Address) 인터넷에서 사용되는 주소 IP 주소 할당 기관에 의해 할당된 주소 인터넷 상에서 유일한 주소 - 사설 IP 주소(Private IP Address) 인터넷 미연결 TCP/IP 네트워크를 위한 IP 주소 인터넷 IP 주소 관리 대상에 불포함 서로 다른 네트워크에서 중복 사용 가능 인터넷 IP 주소와 엄격하게 구분(인터넷에서 사용 불가) - 사설 ..

Chapter4.3 DHCP(Dynamic Host Configuration Protocol) DHCP 개요 DHCP 동작 절차 DHCP Relay Agent DHCP 개요 - IP 주소 할당 고정 할당(Static Allocation): 수동 할당, 고정 할당 동적 할당(Dynamic Allocation): 자동 할당, 유동 할당 // 인터넷에 접속할 때, 필요할 때만 할당! IP 주소가 때마다 달라질 수도 있음 - DHCP(Dynamic Host Configuration Protocol) DHCP 서버에 의한 호스트 구성 정보 동적 할당 절차 정의 IP 주소, 서브넷마스크, 디폴트 게이트웨이 주소, DNS 서버 주소(Local) 등 구성정보 자동 할당 - DHCP의 장점 사용자 편의성 IP 주소 절약..

Chapter4.2 IP 주소: 구조와 할당 인터넷 구성과 주소 부여 체계 IP 주소 구조 클래스 IP 주소(Classful IP Address) 비클래스 IP 주소(Classless IP Address) IP 주소 할당 인터넷 구성과 주소 부여 체계 - Network of Networks Internet: 이 기종 네트워크를 라우터로 연결 Subnet: 라우터로 연결된 서브넷은 유일한 ID를 가짐 Host: 호스트는 서브넷에서 유일한 ID를 가짐 *서브넷은 인터넷 차원에서 Unique한 ID를 가지고, 호스트는 서브넷 내에서 Unique한 ID를 가지기 때문에 네트워크 ID + 호스트 ID 는 인터넷에 있는 모든 장치를 Unique하게 구분 가능함. - 인터넷 차원의 주소: IP 주소 인터넷에서 통신 ..

Chapter4.1 인터넷 프로토콜(IP) IP 서비스 개요 IP 데이터그램 구조 IP 데이터그램 단편화(Fragmentation) IP 서비스 개요 - 비연결형 서비스 연결 설정 과정 없음 일련의 데이터그램을 독립적으로 전달 - 최선형(best-effort) 서비스 전송속도, 지연시간 보장 없음 오류 복구 서비스 미지원 - 서브넷 독립적 서비스 다양한 서브넷을 통해 IP 데이터그램 전송 가능 서브넷 주소와 독립적인 IP 주소 사용 - Hop-By-Hop 통신 서비스 - 계층 구조 IP 데이터그램 구조 - IP 데이터그램 헤더+데이터그램 헤더: 가변길이(Mandatory: 20바이트 + Option: 0~40 바이트) - VER : IP 프로토콜 버전 번호 // 현재: ver4, 차세대: ver6 - H..

Chapter3.7 TCP 혼잡 제어 TCP 혼잡 제어의 개념 TCP 혼잡 제어 적용 기법 - 슬로우 스타트(Slow Start) - 혼잡 회피(Congestion Avoidance) - 빠른 복구(Fast Recovery) TCP Tahoe 버전 혼잡 제어 TCP Reno 버전 혼잡 제어 혼잡 제어(Congestion Control) 개념 - 네트워크 혼잡(Network Congestion) 트래픽 증가로 인해 라우터/스위치 버퍼의 큐잉 지연시간 증가 및 오버플로우 발생 - TCP의 네트워크 혼잡 인식 심각한 혼잡: Timeout 발생 경미한 혼잡: 중복 ACK 발생(3 duplicate ACKs) - TCP의 혼잡 제어 원리 세그먼트 전송률(transmission rate) 축소 조정 (네트워크로 유..