기록

기록하기

미디어 쿼리 해상도에 변수를 사용하려고 했으나 먹지 않는다.
- 변수를 사용하지 못하니 번거로운 점이 있다. Sass가 그리워진다.
폰트사이즈와 라인하이트의 값이 같을 때는 라인하이트를 1로 한다.
로그인 링크 border-radius: 0.4rem; 컴포넌트 값으로 함
콘텐츠의 테두리를 boder로만 설정한다는 고정관념은 버리자!
- box-shadow를 사용할 수도 있다.
<a>요소와 <h1> 요소의 크기가 같지 않았던 이유
- <a> 요소는 <h1>의 글자 크기만큼 커지기 때문이다.
- <h1>요소에는 임의로 너비 높이 값을 설정했기 때문에 로고 사이즈와 같은 크기가 설정되어 있지만 <a>요소는 <h1>요소에 기본적으로 설정되어 있던 글자 크기인 2em을 상속받아 크기가 설정되어 있었다. 그래서 넷플릭스가 아래로 내려와 있는 것이다.
- 해결 → <h1>요소에 글자크기를 1rem만큼 주니 해결되었다.
- <a>가 넘어 가는지 아닌지 확인하기 위해서는 임의로 1rem으로 주고 <h1> 요소에 overflow: hidden을 적용해서 확인

.netflixHeader--fixed{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.netflixHeader--fixed{
  position: fixed;
  width: 100%;
  top: 0;
}

접근성 :focus에 border가 아닌 box-shadow를 적용한 이유
- border는 사각형 모양으로만 테두리가 그려진다. 반면에 box-shadow는 컨텐츠의 모양 그대로 테두리가 그려진다. 그래서 box-shadow를 사용했다.
:focus-visible란?
- :focus-visible는 키보드로 접근했을 때, 보이는 상태이다.
<input>의 border를 지워도 괜찮은가? (접근성)
- <input>의 border는 0으로 적용해도 되지만 outline는 없애면 안된다. 만약 outline을 지운다면 대체 방법으로 box-shadow를 적용해 주면 된다.

1.스크린 너비 376-1439px 사이에서는 컨테이너의 margin 좌/우 공간이 생기지 않음

calc(18 / 960 * 100%)을 적용했으나 1440px 이상 사이즈에서는 컨테이너가 좌측으로 치우침

@media (min-width: 60rem /* 960px/16 */ ) {
  .Container {
    min-width: 90rem;
    margin: 0 auto;
  }
}

2.ourStory의 promotion

데스트탑 버전에서 <input>과 <button>을 수평으로 나란히 두기 위해 promotion__emailContainer에 inline-block을 적용했다
나란히 두니 <input>과 <button> 사이에 공간이 생겼다. promotion__emailContainer때문에 생긴 공간인데 원인이 뭔지 모르겠다. 일단 임의로 음수값을 주어 빈 공백을 없앴다.

@media (min-width: 60rem)
.promotion__emailContainer {
    display: inline-block;
    margin-right: -0.432rem;
}

3.데스크탑 버전에서 <input>과 <button>의 높이를 어떻게 같도록 할까?

4. 브라우저의 너비가 넓어지면서 텍스트가 자연스럽게 펼쳐지게 하기 위해서는 내가 스크린의 사이즈 별로 너비를 적용하면 될까?

Last updated 4 years ago

Was this helpful?