#1. html 작성 기초

1.1 웹표준이란

1.1.1 웹표준

웹표준의 세가지 계층

Structure

구조계층(HTML, XHTML): 무슨 의미인가

Presentation

표현계층(CSS): 어떻게 보이는가

Behavior

계층동작(JavaScript): 어떤 동작을 하는가

위에서 알아야하는 사항들

HTML 구조 계층은 모든 웹페이지에 필수적이다.

HTML이 없으면 웹페이지도 없다.

CSS와 JS는 필수 계층이 아니다.

동적계층이나 표현 계층이 없어도 기본적인 사용이 가능해야한다.

표현계층은 CSS로, 계층동작은 JS로 분리해야한다.

접근성과 사용성에도 적극적이어야 한다.

예를 들어 iamge의 경우 alt가 있어야한다. 아니면 시각장애인의 경우 그 이미지가 의미하는 바가 무엇인지 알 수 없다.

컴퓨터가 그냥 url을 읽을 것이기 때문에.

마우스가 없어도 키보드만으로도 사용되어야 한다.

1.1.2 웹접근성

https://www.wah.or.kr:444/

웹접근성 연구소

www.wah.or.kr:444

어떤 방식으로 정보를 제공하는게 모든 사람들을 편하게 하는지 알려주는 사이트.

1.1.3 예제

Good:

<a href="www.naver.com">네이버</a>

Bad:

<a href="#" onclick="window.open('','','')">네이버</a>

font 태그를 html에 넣으면 안된다. 이는 CSS에서 작업되어야함.

1.2 html 태그 작성 문법

주의

시작태그, 종료태그

input, br, hr 태그는 종료태그 없음.

이때 <input> 혹은 <input/> 무관. 허나, XHTML의 경우는 이를 엄격히 지킨다.

참고: htm 발달과정

html4

xhtml1.0

xhtml1.1

xhtml2.0

html5 : 유연한 룰

1.3 문서형 선언, 언어 지정, 문자 코드 셋 지정하기

문서형 선언

<!DOCTYPE html>

<html lang="en"> : 언어지정. 한국어는 ko

본문에서 다른 단어가 나올 경우 language 속성을 추가해주면 된다.

강사님 웹사이트 : cafe.naver.com/wepub

1.4 meta 요소 알아보기

메타요소는 웹페이지 작업이 다 끝난 후 넣어주는게 일반적.

<meta name="keywords" content="hello"> <!--페이지 키워드-->
    <meta name="description" content="">
    <meta name="author" content="Dahee"> <!--누가 만들었는가-->
    <meta name="generator" cotent="bootstrap"> <!--어떤 프레임워크를 썼니-->
    <meta name="robots" content="index,follow">
    <!--index: 검색봇에 의해 정보가 수집되는 것을 허용한다.
    follow: 다른 페이지로의 연결을 허용한다. -->

- index, follow 둘 다 허용할 경우 content="all"로 지정. 혹은 하나만일 경우 content="index,nofollow"로 지정.

둘 다 허용하지 않으면 content="none"으로 지정

robot 사용하지 않을 경우 robot.txt 별도로 작성하기도 함.

- 구글의 경우 keyword에 대한 값은 검색에 별로 도움이 되지 않으며, description이 검색에 도움 된다.

e.g. 책의 제목, 가격, 책 내용 요약

-오픈 그래픽: 카카오톡 같은 곳에서 공유시 보여지는 정보에 대한 설정.

<meta property="og:title" content="페이지제목">
<meta property="og:url" content="http://사이트주소/">
<meta property="og:image" content="http://띄울이미지">
<meta property="og:type" content="website"> 종류지정
<meta property="og:description" content="사이트설명">

출처: https://cafe.naver.com/wepub

- <meta http-equiv="refresh" content="3; url=http://example.com/">

사이트가 공사중이라서 다른 곳으로 이동해야할 경우 유용. 위에서 3은 '초'에 해당한다.

디바이스 성능에 따라 약간 느릴 수도 있음.

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

반응형 웹을 만들 경우 필수. 이거 없으면 해상도 높은 모바일 디바이스에서 글자 거의 보이지 x.

1.5 html 템플릿 작성하기

꿀팁: 브라우저 사이즈 적당성 테스트 방법

: 크롬브라우저나 오페라브라우저 등에서 개발자 툴을 열면 모바일 화면을 확인 가능

https://developers.google.com/web/tools/chrome-devtools/device-mode

마크업 컨벤션

nuli의 코딩컨벤션 참고

https://nuli.navercorp.com/sharing/fe/coding

FE 개발도구 모음

Coding Convention

nuli.navercorp.com

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <p><a href="#content">본문 바로가기</a></p>
    <div id="wrap">
      <!-- header -->
      <div id="header"></div>
      <!-- //header -->
      <!-- container -->
      <div id="container">
        <!-- content -->
        <div id="content"></div>
        <!-- //content -->
      </div>
      <!-- //container -->
      <!-- footer -->
      <div id="footer"></div>
      <!-- //footer -->
    </div>
  </body>
</html>

https://nuli.navercorp.com/data/convention/NHN_Coding_Conventions_for_Markup_Languages.pdf

불러오는 중입니다...

여기 63 페이지 참고함.

기록요정