{0722 TIL;}

TIL / WIL 쓸 때 주의 사항

• 기간 목표를 설정하고 그게 맞게 진행되고 있는지 확인할 것.
• 감상 4 : 학습과 이해 4 : 개선사항 2
• 나의 생각의 흐름을 알고리즘화 하여 진행하고 기록할 것.

 

 

[회고]

-공대를 갔어야... 아니면 학원이라도...아 내가 지금 학원을 다니는거지....ㅎ...

-역시 개념 잡는 게 제일 어렵다. 확립이 안되니 새로운 걸 얹어도 흔들린다. 직접 손으로 한번 정리를 해봐야 어느정도 입력이 될텐데 그럴수 없으니 여러 강의를 들으며 개념부분을 회차를 늘리는 수밖에 없겠다. 지금 자바스크립트와 리액트 기초 강의들을 돌려가며 듣고있는데 꽤나 효과가 좋은 것 같다. 약간이나마 개념들이 자리잡는 것 같다. 이대로 기초가 짱짱하면 다른 부분들은 어느정도 얹어질 것 같다. 좀 더 빨리 여러번 들어야지

-변수 작성 시 사용되는 네이밍 컨벤션을 공부했다. 낙타랑 뱀이라니 파스칼은 헥토파스칼밖에 몰랐는데 새로 알게 되서 재밌었다.

- 중간중간 계속 이러저런 설치가 막히는 경우가 있는데 아주 갑갑하다 ㅎ

-새로운 팀이 나왔다. 주특기 첫 주차는 입문으로 거의 개인 공부가 될 것 같다.팀장분이 엄청 열정넘치는 분이시던데 으쌰으쌰하면 좋겠다.또 JS 공부를 꽤 해왔다는 분도 계셔서 이래저래 친분을 들여놓고 궁금한게 생기면 물어봐야겠다. 히히

 

 

[당일목표]

-토요일 CS 발표 준비

-리액트 기초강의 듣기

-네이밍 컨벤션 찾아보기

 

 

[배운내용]

-CSS 에서 display : flex; 의 의미를 알게 되었다.

위 이미지는 박스모델로 웹페이지의 구역<div> 영역의 구성을 보여준다.

이 중 가운데 하늘색 영역이 컨텐츠 박스이다.

display : flex; 는 컨텐츠가 갖고 있는 넓이 (예_글씨길이) 만큼의 넓이를 갖게 해준다.

단, 컨텐츠의 넓이가 지정되지 않을 경우(고정값이 아닌 경우) 자동으로 조절된다.

여러개의 컨텐츠 중 하나만 고정값을 갖고 있으면 

크기가 지정된 컨텐츠만 고정이고 나머지는 유동적으로 움직인다.

table, grid 도 유사한 내용이라고 한다.

 

+ 추가 

cursor : pointer;

마우스를 가져다 대면 손가락 모양으로 마우스가 변화한다.

 

+css 도 사칙연산이 가능하더라

크기 설정 시 고정값(10px)을 많이 줬는데

이럴 경우 이용자의 접속환경에 따라 다르게 보이게 되는 이슈가 발생한다고 한다.

이를 방지하기 위해

calc () 함수를 사용하여 특정환경에도 맞출 수 있도록 한다.

 

.button {
	width : calc ( 60%-20px )	// 부모 태그의 크기의 60%-20px 만큼 줄어들 수 있다.
}

다른 언어들은 계산 인수가 사용하는 단위를 맞춰줘야 한다는데 calc 는 그냥 써도 된다고 한다.

 

- DOM 의 개념에 대해 배웠다.

div 는 태그가 아니다! <> 이게 태그다! div , p, button 같은 것들은 태그 안에 들어가는 요소(Elements) 라고 한다.

 

DOM 이란 html 의 생성 구조를 말한다.

<p>
  Use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

P
├─ “Use:”
├─ SPAN
 |   └─ “Cascading”
├─ SPAN
 |   └─ “Style”
└─ SPAN
     └─ “Sheets”

 

이런 식으로 html의 Elements 들이 상-하위 구조를 갖고 있는 것을 DOM 의 트리(tree) 구조라고 한다.

이때 상-하위 구조를 부조-자식 관계 라고 한다.

 

 

DOM 트리에 접근하는 방법

document.getElementsById

변수의 id을 찾아서 접근한다.

 

document.getElementsByClassName

변수의 ClassName을  찾아서 접근한다.

 

document.getElementsByTahName

변수의 Tag명을 찾아서 접근한다.

 

+추가

.addEventListener ()  이벤트를 연결해주는 내장함수

 

+추가

document.createElement()

DOM에 요소Element 추가하기

//새 요소를 만든다.
const new_div = document.createElement("div");


//바로 눈에 보일 수 있게 style을 추가해본다.
new_div.style.backgrounsColor = "red";


//이제 설정된 요소를 body 안에 추가해준다.
document.body.appendChild(new_div);
=================================***

 

-

-

 

 

 

[느낀 ●]

-  이 강의를 저번 알고리즘때 들었어야 했는데... 그랬으면 오히려 개념은 좀 더 잡혔을 듯하다.

 

 

 

[개선할 ●]

- 정리할 list 와 할 일 list 가 점점 늘어나고 있다. 빨리 해치우자

- 예제를 따라할 때 자꾸 오타가 난다. 오타를 줄이는 방법을 찾아보던가 손코팅으로 정확한 작성을 위해 연습이 필요하다.

적당히 괜찮은 페이지 코드가 있으면 공부하면서 손으로 써보고 싶다. 웹 페이지들을 한번씩 까봐야 겠다.

예_애플 , 텐바이텐... >오 재밌어..

-

-

-