코딩으로 미래그리기

cpu 선 개수 = bit수 cpu와 ram을 연결하기 위해 선이 필요하다. ram은 데이터, 명령을 보냄 cpu는 결과데이터를 보냄 cpu 제조사는 cpu 통해 명령 실행시키는 방법을 명세서로 제공한다? -> 명령어 셋 (instructions set=기계어) : 신호보내는 bit 규칙 연산자를 명령하는 코드가 다름 cpu제조사마다 명령어다름 (전기 신호를 보내는 규칙이 다름) 같은 제조사라도 cpu버전이 업그레이드되면 면 명령 규칙 추가됨, 또 cpu마다 명령어 다름 ex) i계열과 제온계열 명령어 작성 : 기계어 cpu 명령어 셋 명세서를 보고 직접 명령어 (기계어) 작성 cp... Read More

- raster font (bitmap font) : pixel 단위로 문자를 정의 - 출력 속도가 빠르다. - font 크기에 따라 각 문자를 만든다. - 정해진 크기보다 더 크게 출력하면 단순히 각 pixel의 크기를 늘리기 때문에 계단현상 발생. - 이미지 복잡도와 상관없이 파일크기 (해상도)가 같음. ex) courier 비트맵 이미지 ex) .bmp, gif, png, .jpg - vector font : 글자를 그리는 명령어를 정의 - 글자를 그리는 명령을 수행하므로 상대적으로 출력 속도가 느리다. - 요즘은 CPU가 좋아서 상관없다. ... Read More

CSS (cascading style sheet) 폭포수처럼 부모요소의 속성이 자식요소에게로 상속되는 스타일 시트 HTML element의 모양을 정의 .content header > span.title:hover { background-color: red; color: white; } selector (style을 적용할 대상을 가리킴): pseudo selector (대상의 상태) { style name:style value; } 공부 순서 selector 사용법 (중요!) specificity (style 적용 순서) (중요!) box 다루는 방법 (테두리, ... Read More

HTML Hyper-Text Markup Language HTML은 완전한 프로그래밍 언어가 아니다. 단지 문서에 markup을 할 뿐이다. markup이란 문서의 원래 콘텐츠에 부수적인 정보를 추가하는 것을 말한다. ex) 마킹, 메모, 주석, 밑줄 tag목록 tag와 element <p>content</p> tag : <p>, </p> element : <p>content</p> tag와 content를 의미 <p> tag를 적용한 style이라는 말은 엄밀히 말해 틀린 것. p element에 적용한 style이라는... Read More

Internet이란? 서로 연결된 device들의 network. 작은 network들이 모여 더 큰 global network를 형성. Internet은 TCP/IP를 통해 통신하는, 상호 연결된 컴퓨터의 global network. Internet을 연결하는 방식 Cable로 장치들끼리 연결하는 방법 Router라는 물리적 장치에 cable을 연결해 장치들과 연결하는 방법 Router 하나로 많은 컴퓨터들을 무선으로 연결 가능 전세계에 깔린 수많은 Cable과 Router들을 통해 World Wide Web이 형성된다. Web이란? 주로 World Wide... Read More

networking 2가지로 나누어짐 connection-oriented (연결지향) : 연결 후 통신 ex) 전화, 카카오톡 - stateful - 1번의 연결 후 연결끊길 때까지 연결-요청-응답 과정 반복 (1회 연결, 여러 회 통신) - 적은 수의 client에게 대응 가능 - 현재의 통신 방식 - Thread 기술 : 여러 server를 두면 많은 수의 client에게 대응 가능 ex) ssh(telnet + secure), FTP, chatting, google meet -stateless - 1번의 연결 후 연결-요청-응답 과정거치고 연결끊음 (1회 연결, 1회 통신) - 많은 수의... Read More

1. 내부 style 태그를 직접 사용 <style> h1 { 속성: 속성값; } </style> <h1>contents</h1> HTML 파일 내부에서 style을 여러 곳에 적용할 때 사용 2. inline style (HTML element 내부에 사용) (최우선으로 적용!) <tfoot style="속성: 속성값;">contents</tfoot> 간단한 style 정보를 적용할 때 사용 3. 외부 css file을 연결 <link rel="stylesheet" href="x.cs... Read More

시맨틱 태그 (Semantic Tag)란? Semantic은 ‘의미의’, ‘의미론적인’이라는 뜻을 가진 형용사이다. 따라서 시맨틱 태그란 의미가 있는 태그를 말한다. div나 span과 같이 의미가 없는 태그는 태그 이름만 보고는 어떤 내용인지 전혀 유추할 수가 없는 반면, form, table, article 등 의미가 있는 태그는 내용을 명확하게 정의한다. 시맨틱 태그는 HTML5에서 처음 등장한 태그들이다. 기존에도 div에 class 값을 붙여 스타일링하면 모든 작업이 가능했지만 개발자들은 모든 것을 div로 작성하는 것보다 효율적인 방법을 원했고 어느 부분이 제목이고 어느 부분이 내용인지 한... Read More

liveserver 확장 설치 : html live로 미리보기 가능 encoding 문자를 규칙에 따라 2진수로 표현해 문자코드로 나타내는 것 또는 코드를 규칙에 따라 다른 형식의 코드로 변환하는 것 ex) 압축, 암호화 decoding 변환된 코드를 원래 형식의 코드로 되돌리는 것 ex) 압축풀기, 복호화 예약어 (reserved keyword) : ! * ` ( ) ; : @ & = + $ , / ? # [ ] 비예약어 : 변환할 필요가 없는 문자. A~Z 0~9 - _ ... Read More

2진수를 16진수로 변환하기 진수 숫자 2진수 10100111 10진수 10 7 16진수 0X A 7 메모리는 byte들의 연속적인 배열 data -> 2진수 변환 규칙 정수 1. sign-magnitude 양수와 음수는 부호만 다르고 값은 같다. 부동소수점의 가수부를 표현할 때 사용 1byte중 2진수의 첫자리 숫자는 부호비트 (+ = 0, - = 1) +24 -> 00011000 -24... Read More

World Wide Web (WWW) 세계의 여러 대학과 연구기관에서 일하는 물리학자들 상호간의 신속한 정보교환과 공동연구를 위해 1989년, CERN (유럽 입자 물리학 연구소)의 Tim Berners-Lee가 World Wide Web Project를 제안했고 이후 그의 팀과 함께 개발한 프로그램이다. World Wide Web은 다음의 3가지 기능으로 요약할 수 있다. 통일된 Web 자원의 위치 지정 방법 ex) URL Web 자원 이름에 접근하는 프로토콜 (protocol) ex) HTTP 자원들 사이를 쉽게 항해 할 수 있는 언어 ex) HTM... Read More

1. 파일 시스템 탐색 기본 명령어 pwd, cd, ls, file, less 1) pwd 작업 디렉토리의 위치 확인 [vagrant@host1 ~]$ pwd /home/vagrant 2) cd [디렉토리명] 현재 작업 디렉토리의 위치 이동 [vagrant@host1 ~]$ cd .. [vagrant@host1 home]$ [옵션] .. : 상위 디렉토리로 이동. 예를 들어 현재 위치가 /user/jtaewu라면 /user로 이동 . : 현재 위치한 폴더로 이동. 사실상 기능은 새로고침과 동일 - : 이전에 위치했던 폴더로 이동. 윈도우의 뒤로 가기와 동일. / : ROOT... Read More

1. HTTP 등장 전 FTP (File Transfer Protocol) 논문 파일을 송수신하기 위해 사용했던 규칙 단점 논문이 참조하는 다른 논문을 download하기 어렵다. 논문 안에 다른 논문이 업로드 서버 주소가 없다. FTP Client download받고 다른 editor program돌려야 함 2. HTTP, HTML 등장 Hyper-Text text에 별도의 표시를 함 ex) HTML 태그 다른 논문의 위치 정보 삽입 가능 text의 format을 지정 가능 그림, 음성, 동영상 삽입 가능 Markup ... Read More

위 링크 접속 후 예제소스 다운로드 Read More

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html> root elemen... Read More

1. host2에서 sudo yum install git 명령어는 yum저장소에서 git을 가져오는데 yum저장소의 git은 구버전이다. 따라서, 새 버전을 받기 위해 wandisco주소에 접근한다. 실습을 위해 로컬2에 디렉토리를 clone하고 로컬2와 서버 HEAD 위치를 확인한다. sudo yum install http://opensource.wandisco.com/centos/7/git/x86_64/wandisco-git-release-7-1.noarch.rpm sudo yum remove git sudo yum install git git --version cd git git clone https:/... Read More

git config --global user.name "omelase" git config --global user.email "11chan11@naver.com" mkdir git cd git mkdir bitcamp-ncp cd bitcamp-ncp git init (local repo 생성) vi .gitignore gitignore.io에서 제외할 프로그램 목록 작성 후 복붙 github.com에서 remote repo 생성 git remote repo별명 repo주소 git pull repo별명 remote repo브랜치명 git config --global push.default simple git a... Read More

Hypervisor는 Host OS에서 다수의 Guest OS를 동시에 실행하기 위한 논리적 플랫폼이다. VM (가상머신)을 생성하고 구동하는 역할을 한다. Hypervisor에는 type1과 type2가 있는데 type1은 Host OS없이 H/W에서 직접 실행 되며 그 위에서 Guest OS가 실행된다. type1 S/W로는 Xen, ESX server, TRANGO, Hyper-V 등이 있다. type2는 H/W에 Host OS가 있고 그 위의 Hypervisor가 Guest OS를 실행한다. type2 S/W로는 Virtual box, VMware, Parallels 등이 있다. 그러나 Hyper... Read More

git이란? git은 컴퓨터 파일의 변경사항을 추적하고 여러 사용자들 간 협업을 위한 분산 버전 관리 시스템이다. 분산 버전 관리 시스템은 중앙 버전 관리 시스템과 달리 각 사용자가 중앙 서버에 접속하지 않아도 코드 작업을 할 수 있는 것이 특징이다. git 다운로드 상단의 이미지를 클릭 후 나타나는 사이트에서 다운로드하면 된다. 정상적으로 설치됐다면 cmd에서 git 명령어들이 사용가능해진다. Read More

D2Coding 폰트는 네이버에서 개발한 개발자 맞춤 무료 글꼴로 글자 구분이 용이하며, 한글도 최적화되어 있어 많은 개발자들이 추천하는 폰트이다. 다운로드는 하단 링크로 폰트 다운로드 설치 후 VScode 적용 방법은 간단하다. VScode -> 파일 -> 설정 -> 글꼴 or 폰트 검색 font family 내 폰트는 좌측에서부터 우측까지 해당 폰트가 없으면 다음 폰트를 적용하는 식으로 우선순위가 적용된다. (로컬 이미지 삽입은 경로가 중요! 첫 /은 staging영역을 나타내는 것) Read More

확장자 명 : .md 일반 텍스트 기반의 경량 마크업 언어 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징 마크다운 문법 (syntax) 제목 (Header) <h1>부터 <h6>까지 제목을 표현할 수 있습니다. # 제목 1 ## 제목 2 ### 제목 3 #### 제목 4 ##### 제목 5 ###### 제목 6 제목 1 제목 2 제목 3 제목 4 제목 5 제목 6 제목1(h1)과 제목2(h2)는 다음과 같이 표현할 수 있습니다. 제목 1 ====== 제목 2 ------ 제목 1 제목 2 강조 (Emphasis) 각각 <em>, <st... Read More