a태그를 텍스트 그대로 사용 하는 경우도 있지만,

마치 버튼처럼 만들어서 사용하는 경우가 굉장히 많다.

a태그를 이용해서 버튼처럼 활용하는 css를 공유해보려고 한다. 

	
  .aButton{  
  cursor: pointer;    
    text-decoration: none;
    
    border-radius: 8px;
    height: 50px;
    width: 130px;
    padding: 16px 32px;
    text-align: center;
    
    background: #6d6afe;
    color: #ffffff;
    font-weight: 600;
    font-size: 17px;
}

위 코드를 순서대로 설명하자면-

 cursor: pointer;    :  a태그의 경우엔 마우스를 대면 기본이 손 모양(pointer)으로 되니 생략해도 되지만, 마우스를 댔을 때 나타나는 마우스 포인터에 다양한 모양의 옵션을 설정할 수 있다. 

text-decoration: none; : a태그 특성상 링크라는 걸 언더바를 통해 보여주는데 이 옵션을 해야 아래 언더라인이 사라진다. 

border-radius : 테두리의 둥근정도를 의미한다. 혹시 직각을 원하면 생략해도 된다.

height, width : 버튼의 높이와 너비

padding : 이걸 사용해야 아래 위 정렬도 할 수 있다! 정확히는 정렬이라기보다 버튼 안에 실제 텍스트(컨텐츠)와 라인의 간격을 만들어줘서 가운데에 위치한 것처럼 효과를 내는 것이다. 

위 이미지는 차례대로 패딩을 위 코드처럼 준 경우, 16px로 하나로 통일, 상하만 16px, 좌우는 0으로 준 경우이다.

-> 정해진 버튼의 사이즈가 있거나 한개에만 적용하는 경우 버튼 사이즈만으로 크게 상관은 없지만, 여러군데 사용한다면 좌우 여백을 통일해주고, 버튼의 가로길이를 유동적으로 하는 것이 좋을 듯 하다. 

text-align : 텍스트를 가운데로 정렬해준다. (padding으로 어느정도 정렬은 되지만, 컨텐츠의 길이에 꼭 맞게 간격을 줄 수 없으니 가운데 정렬을 해준다. 

background : 버튼 배경의 컬러, color는 텍스트의 컬러이다. (그라데이션을 사용해도 예쁘다!☺️)

font-weight : 폰트의 두께 font-size는 폰트의 크기이다. 

자주 쓰는 기능이다보니 기억해두는 것이 좋다. 

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

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

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

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 값