Our Story

기록하기

-- 주제에 맞는 짧은 헤드라인 -- 소제목(문제, 원인, 해결방법 )

파일을 불러오지 못한다

문제

background-image가 아무리 해도 화면에 로딩 되지 않는다. 혹시나 해서 background-color를 이용해 색상을 넣었는데 된다?! 속성은 적용이 되지만 왜 파일은 불러오지 않는 것일까? 도대체 뭐가 문제일까?

원인 및 해결

Network 패널에 들어가 해당 이미지 파일을 확인해보니 왜 로딩 되지 않았는지 알 수 있었다.

이미지를 보면 dist폴더에서 이미지를 불러 온다. 즉, Sass가 아닌 CSS 파일 기준으로 이미지를 탐색해야한다.

작업 파일과 컴파일 되는 파일의 이미지 경로가 같아야 한다.

grid에 고정값을 주면 생기는 이슈

문제

컴포넌트 Promotion의 마지막 자식요소는 "신규 회원..." 단락이다. 하지만 무슨일인지 padding-bottom값을 주었지만 마지막 요소부터 적용되는 것이 아니라 위의 이미지와 같은 오류가 생긴다.

원인

이유는 .Container의 마지막 열에 grid-template-rows고정값을 주었기 때문에 가변 되지 않았던 것이다.

.OurStory {
  .Container {
    display: grid;
    grid-template-rows: rem(122px) rem(68px) rem(175px);
  }
}

해결

해결 방법이 무엇일까? 바로! minmax() 함수를 사용하는 것이다. 이 함수를 사용하면 컨텐츠의 크기에 따라 가변 한다.

grid사용해서 반응형 웹을 만들 땐 해당 함수를 잘 이용하는 걸로~!

[MDN]Grid → minmax()

.OurStory {
  .Container {
    display: grid;
    grid-template-rows: rem(122px) rem(68px) minmax(rem(172px), auto);
  }
}

이런 오류를 겪고나니 고정값이라는 것이 참 유지보수가 힘들다는 것을 알았다. 고정값으로 작업을 하면 당장은 잘 구현되는 것 같지만 그게 아니다. 이제는 조금 더 시야를 넓게 보고 해당 속성을 사용했을 때 어떻게 구현 되는지 앞서 생각할 수 있어야겠다.

Promotion에 그리드는 안맞는다.

grid와 flex

grid를 사용해 보겠다고 온갖 콘텐츠에 적용하려고 했으나 그리드를 사용해야하는 상황과 아닌 상황을 구분하자. 일단은 공부하는 중이니 공부하는 마음으로 활용하기

먼저, 화면의 큰 레이아웃을 잡을 때는 grid가 간편하고 쉽다. 하지만 그 안에 작은 컨텐츠의 레이아웃은 flex로 하는 것이 더 좋을 듯하다. 격자 또는 블럭 식으로 되어있는 레이아웃에는 grid가 간편하다. 하지만 간단히 레이아웃을 잡을 거라면 flex를 사용하는 것이 더 알맞다.

왜냐하면 반응형 웹 페이지를 만들 때, 레이아웃이 가변하거나 위치가 변하는 경우를 생각해야 한다. 하지만 반응형까지 고려해서 컨텐츠의 행과 열의 수치를 각각 설정하는 것이 쉽지 않다.

또한 기존의 부모 요소에 그리드가 적용되어 있어서 간혹 자식 요소에 그리드를 설정할 때 부모요소의 그리드 행과 열 때문에 원하는 대로 위치 잡는 것이 힘들다.

[예시 - 1] emailContainer에 grid를 설정

[예시 - 2] 부모 요소인 OurStory에 설정된 grid를 제거 했을 때

[예시-1]은 emailContainer에 grid를 설정을 때 상황이다. 자식요소가 2개이기 때문에 컨텐츠의 개수에 맞춰 [예시-2]처럼 나올 줄 알았으나 아니었다.

[예시-2]는 [예시-1]의 문제를 확인하고 부모 요소인 OurStory에 설정된 grid를 제거 했을 때이다.

위에 설명한 대로 부모요소와 자식요소 모두에 grid를 설정 했을 때 이런 문제를 만날 수 있다.

(그래도 grid이용해서 테스트 한 것 코드 커밋 이라도 해둘걸... 저장해둔 코드가 없어서 설명이 힘들다.)

input → Sass 선택자 중첩 실수

문제

.emailContainer의<input>에 상태클래스를 적용할 때 Sass의 선택자 중첩을 잘못 사용하는 바람에 스타일링이 적용이 되지 않았다.

원인

상태 클래스를 중첩 할 때 각각 다른 상태일 땐 그에 맞게 따로 선택자를 입력해줘야 하지만 코드가 많아지고 2-3번 중첩되다 보니 헷갈렸다.

.emailContainer__block와 emailContainer__block--invalid는 각각 다른 상태이다. 하지만 위에서 보다시피 __block 안에 --invalid를 넣어줬다.

올바르지 않은 중첩 선택자 사용 예시

.emailContainer {
  &__block {
    input:focus + label,
    &__block--valid label,
    &__block--invalid label {
      top: 3px;
      left: 20px;
      font-size: rem(11px);
    }

    // 또는 

    [role='alert'] {
      display: none;
    }

    &__block--invalid [role='alert'] {
      display: block;
    }
  }
}

각각 다른 상태는 나타내는 클래스를 중첩할 때는 아래와 같이 따로 작성해야 한다.

올바른 중첩 선택자 사용 예시

.emailContainer {
  // emailContainer____block
  &__block {
    input:focus + label {
      top: 3px;
      left: 20px;
    }

    [role='alert'] {
      display: none;
    }
  }

  // emailContainer____block--valid (--nvalid)
  &__block--invalid [role='alert'] {
    display: block;
  }

  &__block--valid label,
  &__block--invalid label {
    top: 3px;
    left: 20px;
  }
}

form요소에 Grid는 안맞는다.

여기에도 grid를 사용해보려고 했다. 혹시나 했는데 역시나 잘 안된다.

문제

상태 클래스를 사용해서 아래의 이미지 처럼 <input>과 <button>의 위치가 나란히 위치하도록 만들고 싶었다. 하지만 grid를 사용해서는 이렇게 만드는 것이 쉽지 않았다.

내가 구현하려고 했던 모양 두 콘텐츠가 나란히 위치하도록 하고 싶었다.

모바일 버전에서 row 상태 클래스를 설정하지 않았을 때

row 상태 클래스를 설정했을 때

.emailContainer {
  display: grid;
  grid-template-columns: 1fr minmax(rem(121px), auto) 1fr;
  grid-template-rows: 1fr minmax(rem(34px), auto);

  &__block {
    grid-row: 1;
    grid-column: 1/-1;
  }

  button {
    grid-row: 2;
    grid-column: 2;
  }
}

.emailContainer--row {
  grid-template-columns: 1fr minmax(rem(131px), auto);
  grid-template-rows: 1fr;

  &__block--row {
    grid-column: 1/2;
  }

  button {
    grid-row: 1;
  }
}

flex 적용 시 button 모양 변형 이슈

문제

grid로 레이아웃 잡는 것을 실패하고 flex를 적용했을 때 버튼의 너비가 컨테이너의 크기만큼 커지는 현상이 발생했다.

[flex 적용 전]

[flex 적용 후]

해결

버튼에 margin 값을 주어 크기를 잡았다.

[button에 margin-left/ right: auto 설정]

button 높이 변형

문제

위와 같이 Desktop 버전에서 valid/invalid 상태일 때 button의 높이가 변한다.

해결

인접 형제 선택자를 사용해서 valid/invalid 상태일 때만 높이가 60px에 고정되도록 했다.

&__block--valid,
&__block--invalid {
  @include media('>=lg') {
    + button {
      height: rem(60px);
    }
  }
}

Button 정렬 바꾸기

input invalid 상태일 때, 버튼의 위치가 맞지 않는다.

문제

<input>이 :invalid 상태 일 때, 버튼의 위치가 <input>과 맞지 않는다.

원인

.emailContainer에 아이템의 위치를 정렬하기 위해 align-items: center이 설정되어 있었다. 하지만 <input>의 경고 메세지 때문에 .emailContainer의 높이가 바뀌었을 때, 아래와 같이 두 콘텐츠가 높이가 맞지 않는 현상아 나타났다.

invalid 상태 일 때, .emailContainer의 높이

해결

<button> 요소만 교차축 정렬 속성을 주었다. align-self: flex-start로 해결!