Our Story

먼저 ourStory의 각 <p>요소를 스타일링 하기 전에 일관성을 위해각 margin-bottom은 0으로 하고 margin-top에만 값을 주는 것으로 정한다.

ourStory__headline

  • 고민하기 디자인 시안에 보면 영화, TV 프로그램을<br />무제한으로.의 형태로 줄바뀜이 되어있다. 어떻게 설계해 줘야 할까? (최선의 방법을 찾아서...)

    • html마크업에 <br /> 요소를 추가한다. 스크린 리더 사용자에게 좋지 않은 사용자 경험을 제공한다. 스크린 리더가 <br /> 요소를 읽어 줄 때 "영화, TV 프로그램을" 하고서 한참 위에 "무제한으로."라고 읽어 주기 때문에 사용자가 내용을 파악하기에 어려운 점이 있다.

    • 각 줄 마다 <span>요소로 감싸준다. <span>영화, TV 프로그램을</span><span>무제한으로.</span> 이렇게 마크업하고서 display: block을 사용해서 스타일링하는 방법이 있다. 하지만 의미가 없는 구조이기 때문에 딱히... 맘에 들지는 않음...

    • width값을 주어 원하는 모양이 나오도록 하기 모바일 고정 display라면 상관 없겠지만 나중에 데스크탑 버전 또한 만들어야 하기 때문에 올바른 방법은 아니다. 또한 사용자가 글자의 크기를 변경 했을 때 글자가 아래로 무너지는 형태가 되는 것도 고려해야 한다.

    • padding값을 주기 데스크탑 버전으로 바꿨을 때 한 줄로 변한다.

    • 🎯 결정한 최선의 방법! <br />을 사용하고 role="text"를 사용한다. 이 방법을 사용하면 role="text"가 한 문장임을 인식하고 끊어 읽지 않고 자연스럽게 읽어 준다.

ourStory__description

  • 놓친 부분

    • 디자인 시안에서 text-shadow 잊지 말고 확인하기 매몰차게 무시하고 있었음...🥺

  • 고민하기 ourStory__headline과 마찬가지로 줄바뀜이 되어있다. 하지만 좀 더 고려해야 할 점은 데스크탑 버전에서 한 줄로 바뀐다. 그래서 위의 단락과 마찬가지로 <br />를 사용한다면 유지보수 관점에서 볼 때 옳은 방법은 아니다.

    • width 값을 사용한다면 font-size를 2rem으로 조금 키우기만해도 글자가 아래로 무너진다. 이때 글자 크기를 키울 때 transform: scalc()을 사용해주면 아래로 무너지지 않고 글자의 크기만 커지고 작아진다. 그래서 미디어쿼리를 이용해서 데스크탑 버전에서 글자의 크기를 키우는 방향으로 하자. 이 방법도 문제가 하나 있다면 위의 단락과의 마진 간격에 영향을 준다는 것! 그래도 글자가 아래로 무너지는 것보다는 나은 방법이니 width 값을 주고 transform을 사용하는 것으로 선택!

.ourStory__description {
  width: 20rem;
  transform: scalc(1.5)
}
.ourStory__description {
  text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.55);
}

ourStory__emailRegistration

데스크탑 버전에서도 똑같이 줄바꿈이 되어있기 떄문에 <br /> 사용한다.

Background Image

  • 고민하기

    • 배경이미지를 어떻게 헤더영역에도 보이게 할까? 많이 고민 했던 부분이다. 배경이미지가 <main>의 ourStory뿐만아니라 <head>까지 포함해서 배경으로 적용되있다는 것이다. 처음엔 컨테이너로 묶을 생각을 했지만 ourStory는 <main>의 자식요소 이기때문에 말도 안되는 소리였다.

      • 해결! 헤더에 p:f를 적용하고 컨텐츠를 부유하게 만들어서 ourStory에 적용한 배경이미지가 헤더의 공간에도 보이도록 만드는 방법이 있다. 와우~!😝

    • 배경이미지를 반투명하게 하는 방법은? 배경이미지가 반투명하게 음영처리가 되어있다. 이것을 딤(dim)/딤드(dimmed)라고 한다. 왜냐하면 딤처리가 되어있지 않은 일반 배경이미지에 흰색 글씨는 한 눈에 알아보기 쉽지 않기 때문이다.

      • 디자인 시안에 보면 linear-gradient속성을 이미지 커버에 적용한 것을 확인 할 수 있다. 해당 코드를 inspect에서 확인해서 가져오도록 한다. (여기서 중요한 것은 해당 디자인에 적용한 효과를 어떻게 찾아내고 어디서 코드를 가져오는지 과정을 기억해야 한다.)

    • background 속기형으로 입력하기

      1. background와 background-size 따로 입력하기

      2. background에 모두 입력하기 커버와 이미지를 동시에 적용했는데 background-size도 같이 한 줄에 입력할 수 있을까? 가능!

      3. b의 코드를 좀 더 간소화 해보자 linear-gradient는 효과이기 때문에 no-repeat없어도 된다. 배경이미지는 뒤의 사이즈와 딱 알맞기 때문에 no-repeat이 없어도 이미지의 변화가 없다. 그리고 둘다 X/Y축 전부 center이기 때문에 center 한 번만 작성한다.

      .ourStory {
  /*  a  */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 5.68%, rgba(0, 0, 0, 0.3) 42.95%, rgba(0, 0, 0, 0.8) 79.3%), url("../../assets/Cover.jpg") no-repeat center center;
  background-size: 
  cover, /* linear-gradient, 커버효과이기 떄문에 auto, container 모두 가능 */  
  cover; /* 배경 이미지 */

  /*  b  */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 5.68%, rgba(0, 0, 0, 0.3) 42.95%, rgba(0, 0, 0, 0.8) 79.3%) no-repeat center center / auto, url("../../assets/Cover.jpg") no-repeat center / center;
  
  /*  c  */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 5.68%, rgba(0, 0, 0, 0.3) 42.95%, rgba(0, 0, 0, 0.8) 79.3%) center / auto,     url("../../assets/Cover.jpg") center / cover
}

  • <background-size> 값은 <background-position> 바로 뒤에만 위치할 수 있으며 '/'로 구분한다.

  • background에 배경이미지와 커버, 이 두 가지를 같이 겹쳐서 넣은 것이다.

  • background 속기형 : 이미지, 반복, 위치, 사이즈

input의 label에 이벤트 바인딩 하기

input에 포커스가 갔을 때 label이 위로 올라가는 이벤트를 걸어준다.

input요소에 promotion__emailContainer--focus 상태 클래스를 추가/제거하는 이벤트를 사용한다. focus와 blue 이벤트를 사용한다.

처음에 내가 만든 이벤트 구분. 나는 잘 했다고 생각했는데 브라우저에서 확인 해보니 input창에 focus를 하기 전부터 콘솔패널에 'focus'가 기록이 되었다. 자! 문제를 보자. 이벤트메서드의 두번째 인자는 콜백함수가 들어간다. 하지만 나는 나중에 실행되는 함수를 입력한 것이 아니라 바로 console.log('focus')를 입력하니 내가 focus를 하기 전부터 실행이 되어 버린 것이다. 다시 기억하자!

emailInput.addEventListener('focus', console.log('focus'))

사용한 이벤트 구문 ↓

const emailContainer = document.querySelector('.promotion__emailContainer')
const emailInput = emailContainer.querySelector('input')

// 함수 사용 전 
emailInput.addEventListener('focus', () => console.log('focus'))
emailInput.addEventListener('blur', () => console.log('blur focus'))

// 유틸리티 함수 사용
emailInput.addEventListener('focus', () =>
  emailContainer.classList.add('promotion__emailContainer--focused')
)
emailInput.addEventListener('blur', () =>
  emailContainer.classList.remove('promotion__emailContainer--focused')
)

promotion

promotion__emailContainer

input에 포커스가 가게 되면 label의 위치가 위로 올라가게 된다. 이떄 position으로 위치를 잡아주는 것으로 한다.

promotion__emailContainer input

  • 너비와 높이의 값을 고정시켜서 디자인해서는 안됨. 왜? 데스크탑 버전까지 고려해야 하기 때문이다. padding을 사용해서 위치 조정한다.

  • input은 사용자가 텍스트를 입력하는 곳이기 떄문에 font-size를 고려해야 한다.

  • 왜 width가 아닌 min-width를 사용했을까? 데스크탑 버전을 생각해야 하기 때문에 너비가 늘어나는 경우를 고려해야 한다.

.promotion__emailContainer input {
  min-width: 22.8rem;
  border: 0;
  border-radius: 50px;
  padding: 1.3em 1.5384em 0.8461em;
  font-size: 1.3rem;
  background: var(--colorWhite);
}
PreviouscomponentsNextNetflixIntro

Last updated

Was this helpful?