윤민상 블로그

네트워크 주소 변환 글로벌 IP 주소 : 보통 사설 IP주소 사설 IP 주소 : 인터넷에 연결하지 않고 자유롭게 사용해도 되는 주소 그런데 인터넷에 접속하는 대수가 너무 많아서 글로벌 IP 주소가 부족 => 클래스리스 어드레싱, IPv6, 네트워크 주소 변환 네트워크 주소 변환(Network Address Translation) NAT 인터넷 사업자로부터 할당 받으면 보통 IP주소는 16개. 500개가 필요해. 이때 NAT이 필요 먼저 내부 네트워크에는 사설 IP 주소를 할당(내부 네트워크 내에서 TCP/IP를 사용한 통신을 하기 위해서) 그리고 NAT에 의해 내부 네트워크에서 할당한 사설 IP 주소를 글로벌 IP 주소로 변환 단점 : 동시 접속 수의 문제(보유한 글로벌 IP 주소 수 이상의 호스트는 인..

연산자 sizeof : 자료형의 크기 확인가능 정수형 일반적으로 CPU가 처리하기에 가장 적합한 크기의 정수 자료형을 int로 정의한다. 따라서 int형 연산의 속도가 다른 자료형의 연산속도에 비해서 동일하거나 더 빠르다. char, short는 데이터의 양이 많아서 연산속도보다 데이터의 크기를 줄이는 것이 더 중요한 데이터 인 경우에 사용 실수형 보편적으로 선택하는 자료형 : double(과거에는 float) unsigned를 붙여서 0과 양의 정수만 표현하게 할 수 있다.(부호비트를 크기 비트로 변경)(양의 정수 2배) signed는 default값 (char는 예외일 수도 있어.) 아스키(ASCII) 코드 문자, 특수문자를 숫자로 표현(총 128개) 리터럴 상수 : 변수와 달리 이름이 없는 상수 i..

정수 정수의 가장 왼족에 존재하는 비트 : 부호비트 양수 0, 음수 1 음의 정수를 표현할 때에는 2의 보수를 취해야 한다. ex) 00000101(정수5) =>(1의보수) 11111010 => (1을 더함) 11111011(정수 -5) 실수 컴퓨터가 실수를 표현하는 방식에는 오차가 존재 부동 소수점 오차는 프로그래밍 언어에 상관없이 발생하는 문제이다.

플렉스 박스 레이아웃과 기본 속성들 플렉스 박스 레이아웃 : 그리드 레이아웃을 기본으로 해 플렉스 박스를 원하는 위치에 배치하는 것 플렉스 컨테이너 : 컨테이너 플렉스 항목 : 플렉스 컨테이너에 담기는 웹 요소 주축 : 플렉스 항목을 배치하는 기본 방향(기본은 왼->오, 수평방향; 주축 시작점, 주축 끝점) 교차축 : 주축과 교차되는 방향(기본은 위->아래; 교차축 시작점, 교차축 끝점) display : flex | inline-flex .wrapper{ display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flexx; display:flex; } flex-direction 속성 - 플렉스 방향 지정하기 flex-dire..

미디어 쿼리 이해하기 미디어 쿼리 : CSS3 모듈 중 하나로 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 해준다. 기본형 : @media [only | not] 미디어 유형 [and 조건] * [and 조건] 연산자 : and(조건 추가), 쉼표(동일한 연산), only(미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식하게 해) not(다음에 지정하는 미디어 유형을 제외) 미디어 유형의 종류 미디어 쿼리의 조건 뷰포트 : 실제 웹 문서의 내용이 화면에 보이는 영역 웹 문서의 가로 너비와 세로 높이 width,height | min-width, min-height | max-width, max-height 단말기의 가로 너비와 세로 높이 dvice-width, device-heig..

모바일 기기와 웹 디자인 반응형 웹 디자인 : 화면 크기에 반응해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것 반응형 웹의 장, 단점 1. 모든 스마트 기기에서 접속 가능 2. 가로 모드에 맞추어 레이아웃 변경 가능 3. 사이트 유지, 관리 용이(미디어 쿼리와 플렉스 박스는 최신 모던 브라우저만 지원) 모바일 기기를 위한 기본 다지기, 뷰포트 뷰포트 : 스마트폰 화면에서 실제 내용이 표시되는 영역 기본형 : ex) 스마트폰 화면 너비에 맞추고 초기 화면 배율 1 가변 그리드 레이아웃 px를 %로 변경 (요소의 너비 / 콘텐츠 전체를 감싸는 요소의 너비) * 100 가변 레이아웃과 가변 요소 가변 글꼴 : em, rem 글자 크기(em) = 글자 크기(px) / 16px em은 부모 요소의 크기에 ..

변형 2차원 변형과 3차원 변형 transform과 변형 함수 transform(45deg), scale(0.7)(1이 1배), rotate(20deg), skew(30deg) 변형과 관련된 속성들 transform-origin 속성 - 변형 기준점 설정하기 축이 아닌 특정 지점을 변형의 기준으로 설정할 수 있다. transform-origin : | initial | inherit (백분율, left, center, right | top, center, bottom | 길이) perspective, perspective-origin 속성 - 원근감 표현하기 0보다 커야하고 클 수록 밀어냄 perspective : | none ( ex) 300px) perspective-origin : | ; ( ex)..

4계층의 역할과 개요 4계층 이상의 상위 계층에서는 데이터를 운반하는 직접적인 동작은 하지 않는다. 4계층 이상의 상위 계층에서는 전달할, 전달된 데이터에 대해 필요한 처리를 함. 3계층까지는 수신처 자체가 존재하지 않거나 데이터가 도중에 손실됐거나 에러에 의해 파기됐다는 등의 문제들은 신경쓰지 않는다. => 4계층이 에러 복구(역할1) 흐름제어 : 신뢰성이 높은 통신을 위해서 에러를 복구하고 통신 상태도 확인한다.(역할2) 실은 데이터를 주고받는 것은 애플리케이션이다. 포트 번호 : 어느 애플리케이션이 송수신할지를 결정하는 번호 TCP/IP에서 실제로 이런 제어를 행하는 것이 TCP와 UDP라는 두 프로토콜. 통신할 때 둘 중 어느 한 쪽이 사용. because TCP와 UDP는 역할이 다름 커넥션과 ..