기록
Last updated
Last updated
미디어 쿼리 해상도에 변수를 사용하려고 했으나 먹지 않는다.
변수를 사용하지 못하니 번거로운 점이 있다. Sass가 그리워진다.
폰트사이즈와 라인하이트의 값이 같을 때는 라인하이트를 1로 한다.
로그인 링크 border-radius: 0.4rem; 컴포넌트 값으로 함
콘텐츠의 테두리를 boder로만 설정한다는 고정관념은 버리자!
box-shadow를 사용할 수도 있다.
<a>요소와 <h1> 요소의 크기가 같지 않았던 이유
<a> 요소는 <h1>의 글자 크기만큼 커지기 때문이다.
<h1>요소에는 임의로 너비 높이 값을 설정했기 때문에 로고 사이즈와 같은 크기가 설정되어 있지만 <a>요소는 <h1>요소에 기본적으로 설정되어 있던 글자 크기인 2em을 상속받아 크기가 설정되어 있었다. 그래서 넷플릭스가 아래로 내려와 있는 것이다.
<a>가 넘어 가는지 아닌지 확인하기 위해서는 임의로 1rem으로 주고 <h1> 요소에 overflow: hidden을 적용해서 확인
ourStory가 아닌 다른 컨테이너는 수직 방향으로 디자인 되어있다. 그래서 column 상태 클래스를 만들어준다.
페이지 별로 만들거니까 body에 class명을 home으로 추가 고유하기 때문에 id 값을 주기도 한다
헤더를 브라우저 상단에 고정하기
접근성은 색으로만 구분하는 것이 아니라 . 형태적으로 구분하기도 한다.
링크가 포커스 됐을 때 테두리는 공용스타일로 만들 수 있기 때문에 기본 스타일로 적용한다.
접근성 :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 이상 사이즈에서는 컨테이너가 좌측으로 치우침
2.ourStory의 promotion
데스트탑 버전에서 <input>과 <button>을 수평으로 나란히 두기 위해 promotion__emailContainer에 inline-block을 적용했다
나란히 두니 <input>과 <button> 사이에 공간이 생겼다. promotion__emailContainer때문에 생긴 공간인데 원인이 뭔지 모르겠다. 일단 임의로 음수값을 주어 빈 공백을 없앴다.
3.데스크탑 버전에서 <input>과 <button>의 높이를 어떻게 같도록 할까?
4. 브라우저의 너비가 넓어지면서 텍스트가 자연스럽게 펼쳐지게 하기 위해서는 내가 스크린의 사이즈 별로 너비를 적용하면 될까?
