업무에 바로쓰는 html5 2일차

vsCode 단축키 및 extension

• Shift + Alt + F : Format Document 코드 정렬 이쁘게 만들어줌
• snippet ranger: custom snippet을 만들 수 있게 해주는 extension
  • snippet generator에 자신이 만들고 싶은 코드 붙여서 snippet 코드 생성하기

 

피그마

• export styles to CSS variable

 

CSS

• font size를 상속받겠다는 의미

font-size: 100%;

 

• line-height가 1이면 폰트에 따라 일부 글자가 잘릴 수도 있음 => 1.2이상 사용 권장
• reset css
  • normalize css: 모던 브라우저 지원 https://necolas.github.io/normalize.css/

Normalize.css: Make browsers render all elements more consistently.

• https://andy-bell.co.uk/a-more-modern-css-reset/

A (more) Modern CSS Reset - Andy Bell

• https://jgthms.com/minireset.css/

minireset.css

 

• css import

/* @import url("./reset.css"); */
@import "./reset.css";

• font-size
  • default size: 16px
  • 0.625em = 16px * 0.625 = 10px => 상속받은 혹은 지정한 글자 크기의 배율에 맞게
  • 반응형을 만들 때는 px 사용 지양, rem/em, vw을 사용해서 유동적인 크기를 적용해야 함
  • html(root)를 0.625rem(10px)로 지정하면 하위 요소에 대한 폰트 사이즈를 지정하기 쉬움 (2rem = 20px)
• width = inline-size
• height = block-size
• aspect-ratio: 10/1 => 세로가 가로 비율의 0.1 이라는 의미
• float: left
  • float:left가 적용된 자식 요소의 부모 영역에 display: flow-root를 주면 영역이 사라지지 않음
  • 유용한 경우: 카드 내에 프로필이랑 글자 나타내는 구조...
  • shape-outside: 글자가 이미지를 자연스럽게 타고 가게 할 수 있음
• inline-size: clamp(최소값, 기본값, 최대값)
  • clamp 함수를 사용하면 max-inline-size를 사용하지 않고도 inline -size의 최소 최대 값을 지정할 수 있음
• aria-hidden 속성
  • aria-hidden="true" => 화면에 보이지만 스크린 리더에서는 읽지 마세요
• position: fixed
  • top:0, bottom: 0 => height가 100%로 확장됨
  • left: 0, right: 0 => width가 100%로 확장됨
  • 크로스 브라우징에 따라 적용 안되는 경우도 있긴 함
  • 상자의 크기에 영향을 주는 속성(margin, top..)은 리플로우를 많이 발생하게 함
• translate
  • 기존의 transform은 여러 함수를 합쳐서 쓸 때 하나만 변경하기가 어려웠음
  • 그래서 단독으로 설정할 수 있는 translate 함수 등장
  • translate는 리플로우를 발생시키지 않음
• display: grid
  • https://yamoo9.gitbook.io/css-grid