HTML 작성
head 정보
html lang="en" :
meta charset="UTF-8"
meta name="viewport"
meta content="width=device-width, initial-sclae=1.0"
html lang="en" 이란?
<html lang="en-US">이렇게 html 해당 페이지의 언어를 지정할 수 있다. 이것은 여러 방면에서 유용하다. HTML 문서는 언어가 설정되어 있으면 검색 엔진에 의해 보다 효과적으로 색인화되며(예를 들어 언어 별 결과에 올바르게 표시되도록..) 화면 판독기를 사용하여 시각장애가 있는 사용자에게 유용하다.(예: 6이라는 숫자는 프랑스어와 영어에서 모두 존재하지만, 각기 다른 발음이 적용된다.)
또한, 문서의 하위 섹션을 다른 언어로 인식하도록 설정할 수도 있다. 예를들어 다음과 같이 일본어 일본어로 된 섹션에 대해서는 일본어로 인식하도록 할 수 있다.
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>만약 다국어 페이지를 염두에 두고 있다면, 이런 부분까지 신경써야 할 것이다. 많은 유저들이 페이지 자동 번역 기능을 이용하기 때문에, 꽤나 유용할 것이다. 글로벌 유저를 대상으로 한 웹을 제작한다고 한다면 필수 고려 사항일 것이다.
<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">
많은 meta 요소는 name과 content를 속성(attribute)을 가진다.
이러한 메타데이터는 페이지의 관리자 정보를 기입하거나 머릿말등을 요약하는데 유용하다.
구글에서 해당 페이지가 검색될 때, 어떤 식으로 나오게 되는지 정의된다. 검색엔진에서 자신이 만든 웹 페이지가 어떤 식으로 나오게 될지를 결정하기에 매우 중요하다.
페이지에 콘텐츠 관련 키워드를 포함시키게 되면, 검색엔진(구글 등)에서 해당 페이지가 더 많이 노출될 수 있다. 이는 가치 창출과도 연관되기에 매우 중요하게 생각해야 할 것이다.
(이런 활동을 SEO - Search Engine Optimization이라고 한다)
(이런 식으로 검색 엔진에 내가 입력한 메타데이터를 기반으로 표시해주게 된다.)
참고: 많은 기능들이 더이상 사용되지 않는다. (예를들어 같은, 다른 검색 용어에 대해 해당 페이지의 관련성을 부여하기 위해 검색 엔진에 제공하던 키워드 등..) 스팸 발송자들이 키워드 목록에 수백 개의 키워드를 채워버리는 악용 사례가 생겨 버렸기 때문에 이것들은 검색 엔진들이 아예 무시를 해버리게 되었다.
메타데이터에 들어가는 og란?
카카오톡이나 여타 다른 SNS들을 사용하게 될 때, 웹사이트 주소를 입력하면 특정한 형식으로 나오게 되는 것을 경험한 일이 있을 것이다. 이것은 Meta에서 개발한 The Open Graph protocol에 의한 것이다.
특정 사이트(주로 sns)에 사용할 수 있는 특정 정보를 제공하도록 설계된 프로토콜이다.
더 풍부한 메타데이터를 제공하기 위한 것이다.
<meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">
이런 식으로 페북, 인스타, 카카오톡 같은 곳에 깔끔하게 표시되도록 해주는 것이다.
Twitter 에서도 유사한 형태의 독점적인 자체 메타데이터를 가지고 있는데, 특정 웹사이트의 url이 twitter.com에 표시 될 때와 유사한 효과가 있다.
<meta name="twitter:title" content="Mozilla Developer Network">Favicon 이란?
커스텀 아이콘(이미지)을 추가하여, 사이트를 북마크하거나 홈화면에 저장하는 등의 행위를 할 때 어떤 이미지를 보이게하는 지 정할 수 있다. 사이트의 인덱스 페이지와 같은 폴더에 .ico 포멧의 파일을 저장한 후 다음과 같은 엘리먼트를 작성하면 된다.
(gif, png등의 이미지 형식도 가능하다. 다만 IE6 이전 버젼에서도 적용되려면 ico 포맷을 쓰는 것이 좋다고 안내하고 있다)
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png">
<!-- basic favicon -->
<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png">주석은 각 아이콘의 용도를 설명한다. 웹사이트가 iPad의 홈 화면에 저장 될 때 사용할 고해상도 아이콘을 제공하는 것 등을 포함한다.
현대인들 대부분이 SNS를 이용하기 때문에, 만약 어떠한 웹페이지를 제작했다면 반드시 이 부분도 깊이 고려하여 접근성을 높여야 할 것이다. 사용자가 많은 SNS 1위~10위까지 어떻게 메타데이터를 받아오는지 전수조사 한 후, 각각에 맞는 메타데이터를 첨부하는 작업을 필수로 해야할 것이다.
element
q : HTML q요소는 둘러싼 텍스트가 짧은 인라인 인용문이라는것을 나타냅니다. 대부분의 브라우저에서는 앞과 뒤에 따옴표를 붙여 표현합니다. q는 줄 바꿈이 없는 짧은 경우에 적합합니다. 긴 인용문은 blockquote 요소를 사용하세요.
blockquote : HTML blockquote 요소는 안쪽의 텍스트가 긴 인용문임을 나타냅니다. 주로 들여쓰기를 한 것으로 그려집니다. 인용문의 출처 URL은 cite 특성으로, 출처 텍스트는 cite 요소로 제공할 수 있습니다.
img : 문서에 이미지를 넣을 때 사용하는 엘리먼트이다.
src 속성은 필수이며, 이미지의 경로를 지정한다. 외부 주소를 넣을 수도 있고, 해당 html이 속해있는 root 폴더에 있는 이미지 파일의 주소를 넣을 수도 있다.
alt 속성은 만약 이미지가 정상적으로 출력되지 못했을 때, 나오게 되는 값이다. 스크린 리더기가 이 값을 읽기 때문에 시작장애인등의 접근성 차원에서 유용하다. 일반적으로 개발자들이 해당 이미지를 한글로 설명한 값을 적어놓는다. 즉, 이미지의 대체 텍스트 설명이라고 볼 수 있다.
video : 비디오를 넣기 위해 사용하는 엘리먼트이다. img와 비슷하게 표시하고자 하는 동영상의 경로를 src에 적는다. 비디오의 width, height, 자동재생 여부, 음소거 여부 등을 속성을 통하여 지정할 수 있다.
autoplay 불리언 속성이다. 해당 속성을 사용할 시, 동영상이 자동재생 된다. 그러나 사용자가 놀라는 것으 방지하기 위하여 muted 특성이 같이 사용되지 않는다면 autoplay를 아무리 적어도 적용되지 않는다.
controls 불리언 속성이다. 이 속성을 사용하면 동영상의 소리를 조절하거나 탐색등을 할 수 있는 컨트롤러가 제공된다. 자주 쓰는 속성이다.
muted 동영상을 음소거 시키는 속성이다.
audio : 오디오를 넣기 위해 사용하는 엘리먼트이다.
loop 불리언 속성이다. 이것을 사용할 시, 자동으로 반복재생을 하게된다. video 태그에도 사용 가능하다.
iframe : 하나의 페이지에서 다른 웹 페이지를 출력하고 싶을 때 사용한다. 페이지의 이동이 아니다! 페이지 내에서 다른 페이지를 출력하는 개념이다.
및 해당 엘리먼트의 관련 속성들도 기록할 것
form
form action="#" : 일종의 관례로 action의 값에는 '#'을 넣어준다.
input
input type
input type radio, checkbox, number, password 등
label
textarea
select
select 밑에 들어가는 option
textarea
button
button type=reset, submit
속성(attribute)
id : 어떤 엘리먼트에 css의 특성을 적용할 것인지 정해주는 역할을 할 수 있다.
id는 중복으로 사용하면 안 된다.
class : 어떤 엘리먼트에 css의 특성을 적용할 것인지 정해주는 역할을 할 수 있다.
style : HTML에서 바로 스타일을 줄 수 있다. 그러나 CSS 사용하게되면 잘 안 쓴다.
a : anchor 엘리먼트는 반드시 href라는 attribute를 사용해야 한다.
(href : Hyperlink Reference)
href에서 '/'로 시작하면 해당 로컬 폴더 내의 파일 등을 href에 사용할 수 있게 된다.
예전에는 www.naver.com 이라고 www를 입력해야했으나, 이를 반드시 입력하지 않아도 브라우저가 알아서 처리해준다.
도메인 주소란?
ip 주소를 외우기 힘들기 때문에, 편리하기 사용하기 위해 존재하는 것.
저작권 관련
포트폴리오를 제작하거나 실습을 하면서 여러 컨텐츠를 활용하게된다.
이 때, 저작권 관련하여 주의해야 한다.
(https://pixabay.com/ko/ 라는 곳에서 컨텐츠를 이용하는 것을 추천하신다. 이미지, 비디오, 오디오 등의 파일을 다운 받을 수 있다.)
MD파일에 들어가있는 URL 관련 지식
readme.md를 작성하는 이유는 깃허브에 업로드 됐을 때, 자동으로 출력이 된다.
개발자 문화에서 자주 쓰이는 방식이므로, 알고 있어야 한다.
인코딩 형식에 있는 UFT-8, UTF-16, ASCII 등은 무엇인가?
UNICODE
UTF-8을 알기 위해서는 먼저 유니코드를 알아야한다.
유니코드는 전 세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 산업 표준이다.
이것을 규율하는 단체는 유니코드 콘소시엄(Unicode Consortium)이라고 한다.
전 세계의 모든 문자를 담는 ISO/IEC 10646 코드표를 사용함으로써, 각 언어와 문자 체계에 따른 충돌 문제를 해결하였다. 따라서 유니코드를 사용하면 한글과 신자체·간체자, 아랍 문자 등을 통일된 환경에서 깨뜨리지 않고 사용할 수 있다.
UTF-8
UTF-8은 유니코드를 위한 가변 길이 문자 인코딩 방식 중 하나로, 켄 톰프슨과 롭 파이크(이분은 GO언어를 만드신분)가 만들었다.
풀네임은 Unicode Transformation Format - 8bit 8의미는 8비트 1바이트를 기준으로 인코딩한다는 의미이다.
코드 페이지는 65001로, UTF-8로 표현 가능한 길이는 최대 6바이트지만 다른 인코딩과의 호환을 위해 4바이트까지만 사용한다.
그래서 한 글자가 1~4바이트 중 하나로 인코딩될 수 있으며, 1바이트 영역은 아스키 코드와 하위 호환성을 가진다. 아스키 코드의 0~127까지는 UTF-8로 완전히 동일하게 기록된다.
유니코드는 U+10FFFF까지만(10진법으로는 1,114,111) 이용하는데, UTF-8은 아래에 나와 있듯이 가변 바이트 길이를 선언하기 위해 꽤 많은 비트를 잡아먹고도 2,097,151까지 인코딩할 수 있기 때문에 4바이트만으로도 충분하고도 남는다.
장점
유니코드가 널리 쓰이기 전부터 형성된 인터넷 문서들은 대부분 아스키 코드를 기본으로 해서 작성되었고, 특히 기존의 HTML 태그나 자바스크립트 등 아스키로 구축된 사이트를 별다른 변환 처리 없이 그대로 쓸 수 있는 엄청난 장점이 있었다. 더군다나 UTF-8은 엔디안에 상관없이 똑같이 읽을 수 있으므로 크로스플랫폼 호환성도 뛰어났다.
ASCII 호환성, C로 작성된 Unix 프로그램 호환성, BOM이 필요없다든가, 엔디안을 따지지 않아도 된다든가, 파싱에 예외모드 확장 문자 처리 등등이 필요 없고, 그 덕에 실체 처리속도도 더 빠르다든가 하는 엔지니어링 측면에서의 수많은 장점도 존재한다.
ASCII
ASCII는 American Standard Code for Information Interchange의 약자이다. 아스키 코드라고 이야기 한다. 미국 국립 표준협회(ANSI, American National Standars Institue)에서 표준화한 정보교환용 7비트 부호체계이다. ASCII는 영문 알파벳을 사용하는 대표적인 문자 인코딩이다.
(문자 인코딩이란? Character Encoding으로서 사용자가 입력한 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것을 의미한다. 즉, 복잡한 신호를 0과 1의 디지털 신호(2진수)로 변환하는 것을 의미한다.)
아스키는 33개의 출력 불가능한 제어 문자들과 공백을 비롯한 95개의 출력 가능한 문자들로 이루어져있다. 제어문자들은 역사적인 이유로 남아있으며, 대부분은 더 이상 사용되지 않는다.
아스키는 2바이트 이상의 다양한 코드들을 표현할 수 없으므로 현대에는 UINICODE를 더 많이 사용한다. 유니코드는 전 세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 산업 표준이다. (한글의 경우도 한 글자당 2바이트의 용량을 가지게 된다.)
아스키 코드에서 출력 가능한 문자들은 52개의 영문 알파벳(a~Z)과, 10개의 숫자(0~9), 32개의 특수문자(@, # 등등), 그리고 하나의 공백문자(Null)로 이루어진다.
