CPU

• 중앙 처리 장치. 기억, 해석, 연산, 제어 라는 기능을 수행하는 장치를 말한다.
• 프로그램 명령어를 해석하여 데이터를 연산 및 처리하는 장치.
  쉽게 말해, '사고'와 '연산'을 담당하는 인간의 '대뇌피질'이라 생각하면 쉽다.
• 단기 기억 담당은 RAM
  장기기억은 SSD와 HDD

메모리(Memory)

• 기억 장치. 기록하는 장치이며 CPU에서 계산한 결과가 메모리에 저장이 되는 것이다.
• CPU는 계산을 담당하고, 메모리는 기억을 담당한다.
  엄밀히 말하면, 메모리는 작업장, 보조기억장치(HDD)는 창고 이다.
• 부팅 시, 프로그램이 실행되면 그것들은 전부 메모리에 올라오게 된다!

1. RAM
   (1) RAM 을 사용하는 이유 : HDD가 느리기 때문이다.
   하드디스크는 디스크 원판이 돌아가면서, 원하는 데이터를 얻으려면 원판이 회전하는 원리이기 때문에 속도가 느리다.
   (2) 이러한 HDD의 느린 속도를 보완하기 위해 나온 것이 RAM이다.
   HDD에서는 RAM에 데이터를 적재하고, CPU는 RAM과 소통을 한다.

메모리 계층 구조

• CPU(레지스터) - (캐시 메모리) - 주 기억 장치 - (캐시 메모리) - 보조 기억 장치
• 항상 tradeoff. 용량이 작을수록 동작속도가 빠르고, 용량이 클수록 동작속도가 느리다.
• CPU는 가까운 곳에서부터 데이터가 있는지 찾아본다...
  -> 캐시 -> L1 -> L2 -> L3 -> RAM -> Disk .... (용량 높을 수록 속도는 느림.)
  • 여기서 매우 중요한 점은, 2080 법칙. 20%씩 자주 쓰는 부분만 위로 올려서 사용한다.
    즉, 하드디스크에서 자주 쓰는 20%는 RAM으로, RAM에서 자주 쓰는 20%는 L3로, ..../

1. CPU 내의 레지스터(register)
   (1) 연산 처리를 위해 빠른 속도가 요구된다. 즉, 고속, 고가의 기억 장치를 사용.
   (2) 마치 머릿 속에 있는 기억을 떠올리는 행동과 비슷하다.
2. 주 기억 장치
   (1) 메모리. 책의 특정 내용을 읽는 행동과 비슷하다.
3. 보조 기억 장치
   (1) 하드디스크. 마치 도서관에서 있는 모든 책을 뒤지는 것과 비슷하다.

부팅

• 부팅 과정
  • 전원 공급 -> 부트 프로그램 실행 -> 하드웨어 검사 -> 운영체제 로드 -> 운영체제 실행

컴퓨터가 2진수를 사용하는 이유

• 반도체는 ON/OFF 2가지 상태로 작동하기 때문이다.
• 전류의 중간상태를 측정하기 힘들어서 2가지 이상의 상태를 표현하기에는 현실적으로 불가능하다.

HTML, CSS

속성

1. display
   (1) display : inline-block;   // 가로 배열을 의미한다. 너비가 최소한으로줄어든다.
   (2) display : block;    // 세로 배열을 의미한다. 너비가 최대한으로 늘어난다. -> 가로가 꽉 참.
   (3) display : inline;    // padding, margin, width, height 가 작동하지 않는다. (대표적으로 a, span, img 가 있음)

2. display : inline-block; 으로 두 사각형 배치하면 '틈'이 생기는 이유?
   (1) inline-block; 속성은 enter(개행문자)를 미세한 틈으로 인식한다. (글자화되기 때문!!)

<nav>
  안
  녕
</nav>    // enter(개행문자)로 인해 총 3글자다!!

3. element 와 tag
   (1) element와 tag를 구분할 줄 알아야 한다.

선택자

1. section:hover + div + div -> 딱 붙어 있는 동생만.
2. section:hover ~ div -> section의 동생들 모두 선택.
3. div:nth-of-type(1) -> div 중에서 첫 번째 요소.
   div:nth-child(1) -> div 이면서, 부모의 첫 번째 자식.
4. div ~ p -> div 다음에 오는 p 선택.
5. div > p -> 자손 선택자 div 다음에 오는 자식 p 선택. 자식이 없으면 아무것도 선택하지 않는다.
   ** div p -> 후손 선택자이다. 자식 뿐만 아니라 밑에 있는 모든 p를 선택한다.

emmet

• vscode 에서 적용할 때는, f1키로 emmet extend 를 찾아서 enter로 적용할 수 있다.

1. div>section*4 -> div 자식 section 4개.
2. nav[class="menu"]>ul>li*3>a[href="#"] -> nav 속성 값 부여, ul, li 3개, a 속성 값 부여.

노말라이즈(normalize)

• 브라우저에는 기본적으로 들어간 속성 값이 있다. 그걸 꺼야 여백이 사라진다.
  body { margin : 0; padding : 0; } 이런 식으로 초기화 할 수 있다.

응용

• display : block; , width : 200px; 일 때 , margin-left 만 적용되는 이유 ?
  -> 크기가 고정되어 있기 때문이다. 고정된 크기로 인해, margin-right 까지 적용할 여유가 없는 것.
  • 해결방법은 ?
    width : auto;
margin-left : auto;
margin-left : auto; margin-right : auto; // 둘 다 auto 면 가운데 정렬임.
• div에는 기존 style 속성 값이 들어가 있다!!
  • div 에서는 color : inherit이 default 값. 부모의 특성을 물려받는다는 뜻이다.