사람이 코드=소스를 작성하면 웹페이지가 만들어진다.
웹페이지 여러 개가 모이면 그것을 웹사이트라고 하고
기능이 많으면 웹애플리케이션이라고 한다.
1. HTML
1). 정의
HyperText
하이퍼 텍스트(하이퍼링크를 주로 텍스트에 걸기 때문에 hyper text라고 함)
를 가장 중요한 특징으로 하는
Markup
마크업(태그를 이용하여 데이터를 구조화하는 것)이라는 문법형식을 가진
Language
언어
다른 사람들과 약속을 하였기 때문에 언어로 소통이 가능하다.
*HTML5
W3C에서 만들고 있는 웹 표준으로서 마이크로소프트, 모질라, 애플, 구글, 오페라 등
모든 웹브라우저 벤더가 참여하고 있는 산업 표준
2). 웹표준 HTML 5 + CSS 3.0을 지켜야 하는 이유
웹접근성, 상호호환성이 좋아지기 때문이다.
웹접근성 (web accessibility)
“어떠한 사용자(장애인, 노인 등), 어떠한 기술 환경에서도
사용자가 전문적인 능력 없이
웹 사이트에서 제공하는 모든 정보에 접근할 수 있게 보장하는 것” //한국정보화진흥원
“장애가 있는 사람도 웹을 이용할 수 있게 보장하는 것으로,
장애가 있는 사람이 웹 콘텐츠를 인지하고, 운영하고, 이해하고,
기술에 상관없이 이용할 수 있게 견고하게 웹 콘텐츠를 만드는 것” //W3C WAI
상호호환성 (cross web browsing)
어떤 환경에서도 동등한 수준의 정보가 담긴 페이지를 출력하게 하는 것
동등한 기능 접근이 가능하도록 하는 것
2. 웹표준 문서 작성법
① <div>태그를 이용해 논리적인 영역을 나눈다
② 각각의 영역에 독립적인 id 및 class를 부여한다
③ 필요에 따라 블록레벨 엘리먼트와 인라인 엘리먼트를 추가한다.
★블록레벨 엘리먼트
•줄을 바꿔 각각 독립된 줄에 표시함. 그 뒤에 요소는 자동으로 줄바꿈된다.
•블록, 인라인 요소를 모두 내부에 포함(중첩)가능함.
•컨텐츠의 크기와 상관없이 폭을 원하는대로 지정할 수 있다.
•div, ul, ol, li, dl, dt, dd, h1~h6(블록포함못함), form, p(블록포함못함)
form: 아이디, 비밀번호를 입력하는 공간에 대한 태그
(블록을 포함할 수 있는게 무슨 속성이더라?)
★인라인 엘리먼트
•다른 인라인 엘리먼트와 같은 줄에 표시됨.
•블록을 포함할 수 없음, 인라인 요소만 포함 가능
•컨텐츠의 크기로만 폭이 정해진다.
•span, a(내부에 블록 포함 가능함), img, strong, input, select
*block 요소를 줄바꿈하지 않고 나란히 나열하는 방식
- inline-block
- float : 살짝 공중부양시켜서 왼쪽이나 오른쪽으로 위치시키는 것..
- position
- flex
*파일명 지정 시 주의할 점
- _, -로만 글자 구분
- 공백을 쓰지 않는다.
- 영어가 있어야 숫자를 쓸 수 있다.
- 한글로 쓰지 않는다.
- 확장자 html과 htm은 동일한 것이나
폴더 안에서 둘을 혼용하여 쓰지는 않는다.
http와 https의 차이?
3. 레이아웃을 구성하는 기본 태그
1). <!DOCTYPE html>
= Document type declaration
어떠한 표준의 html을 따랐냐에 따라 Doctype을 다르게 설정할 필요가 있음.
HTML5를 따르고 있으면 코드 맨 위에 <!DOCTYPE html>을 쓰면 됨.
2). ★<html lang="ko">
문서의 언어 (접근성을 위해 반드시 써준다)
이것을 써주면 그 국가의 언어를 쓰지 않는 사람들을 위해 구글 번역기가 뜬다.
3). <head>
눈에 보이지 않는, 기본정보를 담은 부분
4). <meta>
데이터를 설명하기 위해 존재하는 태그
<html>
<head>
<meta charset="utf-8">
</head>
</html>- <meta charset="utf-8">
문자 인코딩 방식 = "다국어를 지원하겠다"는 의미
character : 문자라는 의미
set : 묶음
utf-8 : 우리가 작성한 파일의 내용을 utf-8의 방식으로 저장(인코딩)했을 시
그 파일을 읽어서 표현할 때 utf-8방식으로 읽으라(디코딩)는 의미
- <meta name="description" content="문서의 요약문">
- <meta name="keywords" content="중요한 단어, 또다른 중요한 단어">
이곳에 입력해두면 검색엔진에 걸림.
- <meta name="author" content="이름, 페이지 만든 사람 이름">
- <meta http-equiv="refresh" content="30">
페이지가 30초 간격으로 새로고침됨.
5). ★<title>
웹사이트의 탭에 노출되는 글자이자
스크린 리더기가 제일 먼저 읽어주는 내용 (접근성을 위해 반드시 써준다)
6). <body>
브라우저에서 실제로 보여지는 내용
4. semantic tag (의미론적 태그)
* 그 밖에 태그
<a>
- 속성 : href(Hypertext reference의 약자)
- value : 주소링크
태그만 써줘도 제 기능을 하는 태그도 있는 반면
a태그와 같이 태그를 보조하는 속성이 필요한 태그도 있다.
- 기본 속성값
파란색 글자에 밑줄
클릭해서 열고 나면 보라색 글자에 밑줄
<img>
- 속성 : src(source의 약자, 속성값은 이미지 저장주소)
- 속성 : alt (속성값은 대체 택스트로 접근성 때문에 꼭 써줘야 한다)
- 닫는 태그 없다
5. HTML5 문서 아웃라인 알고리즘
- 각 섹션은 자기들만의 제목 계층을 가질 수 있습니다.
그래서, 중첩된 섹션이라도 <h1> 제목을 가질 수 있습니다.
→ section마다 하나씩 h1를 가져도 됨.
(원래는 한페이지당 h1이 하나만 와야한다고 생각했는데 아니구나)
- 제목 요소엔 요소 이름에 붙은 숫자를 가지고 계급을 매기는데,
<h1>이 최상위 계급이며 <h6>는 최하위 계급이 됩니다.
제목 간 계급의 상대적 등급은 오로지 같은 섹션 안에서만 중요해집니다.
→ section1, section2가 독립적으로 존재할 때
section1에서 h1, h2태그를 쓰고 section2에서 h3태그를 썼을 시
그래도 h1과 h3태그는 동등한 위치로 본다고 해야 하나.
그렇다고 마구 h태그를 쓰진 말라고 함.
- 만약에 이전에 사용된 제목보다 더 높은 계급의 제목이 사용되었다면,
이전 섹션과 구분되면서 더 높은 제목의 계급을 가진
또 하나의 새로운 암묵적 섹션으로 자리하게 됩니다.
→ 예시로.. section1이 있을 때, section1밖에서 h1, h2를 사용함
section1안에서 h3, h3, h2를 사용하면..
h1
h2
h3
h3
h2
이렇게 정의됨. (..!! 이상하다)
작성한 마크업이 다른 사람에게도 쉽게 이해되도록 하려면,
섹션을 구분할 때 명시적 섹션 요소의 태그들을 쓰는 것이 바람직하며,
원래 의도하는 섹션의 중첩 수준을 고려해서 그에 어울리는 제목의 계급을 써야 합니다.
그래서 알아서 잘쓰라고 하시는듯..?
제목의 계급은 항상 해당 섹션의 중첩 수준과 일치하도록 쓰라는 규칙의 예외도 있을 수 있는데,
그 중 하나 여러 문서에서 공통으로 재사용되는 섹션의 경우가 있습니다.
예를 들면, 섹션 내용이 어떤 콘텐츠 관리 시스템에 저장되어
실시간으로 여러 다른 저장된 내용과 함께 조합되어 문서에 표시될 때가 있습니다.
이 경우엔, 재사용되는 섹션의 가장 최상위 제목으로 <h1>부터 시작해서 사용하실 것을 권장합니다.
그러면 재사용되는 섹션의 중첩 수준은 문서의 섹션 계층 중
해당 섹션이 삽입되어 보이는 위치에 따라 자동으로 결정될 것입니다.
이 경우에도 명시적 섹션 태그가 문서 아웃라인을 명확히 하는 데 도움을 줍니다.
이 말은 너무 어렵다..
- 섹션 구분의 근원점
: HTML 요소 중 자기만의 아웃라인을 가질 수는 있지만,
그 안의 섹션이나 제목이 자기 위에 있는 요소의 아웃라인에는 어떠한 영향도 끼치지 않는 것
EX). <body>가 여기에 포함되고,
이 외에도 종종 외부 콘텐츠를 페이지에 표시하는 데 사용되는 다음과 같은 요소들도 있습니다
: <blockquote>, <details>, <fieldset>, <figure> 마지막으로 <td>.
→ex). <blockquote> 요소가 근원점으로 쓰인 경우..
자기가 포함하고 있는 내부 내용의 아웃라인이 외부의 것과 완전히 차단되면서,
전체 문서의 아웃라인에는 포함되지 않음.
6. 섹션을 구분짓는 요소의 주소와 발행시간
메인 페이지의 저자와 다른 또 다른 사람이 작성한 콘텐츠가 포함된 섹션은
<article> 요소를 써서 정의합니다.
이렇게 하면, <address> 요소는 지정된 위치에 따라
가장 가까운 상위의 <body> 혹은 <article>과 연관된 정보로 표시됩니다.
7. HTML5미지원 브라우저
시맨틱태그의 display를 inline으로 인식하므로
display를 block요소로 바꿔줄 필요가 있다.
그 밖에는 모질라에서 제공하는 정보 페이지의 맨 하단을 참조한다.
8. 검색엔진 최적화 (SEO, Search Engine Optimization) 하기html코드를 의미론적으로 타당하게 집어넣어야 함.
1). 적합한 타이틀의 사용
- 키워드를 잘 집어넣기
- 분별력을 높이기 위해 페이지마다 고유한 title 태그 작성
2). meta태그 적절하게 사용
- description을 meat태그에 사용할 때 1~2문장으로 정확하게 표현하기.
3). URL구조 개선하기
- url에 정보를 잘 담으면 크롤링 (컴퓨터에 분산 저장되어 있는 문서를 수집하여
검색 대상의 색인으로 포함시키는 기술)에도 도움이 됨.
- 너무 일반적이거나 반복적인 내용이 담기지 않아야 함.
- 중첩된 하위 디텍토리가 길지 않은게 좋음.
- 같은 컨텐츠가 여러 개의 주소를 가지고 있는 경우를 피함.
: rel="canonical"라는 링크 속성을 이용해서 진짜 링크를 알려주는 것이 좋음.
- html로는 못하지만 php등을 배워서 같은 내용의 페이지로 접속 할 때
301 리디렉션을 설정해 우선시 되는 URL로 보내버리는 것이 좋음.
4). 사이트 내에서 이동하기 쉽게 만들기
- 홈페이지를 기반으로 한 이동 경로 계획하기
홈페이지 : 웹페이지의 대문 페이지, index페이지.
- 사이트 이동 경로를 제공하여 방문자에게 편리를 제공하기
- 사용자가 URL의 일부를 제거하는 경우 발생할 상황을 고려한다.
: URL뒤쪽 지우면 더 상위로 이동할 수 있지 않을까
생각하는 사람들을 위해서 이름을 짜는게 좋다고 함.
- 자연스러운 계층 구조를 만든다.
- 이동 경로를 위해 텍스트 링크를 사용한다.
: 콤보 박스를 javascript를 이용해 다른 사이트로 이동시키게 할 수 있지만..
검색엔진은 javascript보다 html의 텍스트링크를 더 잘 이해한다고 함.
검색해서 발견안되도 괜찮은 사이트 아니면 기왕 html로 작성하라고 하는군..
5). 우수한 품질의 콘텐츠와 서비스 제공
- 검색 엔진을 위한 것이 아닌 사용자를 위한 콘텐츠를 작성한다.
사이트를 검색되게 하기 위해 meta태그에 사이트에 사용되지 않은 단어를 주렁주렁 넣을 수 있는데
그러면 오히려 스팸으로 간주해서 검색이 안되게 할 수 있다고 함.
6). 보다 나은 앵커 텍스트(a태그) 작성
- 내용을 함축하는 텍스트 선택
: 페이지, 문서 또는 여기를 클릭 이런 말 삼가하기. 주소를 길게 적어놓는 것도 삼가하기.
- 링크를 눈에 띄기 쉽게 첨부하기
: text-decoration: none; 같은 것을 통해 링크 css를 다 없애서 링크인지도 모르게 하지 말기.
9. 이미지 사용의 최적화1). 보편적인 이미지 폴더(images)에 이미지를 저장하는 것이 좋다.
또한 이미지의 이름을 의미를 부여해 간결하게 짓는다.
이미지 검색에서 엔진이 이미지를 이해하는데 도움이 된다.
생각해보면 이미지 저장경로 적을 때 폴더명이 들어가니까..
2). 이미지를 링크로 사용할 때 alt(alternative text, 대안 텍스트)를 작성한다.
링크 태그로 감싸진 이미지에 alt태그를 사용하면 이미지가 어디로 연결되는지 알 수 있다.
또한 스크린 리더가 읽는데 참고가 된다.
10. 제목 태그의 적절한 활용하기단순히 크기만 키우는게 아니라 h태그를 사용해서 제대로 제목임을 밝힌다.
11. robots.txt(로봇 측정 텍스트)를 효과적으로 활용하기검색창 뒤에 robots.txt로 들어가면
disallow: 보호될 필요가 있거나 가져가지 않았으면 하는 정보
allow: 가져갔음 하는 정보
검색창 뒤에 sitemap으로 접속하면
웹사이트의 지도를 볼 수 있음.
검색엔진에게 뭔가 구체적으로 제공할 것이 있다면
sitemap.xnl (xnl : 기계가 해석하기 쉬워하는 마크업 언어)을 작성해서
robots.txt에 제공해주는 것도 괜찮다고 함.
: 페이지가 어떤 구조로 생겼는지 검색엔진이 더 잘 확인할 수 있음.
1). robots.txt를 보안 도구로 사용하지 않기
robots.txt는 정중하게 선언하는 것뿐이지 보안 능력이 없다.
2). 민감한 콘텐츠는 보다 안전한 방법 사용하기
3). 웹마스터를 위한 무료 도구 사용하기
12. 페이지 랭크
페이지 랭크 : 같은 검색어로 검색된 페이지중 어떤 것을 더 우선순위로 놓는가를 결정하는 알고리즘
페이지가 더 많이 링크되어 있는 홈페이지를 우선해서 보여주기 때문에
더 많은 사람이 방문할 수 있는 가능성이 커짐.
더 좋은 컨텐츠를 가지고 있을 가능성이 높다고 생각함.
웹의 본질은 링크에 있다는 것을 알려주는 것.
참고
'HTML' 카테고리의 다른 글
| [웹접근성 정리] AOA11Y - 웹접근성과 웹표준 (1) | 2021.03.13 |
|---|---|
| [HTML] 시멘틱 태그 (0) | 2020.08.15 |
| [웹접근성] 웹접근성의 이해 기본 - 1. 웹접근성의 이해 (0) | 2020.08.06 |
| [HTML] void-element (0) | 2020.06.01 |