[Day 06] Reset Style + font + selector + Layout

Reset Style

• Reset.css (Eric Meyer’s Reset.css)
  • 모든 요소가 가진 기본 여백을 0으로 만들어 놓고 시작한다.
• Normalize.css (normalize.css cdn)
  • agent style의 오차를 비슷하게 만들어 놓는다.
  • reset.css 에 비해 cross browsing 시 발생할 수 있는 문제점들을 미리 분석해 놓는다는 점이 장점이다.

CSS

• 단위
  • em(equal m) : parent node의 font-size를 받아서 상대적으로 배율을 적용
  • rem(root equal m) : em에서 발생하는 상속 시 중첩되는 font-size 문제를 해결하기 위해 node 간의 상속 시 font-size의 중첩이 발생하지 않도록 한다. root node의 size를 상속받는다. (상속을 끊지는 않는다.)
• font property
  • font-style : italic
  • font-weight : bold, normal, …
  • font-variant : small-caps (폰트 높이를 맞춰준다)
  • line-height : 1.15, 1.2, …
  • font-size : 12px, …
  • font-family : gothic, …
  • shorthand expression
    • font: italic bold small-caps 1.15 12px gothic
• web font
  • serif : 바탕, 궁서 등 끝에 삐침이 있는 글씨체
  • sans-serif : 돋움, 굴림, 고딕 등 삐침이 없는 글씨체
  • mono-space : 고정폭 글꼴
  • font-family: "Noto Sans KR", sans-serif;
    • “Noto Sans KR”을 쓰되, 없으면 sans-serif 글꼴 군에서 비슷한거 찾아서 써라
• table
  • border-collapse: collapse;를 활용하면 margin collapsing이 발생하기 때문에 겹치는 margin을 잡아준다.
  • border-spacing: 0; 를 활용해 표의 border 간격을 지정한다.
• a (anchor or link)
  • a:link - link가 걸려있는 a tag
  • a:visitied - link를 한번이라도 클릭했을 때
  • a:hover - a tag 에 마우스를 올렸을 때
  • a:focus - a tag에 focus가 생겼을 때
  • text-decoration: none|underline|overline|wave...
  • cursor: pointer|crosshair|... (마우스를 올렸을 경우 생겨나는 것)
• ie 6,7,8 에서 html5 tag들을 호환시키기 위한 js
  • html5shiv.js
• CSS 적용 순서
  • 부모로부터 상속 받은 CSS 보다 요소에 직접 걸려 있는 CSS가 우선한다.
  • 같은 레벨의 CSS 선택자라면 나중에 선언된 CSS가 우선한다.
• 자식 선택자
  • :nth-child(n)
    • n 번째 요소부터 선택할 때에는 n + number
    • n 번째 요소까지 선택할 때에는 -n + number
  • span:nth-of-type(n)
    • 같은 종류(or tag)인 것 끼리 선택

Layout

• flex
• float
• inline-block
  • inline 상자를 사용할 때에는 줄 바꿈이 공백 처리 되서 blank로 인식된다.
  • blank를 없애기 위해 부모 노드의 font를 0으로 만들고 text 노드에 직접 font를 먹이면 된다.
• 숨김 콘텐츠(readable-hidden)
  • html tag에 hidden 속성을 사용하면 없는 콘텐츠로 취급되기 때문에 접근성 떨어짐.
  • CSS에서 display: none; 을 하면 마찬가지로 없는 콘텐츠로 취급된다.
  • visibility: hidden;을 하면 콘텐츠 영역을 차지하고 transparent 로 된다.
  • position: absolute;로 띄우고, left: -9999em으로 브라우저 밖으로 보내버린다. -> 접근성 차원에서 문제가 있기 때문에 안좋다.
  • position: absolute; 상태에서, width: 1px; height: 1px;로 크기를 작게 잡은 뒤 margin: -1px; 하고, clip: rect(0,0,0,0);로 상하좌우를 다 잘라버린다.
• skip-nav 링크(readable-hidden으로 만들고, focus 시 hidden 해제하는 식으로 만든다.)
  • 반복적으로 제공되는 navigation 링크를 건너뛰어서 본문을 바로 볼 수 있도록 하는 링크
  • anchor tag의 hyperlink를 main으로 연결되도록 만들어서 navigation을 건너 뛰고 바로 main 영역으로 이동할 수 있도록 한다. (장애인들의 keyboard navigation 접근성 매우 증대)