LIKELION🦁 TIL(2022-06-21)

현대적 컴퓨터의 기본 구조

CPU와 메모리를 분리.
폰 노이만 : 통합되어 있던 입력장치와 출력장치를 나누었다.

컴퓨터 메모리의 기본구조

기본구조

• 보조기억장치 (HDD, SSD)
• 주기억장치 (RAM)
• CPU (L3, L2, L1, 레지스터)

보조기억장치

• HDD와 SSD 가 있다.

1. HDD : sequential access. 순차적 접근

• 단점 : 느린 속도, 발열, 소음
• 장점 : 데이터 관리가 안정적

2. SSD : random access. 임의 접근

• 단점 : 데이터 유실 가능성(불안정), 데이터 연속적으로 받아올 때, HDD 보다 효율이 떨어진다. → SSD는 연속적 데이터임에도 주소로 접근하기 때문에, 접근 횟수에 따라 계산된다…

• 장점 : 기본적으로 빠른 데이터 접근 속도
  (RAM과 비슷함, 데이터의 주소값(물리 메모리 주소)으로 접근.)

• 운영체제에서 제공하는 가상 메모리 공간 :
  프로세스(프로그램 실행)가 이 공간을 사용한다.

C 언어

• C언어를 배우는 이유
• 자바 숙련도 증가, 함수 호출 스택 쌓이는 등… 직접 확인 가능.
• C11(modern C) 사용해서 백준. C는 근본의 언어다.
  → 확실히 어필 요소가 있다…
• NGINX 의 특정 모듈, 운영체제 만들기, 포토샵 만들기
  (필터와 같은 연산 작업들)

Chapter 3. 반복문

#include <stdio.h>

int main() {
  int dan = 1;
  int j = 1;
  printf("%d * %d = %d\n", dan, j, dan*j);   
  j++;        // j+=1 과 j j+1; 도 가능.
  printf("%d * %d = %d\n", dan, j, dan*j);
  j++;
	//...
}

Chapter 4. 반복문

• C언어 기본 문법
  • 제어문
    • 조건문 , 반복문
  • 일반구성요소
    • 변수, 함수

while 문으로 8단 출력하기. 8*100 까지.

#include <stdio.h>

int main(void) {
  int dan = 8;
  int j = 1;
  
  while(j <= 100) {
    printf("%d * %d = %d\n", dan, j, dan*j);
    j++;
  }

  return 0;
}

for 문 과 while 문

• for문
  → 시작점 끝점, 증감까지 한 번에 파악. 좀 더 잘 보임. 쉽게 파악 가능.
• while 문
  → 시작점, 끝점, 증감 다 따로 있다.

Chapter 4. 반복문2

• 1000의 모든 약수 출력 → 더 효율적인 코드, root 사용해서 풀어보기.

Chapter 6. 다중 반복문

• 이중 반복문

HTML, CSS 실습하기

82강. 최종단계를 codepen.io/pen 빈페이지에서 10분 안에 완성.

• emmet
  • nav.menu-box-1>ul>li*3>a[href=”#”]{1차 메뉴 아이템 $}
• normalize
  • body, ul, li { margin : 0; padding : 0; list-style : none; }
  • a { color : inherit; text-decoration : none; }
• nav[class=”menu-box-1]
  • 만약 css selector에서 여러 개 class 값이 들어간 것을 선택해야 할 때, 이는 여러 개를 포함하지 못한다.
    그래서, nav.menu-box-1 로 사용하는 것!
• 너비 주기 방법 1 : a 태그(inline-block)에 패딩 가로로 길게 줘서 width를 맞추는 방법
  → 전체 메뉴의 너비가 미정 방법 2 : li 태그(inline-block)에 width 지정하고 a태그 block으로 width를 채우는 방법→ 전체 메뉴의 너비가 정해져 있을 때
  

---

음수 마진이란

• margin-top : -20px; // 마치 유령처럼 박스 안 범위를 넘어가는 현상.

102강

1. position : static;
   1. default 속성.
2. position : absolute;
   1. 좌표값에 의해서 달라진다. (top, bottom, left, right)
      → left : 0; 이면 좌측에 붙는다.

104강

• 색 4개 구획으로 만들어보기.
  → 빨리 완성하면, codepen.io/pen 에서 만들어보기.

105강

• 색 3개 구획으로 만들기.
  힌트 : 33.3333% → left : 33.3333%; 하면, 왼쪽에서 그만큼 떨어짐.
  참고로, calc(100% / 3); 이런 식으로 작성도 가능하다.

109강

• width, height 사용안하고 4개 구획 만들기.
  힌트 : top, bottom, left, right 다 써야 함.
• 더 밀면, 더 많이 줄어든다. left : 70%; → 왼쪽에서 멀어짐.

102강

1. position : absoulute; → 유령
   1. 좌표 값으로 위치 조정. 주변 신경 안씀! 하나의 독립적 세계임.
   2. top, left, right, bottom 속성을 가진다.
2. position : static; → 사람.
3. position : relative; → 사람. 유령의 집 기능.
   1. 본인에게는 아무런 영향 X.
   2. 유령을 가둘 수 있음.
      즉, 자식으로 있는 absolute; 속성 elements 들을 가둔다.
   3. margin-left : auto; margin-right : auto; 로 가운데 정렬 가능.

정가운데 배치해보기

• top : calc(50% - 110px);
  left : calc(50% - 110px);
  → box-sizing이 없으면, 내가 이렇게 계산해줘야 한다….
• box-sizing : border-box; → 너비가 고정!!! border 가 안쪽으로 들어간다.
  즉, 기존에 width, height 가 200px 이라면,
  width,height 는 190px에 border 10px.
  → 이렇게 하면, top : calc(50% - 100px); 해주면 됨.
• transform : translateX(-50%) translateY(-50%); → 이것도 정중앙으로 간다.
  너비의 50% 만큼 x축, y축으로 이동한다는 뜻이다.

---

• img → diplay : block;
  아니면, line-height 와 vertical-align 사용…
• https://via.placeholder.com/500x200?text=Hello
  → 편하게 이미지 임베딩하기 좋은 사이트.

메뉴 구성 패턴이 중요한 이유

• 모바일로 인터넷이나 앱을 이용하는 사람이 pc로 이용하는 사람보다 5~10배 많다.
  즉, 모바일 겨냥해서 하는게 맞다. 반응형으로. (굿웹디자인 참고)
• 창 크기 줄이면, 햄버거(삼단) 메뉴로 바뀜.
  → 누르면, 메뉴 가 열린다. (진짜 100이면 100 거의 다 이 패턴)
  또한, 커서 가져다 대면 하위로 튀어나오는. → 95%가 이 pattern.
• 이 모든 것을 117강에서 실습.

111강. 튜토리얼 1~10

• 튜토리얼 10 만 다시 풀어보기.

1차 메뉴(ul태그) - 1차 메뉴 아이템(3개)
2차 메뉴(ul태그) - 2차 메뉴 아이템(2개, li 태그) - 2차 메뉴 아이템 텍스트(a태그)
3차 메뉴

• .menu-1 > ul > li > ul > li { display : none; } → 아예 숨긴다.
• .menu-1 > ul 은 1차 메뉴를 의미한다.
  .menu-1 > ul ul 은 ‘서브 메뉴’를 의미한다.

113강.

https://codepen.io/yoodongan/pen/WNMBMbp
→ 메뉴 구분 잘하는지 테스트