html 메타태그를 알아보자

티스토리 뷰

개발

동네주민1 2022. 4. 20. 11:15

Explain the First 10 Lines of Twitter's Source Code to Me | CSS-Tricks

A question I always like to ask when interviewing a front-end candidate is: "Explain the first ten or so lines of the Twitter source code to me."

css-tricks.com

css-trick을 보던 중 흥미로운 글이 있어서 정리용으로 씁니다.

이 캡쳐를 바탕으로 1~11번 줄이 무엇을 의미하는지 설명하는 포스팅이에요.

Line 1 : <!DOCTYPE html>
- 브라우저가 어떤 html 표준을 사용하면 되는지를 나타내는 document 타입을 선언하는 태그
Line 2 : <html dir="ltr" lang="en">
- 텍스트의 방향이 'left to right' 방향으로 가며 언어는 영어를 사용함을 나타내는 태그
Line 3 : <meta charset = "utf-8">
- 문자집합 속성은 브라우저에 사용할 문자 인코딩을 지시
- utf-8은 문자포인트를 많이 가지고 있어서 소스코드에 모든 종류의 기호와 이모지를 사용할 수 있음.
Line 4 :<meta name="viewport" content="width=device-...
- 브라우저가 스크린 사이즈(스마트폰, pc 등)에 맞춰 보여질 수 있도록 하는 태그
- width=device-width 브라우저에 장치 너비의 100% 뷰포트로 하도록 지시
- user-scalable=0 확대/축소 기능 비활성화
- maximum-scale=1 최소 및 최대 배율을 사용하여 이러한 값 사이의 확대/축소 기능을 고정할 수 있음
Line 5 : <meta property="og:site_name" content="Twitt...
- seo와 관련된 open graph tags
- microbrowser. sns나 메신저에 공유되어 미리 보여지는 카드를 의미함
- 요즘엔 Puppeteer나 플러그인 사용한다고함

Line 6, 7 : <meta name="apple-mobile-web-app-title" cont...
- 애플 기기에 웹사이트를 최적화하기 위한 태그 ,
- 아이폰 홈 스크린에 웹사이트를 고정하여 네이티브앱처럼 느끼게 함
Line 8 : <meta name="theme-color" content="#ffffff"...
- 브라우저의 ui 색(테마) 지정 태그
Line 9 : <meta http-equiv="origin-trial" content="... Line 10 : html{-ms-text-size-adjust:100%;-webkit-text...
- origin-trial을 사용하면 새로운 실험 기능을 사용할 수 있다.
- 예) 듀얼스크린과 폴더블 기기 등의 개폐 여부에 따라 레이아웃을 적용할 수 있다.
Line 10 : html{-ms-text-size-adjust:100%;-webkit-text...
- 반응형이 아닌 모바일 페이지에서 글자 크기를 조절 할 수 있게 만들어주는 태그
- 실험적인 태그이기 때문에 -ms 벤더프리픽이 붙음
- -ms-text-size-adjust:100%는 실제 사이즈와 동일하게만 표시되게 하므로 확대 불가능하게 만드는 태그
Line 11 : body{margin:0;}
- 브라우저간의 초기 css 값이 다르기 때문에 초기화 시켜주는 코드
- 이제는 normalize.css 또는 reset.css 등을 사용

평소 궁금했던 부분도 있고 전혀 몰랐던 부분도 있네요.

더 자세한 내용은 글을 한번 읽어보면 좋을 것 같아요.

Object.assign()할 때 JSON.parse()로 깊은 복사하기 (0)	2022.08.04
네이버 부스트캠프 웹·모바일 자가진단 코딩테스트 문제 풀이 (0)	2022.06.16
빅오표기법 (Big-O notation), 보이는 학생 (0)	2022.03.01
javascript : promise (0)	2022.02.16
javascript : callback - 모던 자바스크립트 딥다이브, 생활코딩 (0)	2022.02.15

공지사항

최근에 올라온 글

최근에 달린 댓글

링크

글 보관함