결론부터 말하면, 나는 이걸 해결 못해서 다른 테마를 쓰기로 했다...

꼭 이걸 써야 한다! = 뒤로가기

다른것도 있나? = 끝까지 읽기!

git-bash-for-mac.sh 설치 중 오류가 발생되었다. 

WARNING: this script is deprecated, please see git-completion.zsh

앞에는 권한오류가 뜨기도 해서 설정을 바꿔주었는데, 

이번에는 이 오류다..

이 스크립트가 권장되지 않는다고 하는데,

macOSX가 최신 업댓에서 bash에서 zsh로 변경 되어서라고 한다.

brew를 설치해두었기에 그걸로 실행을 해보았다.(결과는 이걸로 한 건 아니다..)

brew install bash-completion

인스톨은 되었으나 크게 변한게 없어보인다...ㅠㅠ

그리고 터미널-설정에서 셀의 시동값을 변경 해야 하는데..

터미널 구동 시 자동으로 저 명령어가 실행되는 듯 한데, 

install 을 매번 하는 것도 아닌것 같고..

bash-completion도 안먹혀서 이건 아닌걸로..

(나중에 기회되면 이 방법은 다시 시도 해보자..ㅠㅠ)

Oh My Zsh

그러다 Oh My Zsh를 발견했다. 

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

그대로 입력해서 설치.

다시 터미널을 열었는데, 사용자 정보가 전혀 뜨지 않아서 1차 당황.

터미널 제목?에 터미널창에서 매번 앞쪽에 뜨던 사용자 정보가 뜨고, 

실제 터미널창에는 생략되어 깔끔한 느낌이다!

그래서 현재 폴더를 테스트(pwd) 해보았더니 잘 뜬다.

그 외에도 다양하게해보았는데, 확실히 색이 있어서 편하긴 한 듯.

다른 테마도 더 찾아봐야겠다. 

display : grid; 를 먼저 사용한 뒤 아래 속성들을 추가로 부여할 수 있다. 

격자 나누기 - grid-template-rows(columns)

간격 - gap

크기 미리 정하기 - grid-auto-rows(columns) 

원하는 위치에, 여러 칸에 걸쳐서 배치 - grid-row(column), span

이름으로 배치 - grid-area, grid-template-areas

격자 나누기 

grid-template-rows : 100px 200px 300px 

-> 첫번째, 두번째, 세번째 각각의 너비를 설정

grid-template-columns : 100px 200px 300px

-> 첫번째, 두번째, 세번째 각각의 높이를 설정

grid-template : rows와 columns를 한 번에 쓸 수 있다.

-> grid-template : 100px 200px 300px  / 100px 200px 300px;

     - 너비들 / 높이들 

- px대신 fr을 사용하면 비율로 배치 할 수 있다. ( 1fr 1fr 2fr 같은 식)

- grid-template: 1fr 1fr 1fr /  minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr) ;

  -> minmax()를 통해 최소, 최대값 지정이 가능하고, 최대값만 1fr같은 비율 설정이 가능하다. 

- grid-template: 1fr 1fr 1fr /  repeat(6, 1fr);

  -> repeat을 통해 1fr사이즈 6개로 만들어줌

grid-template: repeat(3, minmax(200px,1fr)) / repeat(3, minmax(200px,1fr));

-> 위의 경우 가로세로 3번 반복하면서 최소 200px, 최대 비율 1:1:1 로 그려준다. 

간격넣기

gap : 16px; 과 같이 그리드 사이의 간격을 넣을 수 있다.

-> gap : 16px 32px; 로 하면 세로에 16, 가로에 32px의 간격이 생기는 식이다.  

크기 미리 정하기

- grid-template-rows(columns) 로 열이나 행의 크기만 설정 하고, 나머지 값은 설정값으로 부여 할 수 있다.

display: grid;
grid-template-columns: repeat(3, 1fr) ;
grid-auto-rows: 100px 150px 200px;

- 내부 컨텐츠가 15개라 가정시, 가로는 1 : 1 : 1의 비율로 3칸, 세로는 오토로 설정한 만큼 번갈아가며 설정된다.

만약, 값을 하나만 넣으면 해당 세로값으로만 일정하게 보여진다. 

원하는 위치에, 여러 칸에 걸쳐서 배치 

- grid-row(column), span

위치는 그리드 라인기준으로, 첫번째 세로 라인이1 끝이 6, 첫번째 가로 라인은 1, 끝은 5이렇게 보면 된다. 반대쪽은 아래쪽 꼭지점부터 -1로 계산해서 올라간다.

옆에 청록색 네모의 경우 

grid-row: 3 / 5;

grid-colum: 2 / -2;

이렇게 시작과 끝 라인번호를 적어줘도 되고, 

grid-row: 3 / span 2;

grid-colum: 2 / span 3;

이렇게 시작 라인번호부터 몇칸을 차지할지도 설정이 가능하다.

라인번호는 2와 -5 가 같은 곳을 의미한다.  위에서부터의 양수나 아래에서부터의 음수 모두 사용 가능하다.

예를들어 

grid-row: 3 / 5; -> grid-row: -3 / -1; 이렇게 동일하고

grid-colum: 2 / 6; -> grid-colum: -5 / -1; 이렇게 동일하다.  

이름으로 배치 

grid-area로 이름을 부여한 뒤 grid-template-areas로 이름의 값이 어디로 들어갈 지 설정한다.

- 간단한 배치의 경우 편리함.

grid-area : RED;  <- 이름에 쌍따옴표 없이!

grid-template-areas : "RED GREEN" "RED BLUE"; 

grid-area : RED;  ... 

grid-template-areas : ". GREEN" "RED BLUE"; 

-> 점으로 설정시 해당 칸은 비움.

배치할 방향 : flex-direction 

정렬하기 : justify-content, align-items 

요소가 넘칠 때 : flex-wrap 

요소 간격 : gap 

크기 늘이거나 줄이기 : flex-grow, flex-shrink, flex-basis, flex-direction 

display : flex - 요소가 세로로 정렬 (따로 적어주지 않아도 flex-direction : row 가 default로 적용) 

- flex-direction : column - 위에서 아래로 정렬. 보이기로는 같아 보이나 일반 디스플레이 블록과 차이가 있다. 

- flex-direction : row-reverse - 오른쪽에서부터 왼쪽으로 세로정렬 

- flex-direction : column-reverse - 아래쪽에서부터 위로 정렬

요소가 넘칠 때

flex-wrap: wrap - 넘어가는 요소를 다음 라인으로 넘길 수 있음. flex-direction에 따라 방향이 달라짐

간격

gap : 10px 20px; - 교차축과는 상관 없이 세로, 가로 간격을 뜻함

요소를 꽉 채우기

flex-grow : 요소를 늘릴 때. 기본값은 0이고, 상대비교를 통해 높은 숫자일수록 많이 늘어남

-> 요소를 늘릴 때 주로 사용.flex-grow:2;

flex-shrink : 요소를 줄일 때. 기본값은 1이고, 상대비교를 통해 높은 숫자일수록 많이 줄어듦

-> 요소를 원하는 대로 고정하고 싶을 때 0값을 주어 사용.

flex-basis 속성

flex-basis : 기본 축의 방향이 가로방향이면 width를, 세로 방향이면 height를 참고해서 시작 크기를 정함

flex: 1 0 100px; 순서대로 flex-grow, flex-shrink, flex-basis 값

position속성

default = static : 따로 설정하지 않아도 원래 있어야 하는 곳에 있음.

relative :  기본 위치에서 상대적위치로 변경. 단, 원래 있던 공간은 그대로 차지한 채 배치

 -> margin이랑 다른 점. 마진은 해당 기준에 맞춰 주변 요소들도 이동이 되는데, relative는 해당 속성에 해당 되는 부분만 이동 된다는 것

absolute : 가장 가까운 조상의 포지셔닝(static이 아닌 경우)을 기준으로 배치. 원래 자리는 차지하지 않은채 배치.

fixed : 브라우저 화면 기준으로 고정. 원래 자리는 차지 하지 않은 채 배치. 

-> 네비게이션을 만들 거나 할 때 사용하고, 고정이 됨으로 인해 겹치는 부분은 마진을 주어 보이도록 배치해줘야 함

sticy : 원래 자리에 배치. 정해진 위치에 스크롤 되면 그때부터 고정됨. 

-> 부모요소에 소속됨. 부모요소가 사라지면 사라지기 때문에 스크롤을 하며 떠있다가 부모요소를 지나치면서 사라지게 할 수 있음. 

z-index : 앞뒤 순서를 정함. 기본값은 0이며, 값이 높을 수록 앞쪽에 보여지게 되고, 동일한 뎁스일 경우 나중에 쓰인 게 앞으로 보여짐. (예를들어 같은 부모의 자식일 경우 그 자식들끼리 값을 비교.

쌓임 맥락에 따라 달라지는데, 맥락의 조건은 다양하기 때문에 MDN문서의 쌓임 맥락 페이지를 참고 하는 것도 좋음. 만약 원하는 대로 동작이 어렵다면, 부모요소를 하나 더 만들어서 옮기는 편이 좋음. 

position의 위치 지정

top, right, bottom, left  : 해당위치의 값만큼 이동

-> 예를들어 top에 30px을 준 경우 top에서부터 30px에 위치하도록 이동

inset : top~left 네 방향의 값이 동일할때 사용. inset : 30px과 같이 값 하나로 모두 설정 할 수 있음