HTML › HTML에 대하여

게시 2024/08/07

By 정재욱

37 분읽는 시간

생활코딩 채널과 김버그님 강의를 통해 배운 내용을 정리하려 한다.

HTML(Hyper Text Markup Language)

Hyper Link : 웹 상에서 흔히 볼 수 있는 밑줄로 된 링크(자료 -> 사진, 동영상, 파일의 위치를 지정할 수 있는 참조고리).

Hyper Text : 하이퍼링크를 나타낼 수 있는 텍스트. 즉 하이퍼 링크를 통해 사용자가 한 문서에서 다른 문서로 이동 할 수 있는 Hyper(초월적)인 Text(글).

문서

https://developer.mozilla.org/ko/docs/Web/HTML
https://www.w3schools.com/html/default.asp
https://google.github.io/styleguide/htmlcssguide.html (구글 권장 가이드라인)

정의

HyperText를 가장 중요한 특징으로 하는 Markup 형식을 가진 Language.
Web 브라우저에 표시되는 Web Page를 만들어달라고 컴퓨터에게 요청을 하는 언어(사람과 웹브라우저 사이의 소통을 위한 약속).

HTML은 프로그래밍 언어인가? : 😡 🤯
프로그래밍 언어라 함은 시스템 또는 소프트웨어를 구동시키며(메모리에서 데이터를 읽고, 데이터에 대한 조건부 논리를 재공하고 반복적으로 실행가능) 정적인 페이지를 동적으로 만든다.(ex. js)
반면 HTML(마크업 언어)는 구조, 서식 등의 골조를 만들고 페이지의 틀을 잡아주는 역할이다.
즉 HTML은 뼈, CSS는 피부, js는 근육을 담당한다.

HTML을 사용하면서 항상 기억할 것은 정보로서의 역할에 집중할 것!
문서의 구조와 정보 위계가 명확하게 보이는 코드를 지향하자!

속성

  
<a href="https://www.giujae.github.io"></a>

시작 태그의 안에 사용하는 용어로 태그의 동작을 제어하거나 스스로 기능하지 못하는 요소 유형에 기능을 제공한다.

태그의 종류

시멘틱 태그

HTML5에서 등장한 개념으로, HTML의 구조를 설계 할 때 태그에 의미를 부여하여 웹사이트의 구조를 쉽게 파악 할 수 있도록 한 것이다.
접근성 향상, SEO(검색엔진최적화) 향상, 가독성 향상 등의 장점이 있다.

쉽게 말해 내가 쓴 코드가 아니더라도, 이 언어가 뭔지 모르더라도 아 이 구역은 무엇을 위한 것인가, 대충 어떻게 구조가 짜여있고, 어떤 내용을 시사하려 하는 구나. 를 눈치 챌 수 있도록 짜고 싶다는 것이며 실제로 코드를 짜면서 지향해야 할 방향성이다.

SEO(검색엔진최적화) : 검색엔진 친화적인 사이트를 구축하여 검색 결과를 통한 노출을 극대화 하는 작업이다. 검색엔진최적화

  
<article>
<aside>
<details>
<figcaption>
<figure>
<header>
<footer>
<main>
<mark>
<nav>
<section>
<summary>
<time>
</article>

  
<header>
    <h3>날씨 정보</h4>
    <h4>2월 19일</h4>
    <p>- 기상청 제공 -</p>
</header>
<p>서울 : 맑음</p>
<p>대전 : 흐림</p>
<p>부산 : 비</p>

문서나 section의 헤더를 정의.
도입부 또는 네비게이션 링크 집합 등을 포함.

nav 태그

  
<nav>
  <a href="/html/intro">HTML</a> | <a href="/css/intro">CSS</a> |
  <a href="/javascript/intro">JavaScript</a>
</nav>

같은 웹 문서 안 다른 위치 또는 다른 웹 문서에 연결.
네비게이션 링크들의 집합을 정의. ex : 목차 or 인덱스.
header sidebar footer에 모두 사용 가능.

link 태그

  
<link rel="stylesheet" href="./styles.css" />

현재 문서와 외부 소스의 관계를 나타낼 때 쓰는 태그로 대표적으로 css파일, 웹 폰트, bootstrap등의 CDN을 입력할 때 사용한다.

article 태그

  
<article>
  <h2>2월 19일 날씨 정보</h2>
  <h3>서울</h3>
  <p>맑음</p>
  <h3>대전</h3>
  <p>흐림</p>
  <h3>부산</h3>
  <p>비</p>
</article>

독립적으로 배포가 가능하거나 재사용 가능한 콘텐츠를 묶음. ex : 블로그 포스트, 포럼, 뉴스기사
article 내부에 article 존재 가능.

section 태그

  
<section>
  <h1>HTML</h1>
  <p>HTML(HyperText Markup Language).</p>
</section>
<section>
  <h1>HTML의 역사</h1>
  <p>최초의 HTML은 어쩌고 저쩌고.</p>
</section>

논리적으로 관계있는 요소 또는 문서를 분리할 때 사용.(논리적인 관계가 없을 때는 div 사용.)
div 태그과 span 태그
div 태그와 span태그는 모두 그룹핑을 하고 싶을 때 사용하는데, 차이점으로는 div 태그는 어디에서나 그룹핑이 하고싶으면 사용할 수 있지만 span태그는 어딘가의 안에 텍스트의 일부분을 그룹핑 하고 싶을 때 사용한다.
둘 다 아무런 의미를 가지지 않고, 그룹핑만 하는 태그이기 때문에 꼭 필요한 부분이 아니면 사용을 지양하는 것을 추천한다.

  
<section>
  <h1>HOT TOPIC</h1>
  <section>
    <p>World</p>
    <article>World news 1</article>
    <article>World news 2</article>
    <article>World news 3</article>
  </section>
  <section>
    <p>Sport</p>
    <article>Sport news 1</article>
    <article>Sport news 2</article>
    <article>Sport news 3</article>
  </section>
</section>

article과 section의 차이는 article은 독립적인 요소들을 묶는다는 점 article이 좀 더 구체적임 section은 논리적인 관계를 기준으로 묶는다는 점.
두 시멘틱 태그 모두 div와 같은 블록 요소이기 때문에 대체하더라도 기능 상 문제는 없음.
태그 내 콘텐츠가 외부와 단독으로 묶는게 낫다면 article 사용.

main 태그

  
<main>
  <h1>바나나</h1>
  <p>
    바나나는 바나나는 파초과 바나나 속에 속하는 숙근성 영년생 열대과수를
    총칭한다.
  </p>
  <article>
    <h2>다이어트 식품</h2>
    <p>
      바나나는 탄수화물이 약 27%이고 비타민 A와 C가 풍부하며, 100g당 87kcal의
      열량을 갖는다.
    </p>
  </article>
  <article>
    <h2>다양한 섭취법</h2>
    <p>
      바나나는 열매를 주식으로 이용할 뿐 아니라 미성숙한 열매는 채소로 다양한
      요리에 응용된다.
    </p>
  </article>
</main>

문서 내 body의 주 콘텐츠 작성.
중심 주제나 주요 기능에 직접 연관이 있어야 하고, 문서 전반에 반복되는 내용은 포함하지 않음.
한 문서에는 하나의 main만 존재. article, aside, footer, header, nav 요소의 자손이 되어선 안됨.

aside 태그

  
<h2>과메기</h2>
<p>
  과메기는 경상북도 포항 지역의 특산물로 청어나 꽁치를 추운 겨울 동안 얼렸다
  녹였다를 반복하여 반건조시킨 음식이다.
</p>
<aside>
  <h4>포항</h4>
  <p>
    포항시는 대한민국 경상북도 동해안에 위치하고 있으며, 포항시 중심을 관통하는
    형산강이 영일만에 유입되면서 넓은 충적평야를 형성하고 있다.
  </p>
</aside>

다른 콘텐츠 들과 약간 연관있지만 분리 시킬 수 있는 내용.

  
<footer>
  <p>Copyright © 어쩌고</p>
  <address>주소</address>
</footer>

문서나 섹션의 footer 정의.
header,section, article 등의 시멘틱 태그 사용 가능.

html 태그(Root 태그)

<html></html>

현재 웹문서가 HTML 문서임을 브라우저에게 알리며, HTML문서의 시작에서 끝까지 DOCTYPE을 제외한 모든 HTML요소를 포함한다.

1 <!DOCTYPE html>
현재 웹문서가 HTML5로 작성된 문서임을 알리고, “! + tab” 또는 “html:5”로 미리 짜여진 형식을 사용할 수 있다.

head 태그

<head></head>

브라우저가 해석하는데 필요한 정보를 입력한다. HTML5부터 생략이 가능하나 추천하지 않는다.

title 태그

<title></title>

브라우저의 제목이나 탭의 문서 제목 등을 정의하며, 텍스트만 사용 가능하다.

meta 태그

  
<meta charset="UTF-8" />

HTML문서에서 다양한 메타데이터(문서에 관한 정보)를 제공하여 브라우저가 문서를 해석하고 처리하는데 활용한다.
여기서는 문서의 문자 인코딩에 대한 정보를 제공한다.

보통 다른 태그들로 표현하지 못하는 정보를 meta 태그에 때려박는다.

name : 메타 데이터의 종류
content : 메타 데이터 값

요즘에는 브라우저를 다양한 사이즈의 기기들에서 사용하기 때문에, 메타 데이터 중에서도 viewport 가 정말 필수적으로 중요해졌다.

다음은 추가적으로 알면 좋은 meta 데이터들이다.

  
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="나" />
<meta name="description" content="HTML 공부 했어요 헤헤" />
<meta name="keywords" content="나도, 개발자가, 되고, 싶다" />

body 태그

<body></body>

브라우저에 나타나는 내용으로, 문서 당 하나의 body만 존재 가능하다.

제목 태그

<h1></h1>
...
<h6></h6>

크기별 제목 텍스트 위에서 부터 아래로 갈 수록 소제목이다.

목록 태그

  
<ol type="1|a|A|i|I" start="정수">
  <li>아메리카노</li>
  <li>카페라떼</li>
  <li>핫초코</li>
</ol>

<ul>
  <li>아메리카노</li>
  <li>카페라떼</li>
  <li>핫초코</li>
</ul>

ol 태그 : 순서가 중요한 목록(숫자, 알파벳, 로마자로 순서 표기),(default로 1 시작).
ul 태그 : 순서가 중요하지 않은 목록(점으로 표기).
- li 태그 : ol 또는 li의 하위 항목으로 존재하는 아이템.

p 태그

<p></p>

문단을 정의하며 브라우저에서 자동으로 위 아래에 여백을 생성한다. 또한 태그 내 줄바꿈에 영향을 받지 않는다.

br 태그

</br>

텍스트 내 줄바꿈을 정의하며, 종료 태그가 없다.

img 태그

  
<img src="/examples/images/img_monalisa.png" alt="모나리자" />

이미지를 정의(문서에 직접 넣은 것이 아닌, 문서에 이미지를 링크 한 것)한다.

src : 경로(웹 문서 파일 기준).
alt : 이미지가 없을 때 텍스트로 대체.

table 태그

  
<table>
  <thead>
    <tr>
      <th>출장비 내역</th>
      <th>금액</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>교통비</td>
      <td>45000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>총 합계</td>
      <td>103000</td>
    </tr>
  </tfoot>
</table>

<table>
  <colgroup span="2" style="background-color: lightpink"></colgroup>
  <tr>
    <th scope="col">학번</th>
    <th scope="col">이름</th>
    <th scope="col">학과</th>
  </tr>
  <tr>
    <td>2006123456</td>
    <td>홍길동</td>
    <td>전자공학과</td>
  </tr>
</table>

테이블 정의[행(row) →, 열(column)↓].
1. 테이블 기본 태그.
  - caption : 표의 제목, 반드시 table태그 바로 다음 위치(스크린 리더는 읽을 수 있으나 화면에 보이지 않게 처리).
  - tr : 행을 만드는 태크.
    - td : tr로 지정한 행에 셀을 만듦.
    - th : 제목 행에 셀을 만듦.
      - scope : 행과 열중 무엇의 제목인지 나타내는 속성.
2. 테이블 그룹핑 태그.
  - thead : 제목 셀 그룹, 테이블 내 한 번만 사용(가운데 써도 맨 위로).
  - tbody : 테이블 본문 행.
  - tfoot : 소계, 합계 등의 정보, 테이블 내 한 번만 사용(가운데 써도 맨 밑으로).
  - colgroup : 하나 이상의 열을 그룹으로 묶을 때 사용(스타일 지정, caption 태그 보다는 뒤, thead보다는 앞, span속성으로 묶을 수 있음).
  - col : 지정한 열 스타일 적용 가능(span속성으로 묶을 수 있음).
  - colgroup으로 전체 적용해 놓은 것을 col로 개별지정해서 덮을 수 있는 것 같음.
  - 보통 CSS 사용.
3. 테이블 그룹핑 태그.
  - thead : 제목 셀 그룹, 테이블 내 한 번만 사용.
  - tbody : 테이블 본문 행.
  - tfoot : 소계, 합계 등의 정보, 테이블 내 한 번만 사용.
4. 셀 병합 속성.
  - rowspan : 행, 가로로 읽음 -> 세로로 병합.
  - colspan : 열, 세로로 읽음 -> 가로로 병합(ex. colspan=”2” = 위에서 가로로 두 칸을 합치고 아래로 읽을거야).

form 태그

  
<form action="/examples/media/action_target.php">
  이름 : <input type="text" name="st_name" /><br />
  학번 : <input type="text" name="st_id" /><br />
  학과 : <input type="text" name="department" /><br />
  <input type="submit" />
</form>

<form action="/examples/media/action_target.php" method="get">
  <fieldset>
    <legend>학사 관리 로그인</legend>
    이름 : <input type="text" name="st_name" /><br />
    학번 : <input type="text" name="st_id" /><br />
    학과 : <input type="text" name="department" /><br />
    내용 : <textarea cols="50" rows="2">default value</textarea>
    <button type="submit">제출하기</button>
  </fieldset>
</form>

<form action="/examples/media/action_target.php" method="get">
  여러분의 나이대를 골라보세요.<br />
  <input type="radio" name="ages" id="teen" value="teenage" />
  <label for="teen">10대</label><br />
  <input type="radio" name="ages" id="twenty" value="twenties" />
  <label for="twenty">20대</label><br />
  <input type="submit" />
</form>

사용자로부터 입력을 받을 수 있는 HTML 입력 폼.
- fieldset : 폼 요소 중 연관 된 것들을 묶는 것(요소 주변으로 박스 생성).
- legend : caption 정의.
- label : 폼 요소에 붙히는 라벨.
  - label 태그 안에 폼 요소 넣기.
  - 폼 요소에 id 속성으로 이름을 정해주고, label에 for 속성으로 해당 값 지정.

input 태그의 type 속성.

text : 한 줄 짜리 일반 텍스트.
- required pattern: 형식 지정 제한. ex)”[a-zA-Z].+[0-9]”
password : 비밀번호 입력 필드.
- size : input 요소의 너비를 문자 수 단위로.
- value : 초기값 value를 지정.
- maxlength : 최대 문자 수 제한.
search : 검색 입력 필드.
url : 웹 주소 입력 필드.
email : 이메일 입력 필드.
tel : 전화번호 입력 필드.
checkbox : 항목을 2개 이상 선택 시.
radio : 항목을 한 개만 선택 시.
- name : 버튼의 이름(분류가 같다면 하나만 선택 가능).
- value : 선택한 값.
- checked : 초기 선택 되어 있는 값.
- name = value의 형태로 서버로 전송.
number : 스핀박스에서 숫자 선택.
range : 슬라이드 막대를 움직여 숫자 입력.
- min : 최솟값.
- max : 최대값.
- step : 숫자 간격(default : 1, 소수점 입력하려면 따로 적어 줘야 함).
- value : 초기 표기값.
- placeholder : 유저에게 보여주는 기본값 예시.
date : 달력에서 날짜 골라서 yyyy-mm-dd 형식으로 표기.
month : 달력에서 월 선택 yyyy-mm 으로 표기.
week : 달력에서 주 선택 1월 첫째 주에서 몇 번째 주 인지 yyyy, oo번째 주 로 표기.
time : 폼에서 시간 입력 할 수 있도록 함.
- min : 최솟값.
- max : 최대값.(min max 값을 어겨도 선택은 되는데 폼 제출이 안됨).
- step : 숫자 간격(default : 1, 소수점 입력하려면 따로 적어 줘야 함).
- value : 초기 표기값.
datetime-local : 날짜 + 시간
submit : input에 입력한 값을 서버로 전송.
- value : 버튼에 보일 값.
reset : input에 입력한 값을 지움.
image : submit 버튼과 같은 이미지.
- src : 이미지경로.
- alt : 대체 텍스트.
button : 버튼 자체의 기능은 없고, js 실행시 사용.
- value : 버튼 표시값.
- button과 input의 차이는? : input은 스스로 닫는 태그이지만 button은 아님 -> 사이에 이미지 등을 넣기 수월함.
file : 사진 또는 문서 첨부 시 사용.
- accept : 파일형식 지정(.png, .jpg 시 두 개의 형식만 받을 수 있음, image/* 시 모든 이미지 파일 형식을 받을 수 있음.)
hidden : 화면의 폼에는 보이지 않음. 입력이 끝나면 폼과 함께 서버로 전송(ex. 유저가 변경해서는 안되는 값).
- name : 이름.
- value : 서버로 전송 할 값.

dropdown list : 사용자에게 미리 입력 된 선택지를 제공한다.

  
<form action="http://localhost/color.php">
  <select name="color">
    <option>1</option>
    <option>2</option>
    <option value="three">3</option>
  </select>
  <input type="submit" />
</form>

textarea : 여러 줄을 입력하기 위한 필드.

anchor(앵커) 태그

  
<a href="https://www.giujae.github.io">웹 URL로 이동</a>
<a href="#id">해당 id로 페이지 내 이동</a>
<a href="mailto:alacran6924@gmail.com">이메일 보내기</a>
<a href="tel:01012345678">전화 걸기</a>
<a href="https://www.giujae.github.io" target="_blank">새로운 탭에서 열기</a>

위 코드에서 볼 수 있는 방법 대로 앵커태그를 활용하여 다양한 기능을 사용할 수 있다.

인용 태그(blockquote)

  
<blockquote cite="여기가 그 분 링크예요">
  인용했어요 이거 내가 말한 게 아니고 가져온거예요~
  <cite>이 사람이 말했어요</cite>
</blockquote>
<p>
  어떤 기이이잉이이이이이이이이ㅣㅇ이일다란 내용인데
  <q>이건 긴 내용이예요</q>
  라고 누가 말했어요
</p>

인용 태그는 말 그대로 저자가 다른 곳에서 인용을 했음을 브라우저에게 알리는 태그이다.
cite를 통해 텍스트로 누가 원작자인지, 사이트에서 가져왔다면 어떤 사이트에서 가져왔는지를 알릴 수 있다. blockquote그 자체로 블록이기때문에 전체를 차지 하지만, q태그는 문단내에서의 인용을 표현 하는 방법으로 그 부분만을 차지한다. “” 로 감싸진다.

오디오 태그(Audio)

  
<audio src="./example.mp3"></audio>
<audio>
  <source src="./example.mp3" type="audio/mpeg" />
  <source src="./example.ogg" type="audio/ogg" />
  <source src="./example.wav" type="audio/wav" />
  <p>브라우저 딴거 쓰시죠?</p>
  <a href="https://www.browsehappy.com">브라우저 업데이트</a>
</audio>

오디오 태그는 말그대로 오디오 파일을 넣는 것이다.
사용방법으로는 위에서 보듯이 두가지 방법이 있다.

1번째
- autoplay : 로드 되자 마자 자동 재생.
  - loop : 반복재생
- controls : 유저가 조절할 수 있는 재생 바.
2번째 1번째의 속성값을 모두 사용할 수 있다. 각 타입별로 별도로 명시를 해주어야 하며, 특정 브라우저에서 특정 형식을 지원하지 않을 경우 다른 형식으로 재생.
만약 셋 다 지원하지 않으면 p태그 안의 텍스트를 보여준다.

아무래도 2번째 방법이 더 유저 친화적인 방법이겠지?

caniuse.com 을 이용하면, 어떤 브라우저가 어떤 형식을 지원하는지 볼 수 있다.

비디오 태그(video)

오디오태그와 동일한 방식으로 사용한다.

iframe 태그

  
<iframe src="https://www.giujae.github.io" frameborder="0"></iframe>

iframe은 html 안에 html문서를 임베드 할 때 사용하는 태그이다.
그러나 우리가 이걸 직접 작성해서 사용하는 일은 거의 없을 거고, 보통 유투브에서 영상을 가져와서 임베드 할 때 많이 사용한다.

abbr 태그(abbreviation)

  
<p>
  너 혹시 <abbr title="Attention Deficit Hyperactivity Disorder">ADHD</abbr> 니?
</p>

약어(약자)를 나타낼 때 사용하는 태그로 마우스 커서를 올리면 title 속성의 값이 뜬다. 고로 title 속성이 필수이다.

address 태그(address)

  
<address>
  <h1>기우제</h1>
  <a href="https://www.giujae.github.io">블로그<a>
</address>

이런식으로 대상의 연락망을 알릴 때 사용한다.
표시할 수 있는 정보로는

물리적 주소
전화번호
URL
EMAIL
SNS
등이 있다.

pre 태그(preformattedtext)

  
<pre>
  ㅇ ㅣ ㄹ ㅓ ㄱ ㅓ ㄷ ㄷ ㅣ
        ㄴ       ㅗ  ㅗ
                     ㅁ
</pre>
<pre>
  <code>
    console.log("123");
      var name = "기우제";
  </code>
</pre>

내가 쓴 그대로 나타내주는 태그이다.
저런 특성 때문에 html 내에서 code를 쓰고싶을 때 사용하는 태그인 code태그와 함께 쓰는 모습이 자주 보이지만, 세트는 아니다.
code는 indentation도 중요하기 때문에 이걸 살려서 쓰고 싶으면 쓰면 된다.

font 태그(쓰지마!!!)

  
<font size="8" color="red">HELLO</font>

HTML은 정보 에 집중을 한다. 그런데 이 font 태그는 아무런 의미를 가지지 않는다.
그저 문자를 꾸밀 뿐이다. 이런 의미없는 태그가 반복적으로 등장하게 되면 문서도 복잡해지고, 디자인과 관련된 코드와 의미를 가지는 태그가 혼재하게 되면 HTML의 정보로서의 의미가 퇴색된다.
그래서 등장한 것이 CSS이다.

style 태그 (굉장히 싫어함)

HTML문서 내에 CSS 코드를 작성할 때 사용하는 코드이다.

HTML은 앞서서도 계속 강조했듯이 사용자에게 정보를 의미를 전달하는 목적을 갖는다.
그렇기 때문에 CSS를 따로 분리를 했던 것인데, style태그를 사용하여 HTML 문서 내에 스타일을 짜게 되면 열심히 css파일로 분리해서 선언해 놓은 스타일을 덮어쓰게 된다. 😡😡 비추한다!

script 태그

  
<script>
  var h1 = document.queryselector("hi");
  h1.addEventListener("click", function (event) {
    this.textContent = "hi";
  });
</script>

HTML문서 내에 javascript 파일을 첨부하거나 작성할 때 사용하는 태그이다.

근데 이건 왜 header안이 아닌, body에 사용할까? HTML문서가 로드 될 때,
link 태그의 경우 로드가 완전히 되지 않더라도 스킵하고 넘어가버린다.
그러나 script 태그는 완전히 로드가 될 때까지 거기서 멈춰버리기 때문에 해당 태그가 header안에 있다면 body의 콘텐츠가 로드되지 않고 기다리는 굉장히 비효율적인 로드를 하게 된다.

그렇기 때문에 script 태그는 body 태그 내에서 콘텐츠의 로드가 다 끝난 이후에 작성을 해야 한다!

SEO(검색엔진 최적화)

아래에서 대표적인 검색 엔진인 구글의 SEO 문서를 살펴보겠다.

title 태그

검색 엔진에게 특정 페이지의 주제를 알려준다. 검색결과에 반영이 되는 내용으로 결과의 첫 번째 행에 나타난다.

페이지의 콘텐츠를 정확하게 설명하는 제목 작성.
페이지 마다 고유한 title 사용.
간결하면서 내용을 포함한 제목 작성.

description 메타 태그 활용

검색 결과에서 페이지 정보의 요약 정보를 보여줄 수 있다.

페이지의 내용을 정확하게 요약하기.
각 페이지마다 내용에 맞는 고유한 설명 사용하기.

페이지의 URL 구조를 개선하기

알아보기 좋은 형태의 URL은 크롤링하기도 쉽다.

불필요한 매개변수와 세션 ID가 있는 긴 URL사용 지양.
일반적인 페이지 이름 선택.
과도한 키워드의 반복 지양.
단순한 디렉토리의 구조 만들기.
같은 내용이 같은 URL 에서 보일 경우 지양.
- 중복 내용 중 보여주고 싶은 내용을 보여줄 수 있도록 하기.
  1 2 3 <head> <link rel="canonical" href="중복 내용 중 표시되길 원하는 링크" /> </head>
- 301 Redirection 사용하기. 원하는 내용으로 redirection 시켜버리기.

사이트 내 이동경로 확실하게 하기

홈페이지를 기반으로 하는 이동경로 계획하기.
Bread crum 으로 방문자에게 편의 제공하기.
사용자가 URL의 일부를 제거하는 경우 상황 고려하기.
실제 사용자와 검색엔진을 위한 두 종류의 사이트 맵을 준비한다.
이동을 위해 텍스트 링크 사용하기.

검색엔진을 위한 것이 아닌 사용자를 위한 콘텐츠 작성

사용자의 편의를 고려하지 않은 SEO는 스팸으로 차단 될 수 있다.

앵커 텍스트를 잘 작성

텍스트로 링크하려는 페이지에 대해서 설명하자.

내용을 함축하는 텍스트 선택.
간결한 텍스트 작성.

이미지 정보의 최적화

고유한 파일 이름과, alt 속성을 사용해야 이미지를 지원하지 않는 브라우저와 스크린 리더 같은 곳에서 정보를 제공할 수 있다.

보편적인 이미지 포맷 사용과, 이미지를 위한 특정 디렉토리를 설정.

제목 태그의 적절한 활용

제목 태그를 사용하여 중요한 부분을 강조하자.

robot.txt를 효과적으로 활용

내 웹사이트에 들어오는 수많은 robot들에 대응. robot들에게 접근해도 되는 내용과 접근하면 안되는 내용을 정해준다.

robot.txt를 보안도구로 사용하지 않기.
민감한 콘텐츠는 안전한 방법으로 차단하기.
sitemap.xml을 제출해서 더 쉽게 페이지를 찾을 수 있도록 하기.

페이지 랭크

A라는 사이트를 C, D, E 사이트에서 링크를 하고 있고, B라는 사이트가 있다면 A의 페이지 랭크가 더 높기 때문에 우선적으로 표기 된다.
이 때 A라는 사이트에서 F라는 사이트를 링크하게 되면 페이지 랭크를 많이 올린다.

모바일 환경 지원

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

content=”width=device-width : 디바이스의 폭을 기준.
initial-scale=1.0 : 줌이 안된 상태로 시작.

WEB, HTML

HTML . . .

HTML(Hyper Text Markup Language)

문서

정의

태그

속성

태그의 종류

시멘틱 태그

header 태그

nav 태그

link 태그

article 태그

section 태그

main 태그

aside 태그

footer 태그

html 태그(Root 태그)

head 태그

title 태그

meta 태그

body 태그

제목 태그

목록 태그

p 태그

br 태그

img 태그

table 태그

form 태그

anchor(앵커) 태그

인용 태그(blockquote)

오디오 태그(Audio)

비디오 태그(video)

iframe 태그

abbr 태그(abbreviation)

address 태그(address)

pre 태그(preformattedtext)

font 태그(쓰지마!!!)

style 태그 (굉장히 싫어함)

script 태그

SEO(검색엔진 최적화)

title 태그

description 메타 태그 활용

페이지의 URL 구조를 개선하기

사이트 내 이동경로 확실하게 하기

검색엔진을 위한 것이 아닌 사용자를 위한 콘텐츠 작성

앵커 텍스트를 잘 작성

이미지 정보의 최적화

제목 태그의 적절한 활용

robot.txt를 효과적으로 활용

페이지 랭크

모바일 환경 지원

Trending Tags