word-relay 예제 따라하기 -html편

Nian·2022년 4월 29일

Let's_Get_IT_자바스크립트프로그래밍 책예제따라하기

Let's Get IT 자바스크립트 프로그래밍 따라하기

목록 보기

2/5

참조

이 코드는 Let's Get IT 자바스크립트 프로그래밍에 있는 예제로 공부하고 있습니다.

이 짓을 왜 하는 것일까.

나는 그동안 html과 css를 대충 배우고 Javascript를 배우는 단계에 왔다. 이런저런 책을 사서 봤지만, 이해가 되지 않은 채로 넘어간 것 같다.

이에 복습 차원에서 태그부터 쭉 살펴보면서 내방식대로 이해를 하려고 한다.

하다보면 내가 하고 싶었던 목표에 닿지 않을까...?

코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>끝말잇기</title>
</head>
<body>
    <div><span id="order">1</span>번째 참가자</div>
    <div>제시어 : <span id="word"></span></div>
    <input type="text">
    <button>입력</button>
    <script>
        
    </script>
</body>
</html>

사용한 태그를 구글링을 통하여 내 방식대로 읽어보자

<!DOCTYPE html>

어떤 버전으로 작성되었는지 브라우저에게 알려 내용을 올바르게 출력하도록 도와주는 역할을 한다.
HTML 문서 첫 부분에 기술하여야 하며, 작성하지 않을 땐 비표준모드로 랜더링이 된다.
DOCTYPE은 태그가 아니기 때문에 문서 상단에 한 번만 기입해도 된다.
소문자로 작성해도 적용이 된다.

<html lang="en">

언어를 지정하는 특성이며, 이것을 기준으로 스크린 리더기가 인식함.
문서가 있는 태그에도 지정할 수 있다.
ex : <p lang="ko">
각 나라의 언어 코드 사이트 : https://www.w3schools.com/tags/ref_language_codes.asp

<meta http-equiv="X-UA-Compatible" content="IE=edge">

문서 호환성 모드
인터넷 익스플로러(IE)의 버전에 따라 다르게 보여지지기에 "호환성 보기"라는 기능을 제공.
content 부분에 보여줄 IE 버전을 작성
인터넷 익스플로러의 사용을 중지하고 Edge로 전환됨에 따라 위 형태의 코드를 사용.
vscode에서는 !를 입력한 상태에서 Tab키를 누르면 기본 세팅이 나옴.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

출처 : https://aboooks.tistory.com/352
Viewport는 웹페이지를 렌더링 할 때 동작하는 방법을 알려주고 그 크기를 디바이스 별로 지정하는 것.

content="width=device-width는 컨텐츠를 표현할 넓이를 사용자의 디바이스 크기에 맞춰 선언하겠다는 것.
아래와 같은 선언 형태가 있다.

meta name="viewport" content="width=400"
meta name="viewport" content="width=device-width"
meta name="viewport" content="width=device-height"
meta name="viewport" content="width=device-width", initial-scale=1.0
meta name="Viewport" content="width=device-width, user-scalable=no"