FrontEnd 스터디 20200802

구글 폰트

• 로컬에 없는 폰트를 가져다 쓰고싶으면 구글폰트 사용할 수 있다

  • 주의할 것은 영어만 되는게 있고 한글만 되는게 있다
  • 폰트 >> Selected family >> Embed 를 헤더에 복붙

• 눈누라는 사이트는 한국사이트라 한글 옵션이 더 많다

---

flex

flex나오기 전에 inline, inline-block, block을 많이 썼다

하지만 요즘 추세는 flex 이다

• block

  • 일반 div, p, h, li, ol 태그들이 block 타입이다

  • 가로가 100프로로 채워져있다

  • 패딩이나 마진이 안 먹어서 여러개 만들면 아래로 쌓인다

  • 기본적으로 블록에는 block과 inline이 들어갈 수 있다

  • h1에서 특정 부분만 색을 변경하고싶을 때 중간에 span을 넣어서 쓴다 (블록 안에 인라인)

• inline-block

  • 태그가 따로 있는건 아니다
  • 공간이 자기 크기만큼 먹는다
  • 특징은 패딩이나 마진도 잘 먹는다
  • 여러개 있으면 오른쪽으로 쌓인다

• inline

  • 인라인블록과 같이 오른쪽에 나란히 쌓인다
  • 근데 인라인블록과 다르게 마진이 없다
  • 마진을 주면 생긴다
  • 스타일 적용이 된다
  • span이 인라인 태그다
  • inline에는 inline만 들어갈 수 있다

• 이제는 flex를 쓴다

  • float를 개선한 버전

  • 텍스트가 정중안에 있는 것을 플렉스 없이 한다면 계산을 해야한다

  • align-items, justify-content 로 간단하게 중앙정렬 가능

  • justify-content: space-between으로 간단하게 좌우 정렬가능(로고같은거)

• flex-direction: 정렬 방향

• column으로 정렬

  

• header에 height를 주면 사이에 일정한 간격을 줄 수 있다

• 우측 flex: 1,  좌측 flex: 3을 해주면 1:3의 비율로 화면을 채울 수 있다
• counter
  • 플렉스에서 새로 나온 스타일

position

static, relative, absolute, fixed

• absolute
  • 좌우 요소는 무시
• -webkit-sticky
  • 화면의 특정 부위에 고정(스크롤 할 때 고정됨)
• -webkit: 구글, 사파리 브라우저에 적용되는 속성 접두어
• right, left, top, bottom
  • 애니메이션에 많이 쓴다
  • 요새는 transform을 많이 쓰지만

네이버

• 네이버는 검색사이트라 정적

• 네이버의 여러 신문사들

  • 테이블보다는 그리드로하면 보더문제해결되고 깔끔

• 연예홈, 뮤직급상승 등은 모두 플렉스로

당근마켓

display: grid;
grid-template-columns: 1fr 1fr 1fr;

 그리드 쓰면 계산할 필요 x