10주차 일요일 - Flex 복습, 과제 리팩토링

10주차 일요일 - Flex 복습, 과제 리팩토링

1. 배운 것

• flex 복습
• linear-gradient
• 과제 css 구현

2. 내용 정리

CSS/ Flex

• 부모 안의 자식 요소들을 flex 레이아웃으로 정렬하려면 부모에게 display: flex 사용.
  • 이 때 부모 요소의 높이(height)가 지정되어 있는 경우 기본값은 자식들의 높이도 부모의 높이만큼을 가진다. → align-items의 기본값.

CSS/ Flex - Axis, flex-direction

Flex 정렬 시 2가지의 축을 기준으로 위치를 정렬한다.

• main axis (메인축) : 아이템이 배치된 방향의 축.
• cross axis (교차축) : 메인축과 수직을 이루는 축.

Flex 속성은 Container에 적용하는 Container 속성과 item에 적용하는 item 속성으로 구분할 수 있다.

Container 속성

• 부모 요소에 적용시키는 flexbox 속성들
  • 정렬 방향: flex-direction
  • 줄바꿈: flex-wrap
  • main축 기준: justify-content
  • cross-axis 기준: align-items, align-content

1. flex-direction: 정렬 방향 지정
2. justify-content: main축 방향 정렬 속성
   1. flex-start(기본값): main축 시작점 쪽으로 정렬
   2. flex-end: main축 끝점 쪽으로 정렬
   3. space-around : 각 요소의 **‘둘레’**에 좌우 동일한 여백 적용
   4. space-between : 양 끝 요소는 여백 없이 양 끝으로 붙고 **‘사이’**의 요소들만 여백을 갖음
   5. space-evenly : 모든 요소가 양 끝과 요소 사이간에 같은 여백을 갖음
   6. flex-wrap: 자식 요소 크기가 부모를 넘어갈 경우 줄바꿈 여부 지정하는 속성
   7. flex-flow: flex-direction 과 flex-wrap을 한번에 지정 가능한 단축속성(ex: row wrap;)
3. align-items: cross-axis 방향 정렬 속성
   1. stretch(기본값) : cross-axis 방향으로 끝까지 쭉 늘어남
   2. flex-start : cross-axis 방향의 시작점에서부터 정렬
   3. flex-end : cross-axis 방향의 끝점에서부터 정렬
   4. center : cross-axis방향의 중앙에 정렬
   5. baseline : 텍스트 기준선(ex: 줄 있는 공책의 줄)에 정렬
   6. 주의점: 요소간 여백 관련 space- 속성들은 align-items에선 사용 불가
4. align-content: cross-axis 방향 여러 행 정렬(flex-wrap: wrap; 시 적용됨)wrap 상태에서 align-content가 미적용 된 상태에선 여러 요소들이 줄바꿈 된 횟수만큼 cross-axis가 여러 줄이 됨.우선 align-items 적용 후 의도대로 안 된 경우 align-content도 적용하여 조정해보자.
5. 이 때 align-content에서 정렬 속성 지정을 해 줄 경우 전체 flexbox 영역을 기준으로 cross-axis가 하나로 나타남!
6. 주의점:

Item 속성

flex item에 적용하는 속성:

1. flex-basis : flex item의 기본 크기 설정
2. flex-grow : flex-basis보다 커질수 있는지를 결정
3. flex-shrink : flex-basis보다 작아질 수 있는지를 결정
4. flex: 축약형 속성으로 위 세가지를 한번에 지정 가능함.

배경 그라디언트 주기 - 토글버튼 배경

linear-gradient: 선형으로 균일하게 그라디언트 적용

방향(or 각도), 시작 색상, 종료 색상 세가지를 인수로 넣는다.

.toggle--checked {
      background: linear-gradient(to right, skyblue, blue);
    }

과제 리팩토링

Modal Component CSS 구현

코드 자체는 정중앙으로 모달 오픈 버튼이 오도록 한 거 같은데 뭔가 레이아웃이 안맞다.

모달뷰 css 코드도 뭔가 어거지로 끼워맞췄다.

export const ModalContainer = styled.div`
  // TODO : Modal을 구현하는데 전체적으로 필요한 CSS를 구현합니다.
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
`;

export const ModalBackdrop = styled.div`
  // TODO : Modal이 떴을 때의 배경을 깔아주는 CSS를 구현합니다.
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
`;

export const ModalBtn = styled.button`
  background-color: #4000c7;
  text-decoration: none;
  border: none;
  padding: 20px;
  color: white;
  border-radius: 30px;
  cursor: grab;
`;

export const ModalView = styled.div.attrs(props => ({
  // attrs 메소드를 이용해서 아래와 같이 div 엘리먼트에 속성을 추가할 수 있습니다.
  // * 모달창에서 attrs 메서드 사용하는 이유: 스크린 리더 상에서 태그 설명 등 웹 접근성
  role: 'dialog', // dialog -> 모달창임을 나타내는 role
}))`
  // TODO : Modal창 CSS를 구현합니다.
  position: relative; // 추가
  width: 130px; // 추가
  height: 100px; // 추가
  background-color: #fff; // 추가
  text-align: center; // 추가
  border-radius: 7px; // 추가
  font-size: 14px; // 추가

  > .closingBtn {
    position: absolute; // 추가
    top: 1px; // 추가
    right: 1px; // 추가
    border: none; // 추가
    background-color: transparent; // 추가
    cursor: pointer; // 추가
  }
`;

Toggle Component CSS 구현

transition 주고 싶었는데 시간상 생략.

const ToggleContainer = styled.div`
  position: relative;
  margin-top: 8rem;
  left: 47%;
  cursor: pointer;

  > .toggle-container {
    width: 50px;
    height: 24px;
    border-radius: 30px;
    background-color: #8b8b8b;
    // TODO : .toggle--checked 클래스가 활성화 되었을 경우의 CSS를 구현합니다.

    &.toggle--checked {
      background: linear-gradient(to right, skyblue, blue);
    }
  }

  > .toggle-circle {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #ffffff;
    // TODO : .toggle--checked 클래스가 활성화 되었을 경우의 CSS를 구현합니다.
    &.toggle--checked {
      left: 27px;
    }
  }
`;

const Desc = styled.div`
  // TODO : 설명 부분의 CSS를 구현합니다.
  margin-left: 20px;

  &.toggle-on {
    color: blueviolet;
  }
  &.toggle-off {
    color: red;
  }
`;

export const Toggle = () => {
  const [isOn, setisOn] = useState(false);

  const toggleHandler = () => {
    // TODO : isOn의 상태를 변경하는 메소드를 구현합니다.
    setisOn(!isOn);
  };

Tab Component CSS 구현

const TabMenu = styled.ul`
  background-color: #dcdcdc;
  color: rgba(73, 73, 73, 0.5);
  font-weight: bold;
  display: flex;
  flex-direction: row;
  justify-items: center;
  justify-content: space-between; // 추가
  align-items: center;
  list-style: none;
  margin-bottom: 7rem;

  .submenu {
    ${'' /* 기본 Tabmenu 에 대한 CSS를 구현합니다. */}
    cursor: pointer; // 추가
    flex-grow: 1; // 추가
    text-align: center; 추가
  }

  .focused {
    ${'' /* 선택된 Tabmenu 에만 적용되는 CSS를 구현합니다.  */}
    background-color: blue;
    color: #fff;
    
  }

  & div.desc {
    text-align: center;
  }
`;

const Desc = styled.div`
  text-align: center;
`;

참고 자료

• 개발자 이도해 - 13가지 예제로 배우는 CSS Flex & Grid 핵심 기능 https://www.inflearn.com/course/플렉스-그리드-예제/dashboard

3. 리뷰

3.1 좋았던 점

• 일년만에 고향친구와 만났다.

3.2 아쉬웠던 점

• 토요일과 일요일 오전타임 시간낭비

3.3 notes

개발 공부도 결과를 내야한다는 압박감과 시간에 대한 걱정이 없다면 너무나 즐겁게 할 수 있을 텐데 어릴때 시간 많을때 그림 대신 컴퓨터를 접했더라면 어땠을까라는 안타까움이 많이 든다. 리액트든 알고리즘이든 이것도 천천히 단계를 밟아나가며 정말 즐기면서 배워왔다면 참 좋았을 텐데. 뭐 어쩌겠어 이미 지나간 시간들인걸~~.