TIL (Today I Learned)

HTML

• Semantic tag
  
  

  • 효율적으로 MarkUp을 하기 위한 HTML Tag Element

    • <div> 를 남발하기 보다는 의미있게 마크업 하기 위함
    • 적절하게 사용했을시 검색엔진에 중요한 검색 랭킹 요소
      
      

  • <header> <main> <footer> <nav> 등 대표적 태그
    

    • <section>,<article> 헷갈리지말기 - 하나의 독립적인 컨텐츠가 될수 있느냐, 관련요소를 분리할때쓰느냐 차이
    • MDN 공식문서 참고
      
      

  • 시각 장애인의 화면 판독기 사용시 어떠한 내용인지 정확히 전달

CSS

• px, vh, vm, em, rem, vmin, vmax 단위속성 차이
  
  
• Flex box
  
  
  • display:flex; 부모요소에 적용
    • justify-content, align-item, flex-direction 사용방법
      
      
• position
  
  
  • 화면이 움직여도 레이아웃을 고정 fixed
    
    
  • 디폴트 static
    
    
  • relative 위치조절 마음대로 가능
    • top, bottom, left, right 값, z-index
      
      
  • absolute relative 속성인 부모를 기준으로 위치조절, 없으면 body가 기본 부모
    
    
    

TEL (Trial and Error Log)

• HTML Sementic tag <main>,<article>,<section> 헷갈림
  • MDN 문서 보면서 자주 사용
    
    
• CSS 작성 중 수직이나, 수평으로 내마음대로 조절이 잘 안됨
  • 기존 width, height이 충분하지 않았다. 늘려 주니 원하는 대로 결과 출력