## 1. vibrance saturation temperature
## 생동, 채도, 온도라고 한다. 
## 느낌을 얘기하자면 vibrance는 뚜렷함. saturation은 색의 단계,흑백. temperature는 분위기다. 

## 2. blend 모드
## overlay 그림에만. multiply 전체에다. 

## 3. cutoff 
## 누끼따기라고 알려져있는데 그보다 많은 의미를 포함한다. 하지만 대부분 잘라내서 가져오는게 편하니까.
## remove.bg 사이트에서 편하게 쓸 수 있다. 

## 4. shortcut
## 단축키는 정말 일을 쉽게 만들어준다.
## m - 원인지 네모인지는 마우스로 왼쪽위에서 선택.
## l - 직접 그려서 선택하는 lasso.
## w - 매직 wand. ai 없어서 별로 안좋다. free는.
## f - fill 채우기.
## g - gradient 선형으로 색 변하게 채우기.
## v - 다른 작업 멈추고 잡을 수 있게 하는것.
## o,r - 색깔 조절.
## space - 마우스 드래그(확대)와 스페이스바 누르면서 마우스 움직이면 미세한 작업 가능.

## 5. blend mode
## 포토샵이나 대부분의 desing tool은 layer개념이 있다. layer를 쌓아서 만든다는 뜻인데.
## 보통은 opacity(투명도)를 통해 전,후 layer를 조절한다면 blend는 수학적 특징이 들어간다.
## '혼합하다'라는 기능은 앞의 색에 대해서 곱하거나 overlay하거나 lighter하는 것이다.
## https://seokblog.tistory.com/89 느낌만 알라는 사이트다. 
## 중요한 것은 자연스럽게 되는 것이다. 이것저것 눌러보며 특정 상황에서의 감을 익히는 것 같다. 
## pixlr의 blend는 layer를 오른쪽마우스누르고 확인한다.

## pivot ? stack ? pivot_table ?
## 여러 열로 이루어진 데이터를 pivot 하고 싶다면 tableau 에서는 pivot이라고 얘기한다. 
## pivot이 맞는 얘기지만, 이상한건 python에서 말하는 pivot이랑은 결이 다르다. 
## 그래서 stack이 있다. 열로 값들이 나누어져있다면 stack을 통해 열을 줄이고,
## unstack을 통해 할 수 있지만, 단순히 dataframe.pivot을 통해 할 수 있다. 
## 여기서 또 헷갈릴 수 있는게 python에는 pd.pivot_table이 있고, dataframe.pivot 이 있다.
## 그런데 헷갈릴 필요없다. pd.pivot_table은 data를 지정해줘야하는것. 
## dataframe.pivot은 data를 지정할 필요없다는것. data가 dataframe이니까.
## 마지막으로 index, columns, values.를 입력해주면 된다. index,columns는 필드값(범주형) values는(수치형).

.. snip

## stack : column이 많고 값들을 압축할 때. 
## level의 개념이 있는데 이건 index와 같이 이해해야한다. 
## 짧게 설명하자면 index로 안된것부터 level0이다. 
## 그래서 밑에서도 set_index를 통해 'name' 필드를 해준것이다. 
## 이건 참고 링크가 더 편할 수 있다. 
## https://pandas.pydata.org/docs/user_guide/reshaping.html
stacked_data=data.set_index('name').stack().reset_index()

## pivot : stack의 반대.
data=stacked_data.pivot(index='name',columns='dimension',values='values')

## pivot_table : pivot과 같은 역할. 다만, data를 지정해줘야한다.

pd.pivot_table(data=stacked_data,index='name','columns='dimension',values='values',aggfunc='your mind')
.. endsnip

## tableau 중간 맞추기
style='position: absolute;left:-12.5%;width:100%;height:100%;'

left 10% 기준은 dashboard를 1000 800으로 만들었고, 지금 감싸는 div의 width가 800이라 100이 되기 위해서
12.5%.

## 1. json
## load vs loads , dump vs dumps
## load는 파일을 load dump는 file을 dump
## loads는 string을 load, dumps는 string을 dump
## 즉, 뒤에 s는 str이라고 외우면 편하다. 
## 그래서 json.loads(object)에서 object의 type은 string. json.dumps(object)에서 object는 dictionary같은. object라는 면에서 같다.
## json.load(filename)에서는 filename이 추가된다. json.dump(object,filename)도 같다.

with open('/content/song.json','r') as f:
    ## loads
    obj=f.read()
    df=json.loads(obj)
    ## load
    df=json.load(f)

with open('network.json','w') as f:
    ## dumps
    json.dumps()
    ## dump
    json.dump(covid,f)

## 1. reset.css
## https://meyerweb.com/eric/tools/css/reset/ 최초의 모든 요소들의 초기값을 설정해주는 값들.
## 처음부터 시작하기에는 이것을 시작하고 하는 것이 좋다.
## 또한, 우선순위 적용은 css에도 규칙이 있지만, 보통 먼저 불러오면 나중에 불러온것에 묻히긴 한다.
## 무슨 뜻이냐면 reset.css를 불러오고 그 다음에 style.css를 만들어서 적용하면 reset.css 먼저 적용되고 style.css가 적용되지만 안되는 경우도 있다. 예를 들어, 폰트 * 는 직접 한것보다 안되는 경우가 있다. 

## 2. flex 
## 최근 유행하는 단어인 flex. 돈을 펑펑쓰는 flex가 아니라, 유연하다 라는 뜻의 css 속성이다. 
## flex를 사용하면 특히 반응형 웹 디자인을 만들 때 용이하다. 
## display: flex; 속성으로 정의할 수 있고, 그 후 flex-direction 등 flex를 조절 할 수 있다. 
## flex tip 첫번째. justify-content 와 align-items.
## 조건이 있다. flex-direction=column 일때. 즉, 열방향. 위에서 아래로 갈 때 중심축이 위아래를 잇는 것이 축이므로 justify-content=center는 위아래공간을 남기고 일정하게 한다. 여기서 align-items는 중심축에 수직방향으로 정렬한다.
## 반대로. flex-direction=row일때. 행방향. 좌에서 우로. 중심축이 justify-content. 그에대한 수직축이 align-itmes.
## flex tip 두번째. text 정렬.
## text center가 안먹히는 경우가 있다. 이유 못찾았다. 보통 text-align=center 주면 잘 된다.
## 하지만, 안될 때. line-height을 이용한다. 
## 그리고 여기서 em, rem, px의 차이. 
## em과 rem은 모두 참조의 성격을 띈다. 주로 폰트 혹은 크기에 대해서 사용하니까 주의해야한다.
## em은 자기 자신에 대해서. 즉, 미리 font-size 등을 정의해야 그에대한 percent로 접근이 가능하다.
## rem은 html 기준. 즉, rem을 많이 사용하면 좋다. html의 font-size가 10px이면 2rem은 20px
## px은 절대적인 수치.

## 마지막으로 inherit.
## 상속의 의미를 잘 알아야한다. f12 개발자 도구를 통해 local에서 개발을 한다면 어떨 때 상속이 안될 수 있는지 파악해두면 좋다.
## inherit은 특정 element를 포함한 또 다른 element의 속성들을 상속받는다. 
## 상위 element가 width=100% 이라면, 하위 width=100%를 상속받는다.
## 다만, 상속 못받는 element가 있으니 주의할 것.

## 처음 browser를 통해 page가 load되면 browser가 dom을 생성한다. 
## dom이란 document object model로 쉽게 말해 page를 구성하는 모든 것. 이다.
## script는 body나 head 어디에도 들어갈 수 있다. 

## 이 코드는 마우스를 올렸을 때와 안올렸을 때의 글자 변화를 보여준다.

Mouse Over Me

## segment vs filter
## filter가 적용되면 그 후부터 데이터가 특정 filter에 맞춰 정제된다.
## 그래서 filter를 'view(보기)'에 거는것이다.
## segment는 filter와 달리 데이터를 '바꾸지 않고' 보여준다. 

## python으로 간단하게 설명하면 변수를 설정하여 보면 filter 
## 변수로 설정하지 않고 일단 보려고 print하면 segment다. 

## source/medium
## 소스/매체라고도 하고, 쉽게 말해 '어디서 어떻게 왔냐'이다.
## 즉, 소스는 '어디서' . 매체는 '어떻게' 다. 
## Organic은 검색엔진을 통한 유입
## Direct는 도메인 - 주소창에 직접입력을 통해 오는것. 
## Social은 sns를 통해 오는것.
## Referral은 그 외 다른 도메인을 통해 오는것. - 홈페이지 내 버튼이라던가, 다른 사이트에서 걸어놓은 링크를 통해 왔다던가 그렇다.
## 예를 들면, 네이버 광고를 보고 왔다. 그러면 소스는 네이버, 매체는 광고다. 

## 그런데 direct/none은 무엇인가.
## 구글 애널리틱스에서 비정상으로 들어온 유입 - 추적하지 못하는 유입을 모두 direct/none으로 한다.
## 그래서 구글 애널리틱스가 잘 이해하도록 링크에 utm parameter를 붙여주면 된다.
## 간혹 광고버튼 조그만한거 눌렀을 때 www.blahblah.com?utm_source=어쩌구&utm_medium=저쩌구.. 하는 링크를 봤을 것이다.
## utm_source,utm_medium,utm_campaign 는 필수 값이고, utm_term, utm_content는 선택값이다.
## 관련 설명은 https://support.google.com/analytics/answer/1033863?hl=ko#zippy=%2C%EC%9D%B4-%EB%8F%84%EC%9B%80%EB%A7%90%EC%97%90-%EB%82%98%EC%99%80-%EC%9E%88%EB%8A%94-%EB%82%B4%EC%9A%A9%EC%9D%80-%EB%8B%A4%EC%9D%8C%EA%B3%BC-%EA%B0%99%EC%8A%B5%EB%8B%88%EB%8B%A4 로 가면 된다.
## 좀 더 자세한 설명은 https://content.v.kakao.com/v/591d0d27ed94d200019549e0를 참고한다. 

## referral?
## referral은 추천 즉, 한 웹사이트에서 다른 웹사이트로 가는 트래픽 이다.
## 즉, 외부에서 우리사이트로 온 트래픽이다.
## 그래서 direct가 아닌이상 다 referral이라고 할 수 있다. 
## 대신, 정확히 '어디서 어떻게 왔는지'가 궁금해서 utm parameter도 붙이고 그러는 것이다.
## 예를 들면
## 1. 도메인에서 직접 A사이트를 간다. 
## 2. A사이트 속 content의 link를 클릭하여 B사이트로 간다.
## 3. 여기서 A기준 referral은 direct다. 도메인에서 직접왔으니까. 
## 4. B기준 refferral은 A사이트다.

## page path vs page url
## url은 절대경로 즉, www.blahblah.com/post/20210930.html.
## path는 상대경로 즉, /post/20210930.html
## hostname은 앞. 즉, www.blahblah.com/

## dimension & metric
## dimension 차원 metric 척도. 즉, dimension이 기준. metric이 측정값
## 즉, flat table에서 좌측 행으로 그룹지어져 있는 곳이 dimension. 행과 열에 대해서가 metric.

## gtm(google tag manager) debug traffic
## gtm을 하다보면 debug 할 때 traffic도 잡힌다. 즉, ga data를 어지럽히는것이다. 
## 이를 방지하기 위해 raw, test, real view를 나눠서 보는것이고.
## test view에 filter를 걸어 읽지 않도록 할 수 있다. 
## 위에서 말했다시피 filter는 변수에 저장해서 뒤까지 영향을 미치고.
## segment는 변수로 저장을 안해서 저장이 안된다고 했다. 조건이다.

## ga, gtm conflict
## 옛날 ga javascript를 쓸 때를 제외하고, 이제 gtag로 새롭게 바뀌어 그 코드를 head밑에 넣으라고 한다.
## 그런데 gtm에서도 ga configuration을 할 수 있으니 어떤 걸로 해야할지 헷갈릴 수 있다. 
## 만약 홈페이지에 ga 코드를 삽입했다면, gtm에서는 할 필요가 없다. 

## tag sequence
## 구글 태그매니저는 코드 하나만 넣는다.
## 그러면 태그매니저를 통해 다른 태그들을 실행시키는 것인데 이들의 순서는 어떻게 정해야하는것이 궁금한 것이다.
## 정답은 순서가 없다고 한다. 우선순위도 0으로 기본값이 되어있다.
## sequence를 사용할 때 유의할 점은 기준 태그를 잘 잡아야 한다.
## 예를 들어, 전환 태그(특정 사이트의 링크가 트리거인 전환을 기록하는)와 공통 태그가 있다. 
## 공통태그는 전환태그 다음에 실행이 되도록 tag sequence를 맞춰야하는데
## 만약 공통태그에 태그 시퀀싱 걸어놓는다면 전환이 아닐때에도 태그가 실행이 될 수 있다. 
## 그러니까 공통일 때는 공통만 하고, 전환일 때는 전환 공통이 일어나야하는데 
## 공통을 기준태그로 해버리면 안된다는 뜻이다. 기준태그는 전환으로 하고 거기서 tag sequence를 공통을 앞으로 놓거나 하면 된다. 

## 페이스북 광고 순서
## 참여 -> 트래픽 -> 트래픽&도달 -> 전환&도달
## 광고비 순서
## 도달 < 트래픽 < 참여 < 전환 
## 눈에 띄는 점은 참여와 도달이 바뀐것 처럼 보인다. 
## 보통 상점을 대상으로 광고를 하기 때문에 본인처럼 블로그 컨텐츠를 홍보하려면 트래픽 혹은 도달.
## 전환은 페이지 전환 등 이벤트 위주로 해도 좋을 것 같다.