0711-Sass

John Doe Jul 11, 2018

오늘은

어제 아쉬운 점은 새벽에 조금 늦게 잔 점 +_+ -> sass 컴파일 안 시켜놓고 계속 삽질했다…. 디버깅 능력이 엄청 부족하다.
가장 큰 흐름 부터 좀 살펴보자 내가 제일 먼저 살펴봐야 될 것이 무엇인가?
이것들은 지켰나?
문법은 잘 맞나 -> 그다음으로 했어야 됬는데 그냥 막 이것 저것 해보다가 _=….
그리고 솔로몬이 어제 물어봤을 때도 단편적으로 메소드 내에서만 고쳐보려고 하니 별로 좋은 답이 안 나왔다.
만도 처럼 전체 흐름을 보고 짚어주어야 되는데 습관을 좀 잘 들이자. 큰 그림 부터 늘 신경 씁시다!!!

플래닝

기초강의를 위한 스터디

바보코딩
바보코딩 ~2:30까지 공부

bigO notation >= O를 곱해서 큰 것을 찾는 것
오메가 표기법 < 오메가 곱해서 작은 것 찾는 것
세타 표기법 = 같은 것 찾는 것 이였나?
간단하고 쉽긴 했지만 엥 무슨 의미지 이게 why? 이런 설명이 빠져 있어서 좀 많이 아쉬운 강의다. 고로 블로그 글이나/책을 통해서 다시 정리헤야겠다.
선택정렬

알고리즘에서 신경써야 되는 것
*WorstCase 주로 WorstCase에 초점을 더 맞춤 -> 이게 일어나서 데미지를 얻는 경우 심각한 상황을 초래할 수 있으므로 !!!
BestCase
근데 worstCase -BestCase 모두 같음 거의 다 정렬 되어 있으면 swap연산 정도를 덜 한다? 정도

… 끝

proGit 1장 ~3:30

프로깃 1장 읽고 정리하기 !!!

Body footer html css 제작
운동
유투브 안보고 자고 알람 맞추고 알람 듣고 바로 일어나기…
Express 인강 듣고 1시간 공부하기 (edited)

2. body 부분 제작

Body footer html css 제작

main
bestSeller
slider-banner*5
contact section
footer

… 할 게 어마무시하다…
html css잘하고 싶다…. 뭔가 알면 다 금방해치울 것 같은 건데 다 너무 오래걸린다 …
어줍잖게 일부 %로 적용했는데 … 오바한 것 같다 ;ㅁ; 괜히 움직이다 깨지는 것만 생겨버렸다. 반응형은 처음에 별로 생각하지 말자
오늘의 교훈 어줍잖게 적용하지 말자 !

2.1 image가운데만 꽉 차게 하는 것 찾아보기

유연한 이미지/미디어
컨테이너 요소의 폭에 맞춰 크기가 변경되는 이미지를 말한다.

.responsive-scale {
  width: 100%;
  height: auto;
}
.responsive-scale-bg {
  width: 100%;
  padding-bottom: 66.6666667%;
  background: url(/*이미지경로*/);
  background-size: cover;
}
재단이미지 : 컨테이너 요소의 폭에 맞춰 크기가 동적으로 잘려지는 이미지.

재단이미지 방법 1

.responsive-crop {
  width: 100%;
  height: 960px;
  background-image: url(/*이미지경로*/) center top;
  background-size: cover;
}
재단이미지 방법 2

.responsive-container {
  position: relative;
  height: 120px;
}
.responsive-{
  position: absolute;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translateX(-50%);
}
유연한 아이프레임

.responsive-container {
  position: relative;
  /* 4:3 = 75%,
     16:9 => 56.25%,
     21:9 = 42.857142857% */
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.responsive-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

사스 사용 좋은 점

좋다 !
& :last-of-type
사스 사용 좋은 점
아직까진 import랑 & 중첩 기능만 가끔 소소한 % placeholder쓰는데 좋다.
css분리 할 수 있다는 점이 소스관리 너무 용이하다 !!!

나쁜점은 가끔 컴파일이 늦게 적용되거나 안 되서 껐다가 켜야지 다시 적용될 때가 있다 ! 이거 말고는 아직 잘 …

5. Node.js ->웹개발 백엔드 강의 Express 인강

ETC

vsCode shellComand 설치 (cmd+shift+p -> 검색)
terminal에서 code .으로 바로 실행할 수 있다!

zsh 자동완성 플러그인 찾아봐서 적용하기 !!!