DOCTYPE - html 이 어떤 버전으로 작성되었는지 브라우저에게 알려주는 것.
meta tag - html 문서에 대한 data 를 담는 태그.
웹 표준 - 웹상에서 표준으로 사용되는 기술(w3c 기준)
웹 접근성 - 모든 사람이 차별없이 웹을 자유롭게 이용하는 권리 ex) 이미지에 alt 태그를 달아 음성으로 설명가능하게 한다던지.
시멘틱 태그 - html 태그에 추가적인 의미를 부여해주는 태그. ex) header, nav, aside, section, article, footer. 시멘틱 태그를 잘 지키면 검색엔진을 통해 검색이 잘 될 수 있도록 도와줌.
SEO - 검색 엔진에 의해 검색 결과에서 상위에 노출될 수 있도록 만드는 것. ex) 시멘틱한 문서 만들기
이미지 크기가 클 경우 렌더링 속도가 느려질 수 있는데 이를 개선하는 방법
1. 이미지 용량을 줄임
2. 이미지 스프라이트(같은 이미지를 css 를 통해 조절하여 재사용)
3. svg 사용
display
1. none - 아예 사라짐
2. inline - 새로운 라인에서 시작하지 않고 다른 요소들과 같은줄에 배치됨. 컨텐츠 너비만큼 영역 차지.
width, height, margin-top, margin-bottom 속성 적용 안됨.
3. block - 항상 새로운 라인에서 시작. 화면 크기의 전체 가로폭을 차지. width 를 부여하면 그 수치만큼 영역 차지.
4. inline-block - block 과 inline 특징 합친것. 한 줄에서 inline 요소들과 같이 배치될 수 있고 width 와 height 속성으로 영역의 크기를 지정할 수 있음.
position
1. static - 기본값. 상->하
2. relative - 원래 배치되어야할 자리에서 지정한 값만큼 떨어진 곳에 배치
3. fixed - 화면을 기준으로 배치. 스크롤하더라도 고정됨.
4. absolute - 가장 가까운 상위 요소를 기준으로 지정한 값만큼 떨어진곳에 배치
em vs rem
em - 상위 요소 크기를 font-size 를 으로 함.
rem - 문서의 최상위 요소(html)의 font-size를 기준으로 함.
padding vs margin
padding - 대상의 내부 여백
margin - 대상의 외부 여백
