Study_IT

검색엔진 최적화

검색엔진은 웹 페이지를 만들어 공개하면 검색엔진 회사에서 봇(소프트웨어)를 보내어 웹 페이지 html을 다운받아 정보를 분석하여 기준에 따라 분류하여 사용자들이 검색했을 때 그 검색에 적합한 컨텐츠를 제공하는 일을 한다. 

내가 만든 컨텐츠가 사용자들이 검색 했을 때 알맞게 노출되고, 상위에 노출되도록 하기 위해 검색엔진 최적화를 해야 한다.

html코드를 의미론적 태그를 이용하여 잘 작성하는것이 검색 엔진 최적화 이다. 구글에서 제공한  검색엔진 최적화 가이드에도 의미론적 태그를 잘 사용하는것이 검색엔진 최적화를 위한 방법이라고 나와 있다.

검색엔진 최적화를 한다고 검색엔진이 좋아할 만한 것들을 너무 과하게 하면 검색엔진에서 스팸으로 판단하여 차단할 수도 있다.

구글에서 공개한 검색엔진 최적화 가이드는 다음과 같다.

검색엔진 최적화는 유료광고, 애드워즈를 제외한 기본 검색 결과에만 영향을 미친다.

 검색엔진들이 html사이트를 가져가서 분석할 때 title 태그를 이용하여 페이지 제목을 나타내는 것이 좋다. 

title태그는 페이지의 콘텐츠를 정확하게 설명해야 하고, 페이지마다 고유한 title태그를 작성해야 한다. 모든 웹 사이트에서 똑같은 title태그를 작성하는것은 검색엔진의 웹 페이지 분별력을 저하시키는 요소가 될 수 있다.

meta태그의 description 속성을 사용하면 검색 결과의 본문 내용에서 meta태그의 내용이 포함될 수 있다.

 description 속성으로 내용을 작성할 때는 1~2개의 문장이나 짧은 단락으로 내용을 구성하는 것이 좋다.

URL주소를 알아보기 좋은 형태로 만들면 검색엔진 최적화에도 도움이 된다.

아래 예시처럼 URL을 보고 그 페이지의 내용을 담고있는 파일 이름을 상요하는 것이 좋다.

 불필요한 매개변수와 세션 ID가 있는 긴 URL, 'page1.html' 과 같은 일반적인 페이지 이름, 과도하게 긴 파일 이름등은 사용하지 않는 것이 좋다. 또한 파일이 저장된 디렉터리의 구조가 너무 복잡해도 좋지 않다. 그리고 같은 컨텐츠는 한 URL에서만 접속 가능하도록 하는 것이 좋다. 같은 컨텐츠를 갖고 있는 html 파일이 2개 이상있다면 head태그 안에 link태그의 rel 속성에 "canonical"을 지정하고, href속성으로 오리지널 주소를 입력하여 검색엔진이 이 컨텐츠와 같은 오리지널 주소를 보여주도록 할 수 있다.

<link rel="canonical" href="http://localhost/1.html">

 301 리다이렉션을 이용할 수도 있다. 리다이렉션은 어떤 사이트에서 다른 사이트로 방향을 바꿔 보내버리는 것이다. 리다이렉션을 하기 위해서는 php, java등의 서버쪽의 언어를 사용해야 한다.

검색 엔진에서 웹 사이트의 정보를 가져가는 것을 크롤링이라고 하는데 크롤링 할 때 링크를 통해서 웹 사이트의 페이지들을 가져가기 때문에 페이지의 전체 데이터가 링크로 잘 조직화 되어 있어야 검색 엔진에서 사이트들의 데이터를 잘 가져갈 수 있다. 홈페이지는 어떠한 웹사이트의 대문 페이지를 홈페이지라고 하고, 일반적으로 파일 이름을 index.html으로 지정한다. 웹 서버를 통해 웹 사이트를 서비스 할 경우 url 주소에서 index.html을 생략해도 홈페이지에 접속이 가능하다. 이러한 홈페이지에 다른 웹사이트로 접속하는 링크들이 잘 작성이 되어 있어야 한다.

또한 사이트 이동경로를 사용하여 현재 웹페이지와 현재 웹페이지의 상위 경로들을 제공해 주는 것이 검색엔진 최적화에 도움이 된다.

사이트 내에서 쉬운 이동을 위한 권장 사항으로는 자연스러운 계층구조를 만들어야 하며 이동경로를 위해 텍스트 링크를 사용해야 한다. 사이트 이동을 할 때는 자바스크립트나 다른 방법을 이용하면 검색 엔진에서 읽지 못하는 경우가 발생할 수 있기 때문에 하이퍼 텍스트를 사용하여 사이트 이동을 하도록 하는것이 좋다.

 검색 엔진 최적화를 너무 극단적으로 추구하다 보면(예를 들어 meta태그에서 웹 사이트와 관련 없는 내용들도 많이 달아놓은 경우) 검색엔진에서 웹 스팸으로 인지하고 검색되지 않도록 차단할 수도 있다.

 a태그를 앵커라고 한다. 앵커 텍스트를 작성할 때 링크에 대한 대표성이 있는 이름으로 지정해야 한다. 앵커 텍스트를 작성할 때 '페이지', '문서' 등과 같은 일반적인 텍스트의 사용과, 페이지의 url을 텍스트로 사용하는 것을 피해야 한다. CSS등을 사용하여 링크라는것을 인지하기 힘들게 하는 행위도 피해야 한다. 링크는 사용자가 분명히 링크라는 것을 인지해야 하며, 이동되는 페이지에 대한 명확한 정보가 있는 것이 좋다.

이미지 관련 정보는 alt 속성을 이용하여 제공할 수 있다.

<img src="94.png" alt="생활코딩 로고">

alt 속성을 사용하면 이미지가 없거나 깨진 경우 이미지 설명을 웹 페이지에 띄워주며 시각장애인용 스크린 리더에서는 alt속성의 값을 읽어줘서 어떤 내용을 가진 이미지인지 알 수 있도록 할 수 있다. 구글 이미지 검색에서도 검색엔진이 이미지를 더 쉽게 이해할 수 있게 된다.
또한 이미지를 저장할 때는 'images' 라는 이름을 가진 디렉터리에 사용할 이미지들을 모아서 저장하고 사용한다.

이미지를 사용할 때는 일반적인 이름보다는 의미를 가진 이름을 사용하는것이 좋다.

img 태그를 a태그로 감싸서 이미지를 링크로 사용할 때 alt를 사용하면 위에서 설명한 앵커텍스트를 활용한 것과 비슷한 효과를 가질 수 있다.

 제목태그는 웹 페이지에서 중요한 내용을 강조할 때 사용하는 태그이며 블로그나 게시판 등의 에디터를 이용할 때는 제목 기능을 이용하고 웹 소스를 보면 제목 태그가 사용된 것을 확인할 수 있다.

 robots.txt는 나의 웹사이트를 크롤링 하기 위해 들어오는 로봇들의 접근 허용 또는 거부, 허용 범위등의 정보를 명시하는 파일이다.

위의 robots.txt는 네이버의 것이다. 네이버는 Disallow: / 을 사용하고 있는데 /은 네이버의 모든 웹페이지를 의미하며 네이버의 모든 웹페이지는 로봇의 접근을 거부한다는 의미이다. 네이버에서 만들어진 컨텐츠는 다른 검색 엔진에서 접근할 수 없음을 의미한다.

위의 robots.txt는 구글의 것이다. 구글도 로봇의 접근을 허용하는 페이지들은 Allow로, 허용하지 않는 페이지들은 Disallow로 표시하고 있다.

robots.txt는 검색 엔진들에게 요청하는 방식이기 때문에 악의적인 목적을 가진 로봇들은 요청에 응해주지 않기 때문에 보안의 목적으로는 사용하면 안된다. 민감한 페이지들은 다른 방식을 이용하여 원천적으로 차단해야 한다.

 opentutorials의 sitemap 페이지를 보면 다음과 같다.

sitemap은 웹 사이트의 지도로 사용자들에게 사이트 전체에 대한 구조를 보여주는 ui이다. 사이트 맵은 사람들이 보기 쉬운 방식과 기계들(검색엔진, 크롤러 등)이 보기 쉬운 방식의 두 가지 방식의 사이트맵이 있다.

사이트맵은 위와 같이 url 태그 안의 loc 태그 안에 웹 사이트의 페이지들을 각각 입력하고 robots.txt의 Sitemap: 에 만든 사이트맵 페이지의 파일 이름을 넣어주면 된다. 그렇게 하면 검색엔진의 로봇 등이 robots.txt를 확인하고 사이트맵 페이지에 접속하여 사이트 맵 페이지를 읽고 활용하는 작업을 진행한다. 

페이지 랭크는 똑같은 단어를 가진 두 개의 사이트가 있을 때 어떤 사이트를 먼저 검색 결과로 노출할지의 기준이 되는 것이다. 구글은 전 세계의 모든 사이트에 페이지 랭크를 매기고 검색했을때 더 높은 랭크를 가진 사이트가 먼저 노출된다.

A와 B라는 두 사이트가 있고, 다음과 같이 A사이트를 링크하고 있는 다른 사이트들이 많지만, B사이트를 링크하고 있는 다른 사이트 들은 없을 때 페이지 랭크의 순위는 A가 더 높아진다.

이때 A와 B모두 가지고 있는 정보를 검색하게 되면 A의 랭크가 더 높기 때문에 A의 노출 우선순위가 더 높아진다. 

많은 사이트들이 링크하고 있는 사이트라면 그 사이트는 더 좋은 컨텐츠를 갖고 있는 사이트일 확률이 높다 라는 전제가 있는 것이다.

A 사이트가 다른 사이트를 링크를 걸면 A 사이트의 랭크가 높기 때문에 그 사이트의 랭크도 상당히 높이 올라간다. 이는 링크, 하이퍼 텍스트의 중요성을 잘 보여주기도 한다.

meta

meta 데이터는 어떠한 데이터를 설명하는 데이터이다. 웹 페이지를 만들 때 웹 페이지의 전체를 설명하는 메타 데이터가 있다.(웹 페이지의 저자, 제목 등)

이러한 정보들을 표현할 때 쓰는 것이 <meta>태그이다.

지금까지 <meta> 태그의 charset속성에서 "utf-8"을 지정해 준 것은 해당 문서를 저장할 때 인코딩 방식을 utf-8으로 저장된 문서라고 알려주는 것이고, 웹 브라우저는 저 태그를 보고 utf-8으로 해석하여 웹 페이지를 보여준다.

<meta>태그의 name 속성에 "description" 을 지정하고, content속성에 요약된 정보를 작성하면 웹 페이지에는 표현하지 않지만 검색엔진 등에서 사용하는 요약 자료로 사용하도록 할 수 있다.

<meta>태그의 name 속성에 "kewords"를 지정하고, content 속성에 키워드들을 작성하면 웹 페이지를 분류할 때 키워드를 참고해서 분류할 수 있다

<meta>태그의 name 속성에 "author"을 지정하면 content 속성에 웹 페이지의 저자를 작성하여 저자를 설명할 수 있다.

<meta>태그의 http-equiv 속성에 "refresh"를 지정하고, content 속성에 숫자를 지정하면 지정한 숫자 초 만큼 시간이 지난 후에 웹 페이지를 리프레쉬 하는 효과를 사용할 수 있다.

<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="생활코딩의 소개 자료">
    <meta name="kewords" content="코딩, 생활코딩, 프로그래밍, html">
    <meta name="author" content="phulasso">
    <meta http-equiv="refresh" content="30">
</head>
<body>
    생활 코딩은 일반인에게 ~~~~~~ 입니다.
</body>
</html>

의미론적 태그

semantic은 '의미론적인' 이라는 뜻이다. html에 표현되는 정보들이 의미에 맞게 표현할 수 있도록 해주는 태그들을 semantic 태그라고 한다.

html5에서 추가된 sementic 태그들은 다음과 같다.

<html>
<head>
    <title>HTML - 수업</title>
    <meta charset="utf-8">
</head>

<body>
    <h1><a href="index.html">HTML</a></h1>
    <ol>
        <li><a href=1.html>기술소개</a></li>
        <li><a href=2.html>기본문법</a></li>
        <li><a href=3.html>하이퍼텍스트와 속성</a></li>
        <li><a href=4.html>리스트와 태그의 중첩</a></li>
    </ol>

    <h2>hello world</h2>
</body>
</html>

위 html 문서를 의미론적 태그를 사용하여 작성하면 다음과 같다.

<html>
<head>
    <title>HTML - 수업</title>
    <meta charset="utf-8">
</head>

<body>
    <header>
        <h1><a href="index.html">HTML</a></h1>
    </header>
    <nav>
        <ol>
            <li><a href=1.html>기술소개</a></li>
            <li><a href=2.html>기본문법</a></li>
            <li><a href=3.html>하이퍼텍스트와 속성</a></li>
            <li><a href=4.html>리스트와 태그의 중첩</a></li>
        </ol>
    </nav>
    <section>
        <article>
            <h2>hello world</h2>
            본문~~~~~~~~~~~~~~~~~~~
        </article>
        <article>
            <h2>hello world</h2>
            본문~~~~~~~~~~~~~~~~~~~
        </article>
        <article>
            <h2>hello world</h2>
            본문~~~~~~~~~~~~~~~~~~~
        </article>
        <article>
            <h2>hello world</h2>
            본문~~~~~~~~~~~~~~~~~~~
        </article>
    </section>
    <footer>
        <ul>
        <li><a href="privacy.html">개인 보호 정책</a></li>
        <li><a href="about.html">회사소개</a></li>
        </ul>
    </footer>
</body>
</html>

의미론적 태그들을 사용하면서 시각적으로 달라지는 부분들은 없다. 시각적인 기능은 없고 의미만을 갖고 있는 태그들이다.

<header>태그는 웹 페이지에서 헤더에 해당하는 부분, 사이트의 전체의 정보가 표현된 부분에서 사용한다.

<footer>태그는 header 태그가 있는 웹 페이지에는 대부분 있는데 웹 페이지에 대한 부가적인 설명들이 들어가며 웹사이트 제일 하단에 사용한다.

<nav> 태그는 웹 페이지에서 컨텐츠를 탐색할 때 사용하는 네비게이션 역활을 하는 부분에 사용된다.

<article> 태그는 웹 페이지의 본문에 해당하는 부분에서 사용된다. 웹 페이지에 따라서 본문이 여러개이면 article태그를 여러개 사용할 수 도 있다.

<section>태그를 이용하여 여러개의 article태그를 같은 섹션으로 묶어줄 수 있다. section 태그는 header, nav등과 달리 특정한 역할로 정의하기 어려운 섹션들을 묶어줄 때 사용한다.

method

폼의 기능은 브라우저에 사용자가 입력한 정보를 서버쪽으로 전송하는 것이다.

서버로 전송하는 방식에는 get 방식과 post방식이 있다.

get 방식은 정보를 url에 넣어서 서버로 전송하는 방식이다.

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <form action="http://localhost/method.php">
        <input type="text" name="id">
        <input type="password" name="pwd">
        <input type="submit">
    </form>
</body>
</html>

get 방식을 사용하면 위와 같이 url의 ?뒤에 입력한 정보가 들어가서 서버로 전송된다.

get 방식을 사용하면 비밀번호 같이 민감한 정보도 url에 노출되어 위험할 수 있다. 그래서 post 방식을 사용해야 한다. post 방식은 <form>태그에 method속성을 추가하여 속성값을 "post"로 설정한다. 속성값을 "get"로 설정하거나 method속성을 추가하지 않으면 기본적으로 get방식으로 전송된다.

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <form action="http://localhost/method.php" method="post">
        <input type="text" name="id">
        <input type="password" name="pwd">
        <input type="submit">
    </form>
</body>
</html>

post 방식을 사용하면 url 뒤에 아무런 정보도 없이 폼에서 입력한 값을 감춰서 서버로 전송한다. 따라서 굳이 get 방식을 사용할 이유가 없다면 post 방식을 사용하는것이 더 안전할 수 있다.

파일 업로드

웹 페이지에서 파일 업로드는 <input> 태그의 type 속성의 값으로 "file"을 사용한다. <form>태그 안의 <input>태그에서 파일을 업로드 한 뒤, 서버로 전송하면 이후 파일에 대한 처리는 서버에서 처리한다. form으로 서버로 파일을 전송할 때는 <form>태그에서 method속성 값을 "post"로 설정해야 하고, enctype 속성 값을 "multipart/form-data"로 설정해야 한다.

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <form action="http://localhost/upload.php" method="post" enctype="multipart/form-data">
        <input type="file" name="profile">
        <input type="submit">
    </form>
</body>
</html>

파일을 선택하여 제출 버튼을 누르면 form 태그의 action속성에서 지정한 서버로 파일이 전송된다.

정보로서의 HTML

웹의 성장에 따라 인류의 많은 정보들이 웹으로 표현되며 html의 중요성이 더 커지고 있다. 

정보를 더 잘표현하기 위해 여러가지 조치들이 취해졌다.

글꼴 - font (퇴출됨)

현 시점에서 font 태그는 퇴출되었다. 퇴출되었지만 아직까지도 통계적으로 font태그를 사용하는 곳이 많이 존재한다.

<font>태그는 size 속성으로 글자의 크기를 정할 수 있다. 글자 크기는 작은 순서대로 1~7까지 설정할 수 있다. color 속성으로 글씨의 색을 정할 수 도 있다.

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <font size="7" color="red">Hello</font> World
    <font size="7" color="red">Hello</font> World
    <font size="7" color="red">Hello</font> World
    <font size="7" color="red">Hello</font> World
</body>
</html>

font태그는 다른 태그들 처럼 html의 기능에 집중한 태그가 아닌 디자인에 집중되어 있는 태그이다. html을 정보를 전달하는 기능에 집중하여 사용하기 위해 디자인 관련한 태그들은 퇴출시키고 웹 페이지의 디자인을 위한 언어인 CSS를 만들었다. font태그를 사용하게 되면 이 태그는 정보에 대한 설명을 하고 있지 않으며, 이 태그로 디자인을 사용하게 되면 html의 파일 용량도 커지며 정보로써 html 파일을 해석하기 어려워지는 문제점들을 갖고 있기 때문에 사용하지 않는 것이 좋다.

텍스트 입력

<input>태그의 type 속성에 "text"를 입력하면 사용자로부터 텍스트를 입력받는 곳을 만들 수 있다. "password"속성을 입력하면 패스워드 입력란 처럼 사용자의 입력값의 내용을 확인할 수 없도록 할 수 있다.

input태그는 서버로 값을 전송할때 많이 쓰기 때문에 서버에서 값을 인식할 수 있도록 name 속성을 꼭 사용해 줘야 한다.

value 속성에 값을 넣으면 기본 값을 설정해 줄 수 있다.

텍스트 입력값을 여러줄로 받고 싶을 때는 <textarea> 태그를 사용하면 된다. 

cols 속성을 사용하면 폭을 지정해 줄 수 있고, rows속성을 사용하면 높이를 지정해 줄 수 있다.

textarea태그에서 기본 값을 설정해주려면 태그 안에 값을 넣으면 된다.

<html>
<body>
    <form action="">
        <p>text : <input type="text" name="id" value="default value"></p>
        <p>password : <input type="password" name="pwd" value="default value"></p>
        <p>textarea : 
            <textarea cols="50" rows="2">default value</textarea>
        </p>
    </form>
</body>
</html>

선택

사용자들에게 여러가지 선택지 중 하나를 선택하게 하는 방법중 Dropdown List 라는 방법이 있다. Dropdown List는 제한된 공간 안에서 여러개의 선택지 중 하나를 선택하는 방법이다. 

<select> 태그 안에 <option> 태그를 사용하여 선택하는 태그를 만들 수 있다. 이렇게 사용하면 선택지 중에 하나만 선택할 수 있다.

선택지 중에 여러개를 선택하도록 만들고 싶다면 <select> 태그에서 multiple 속성을 사용해야 한다. 이 속성은 속성값이 없이 속성만 사용한다. 여러개를 선택할 때는 Ctrl키를 누른 후 선택할 항목을 클릭하면 된다.

선택한 정보를 서버로 전송하기 위해서는 역시 <form> 태그를 사용해야 한다. 

서버로 전송할 때 선택한 정보를 컴퓨터가 더 이해하기 쉽도록 하려면 value 태그를 이용하여 서버로 전송할 값을 따로 지정해 줄 수 있다.

<html>
<head>
    <meta charest="utf-8">
</head>
<body>
    <form action="http://localhost/color.php">
        <h1>색상</h1>
        <select name="color">
            <option value="red">붉은색</option>
            <option value="black">검은색</option>
            <option value="blue">파란색</option>
        </select>
        <h1>색상2 다중선택</h1>
        <select name="color2" multiple>
            <option value="red">붉은색</option>
            <option value="black">검은색</option>
            <option value="blue">파란색</option>
        </select>
        <input type="submit">
    </form>
</body>
</html>

서버로 전송되는 값을 보면 color2는 여러개의 색상이 전송되어 있고, 모두 value속성에서 지정한 값으로 전송되는 것을 확인할 수 있다.

버튼

<input> 태그의 type 속성에 "submit"을 지정하면 클릭했을 때 서버로 폼의 내용이 전송되는 버튼을 만들 수 있다. 버튼 안의 글자는 value 속성을 이용하여 바꿀 수 있다.

type 속성에 "button"을 지정하면 어떤 효과도 갖지 않는 버튼을 만들 수 있다. 이 버튼은 onclick속성을 이용하여 클릭했을 때의 효과를 지정해 줄 수 있다. 아래 코드에서는 자바스크립트로 클릭시 경고창을 띄우는 기능을 지정하였다.

type 속성에 "reset"을 지정하면 클릭시 폼에 작성한 내용들이 모두 초기화 되는 버튼을 만들 수 있다.

<html>
<head><meta charset="utf-8"></head>
<body>
    <form action="http://localhost/form.php">
        <input type="text">
        <input type="submit" value="전송">
        <input type="button" value="버튼" onclick="alert('hello')">
        <input type="reset">
    </form>
</body>
</html>

위는 버튼을 클릭했을시 자바스크립트로 지정한 경고창이다.

데이터 전송 - hidden

서버로 데이터를 전송할 때 UI가 굳이 필요 없거나 데이터를 몰래 전송해야 할 경우 hidden을 사용한다.

<input>태그의 type속성에 "hidden"을 지정해 주면 된다. value 속성에 서버로 전송할 값을 넣는다.

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <form action="http://localhost/hidden.php">
        <input type="text" name="id">
        <input type="hidden" name="hide" value="phulasso">
        <input type="submit"> 
    </form>
</body>
</html>

웹 페이지를 보면 ui에서 hidden 속성을 사용한 input태그는 보이지 않는다. 하지만 값을 넣어서 전송해보면 다음과 같이 hidden 속성의 value 값이 서버로 전송되는 것을 확인할 수 있다.

컨트롤의 제목 - lable

input 태그의 이름을 정할 때 html에서 권장하는 방법은 <lable>태그를 사용하는 것이다. input 태그의 이름을 <lable>태그로 감싸면 된다.

어떤 input태그의 이름인지 확실하게 명시하기 위해서 input 태그에 id라는 속성을 넣어 값을 지정하고, lable 태그의 for 속성에 input 태그에서 지정한 id값을 넣어야 한다.

아니면 lable 태그로 input태그의 이름과 input태그까지 같이 감싸도 된다.

lable 태그를 사용하게 되면 input 태그의 이름을 클릭해도 해당 input 태그가 선택되고, 체크박스인 경우 이름만 클릭해도 체크박스가 체크된다. 

<html>
<body>
    <form action="">
        <p>
            <label for="id_txt">text :</label> 
            <input id="id_txt" type="text" name="id" value="default value">
        </p>
        <p>
            <label for="password">password :</label> 
            <input id="password" type="password" name="pwd" value="default value">
        </p>
        <p>
            <label>textarea : 
                <textarea cols="50" rows="2">default value</textarea>
            </label>
        </p>
        <p>
            <label>
                <input type="checkbox" name="color" value="red"> 붉은색
            </label>
            <label for="color_blue">
                <input id="color_blue" type="checkbox" name="color" value="blue"> 파란색
            </label>
        </p>
    </form>
</body>
</html>

줄바꿈 - br

p 태그는 줄바꿈의 간격이 고정되어 있기 때문에 <br>태그를 이용하면 자유롭게 줄바꿈을 이용할 수 있다. <br>태그는 내용이 없는 태그이기 때문에 열리는 태그 하나만 있으면 된다. <br>태그의 개수에 따라 줄바꿈 횟수도 결정되어 간격도 더 커진다.

<html>
<body>
    hello<br>
    world<br><br><br>
    br 태그
</body>
</html>

이미지 - img

웹 페이지에 이미지를 넣을 때는 img 태그를 사용한다. imf태그도 닫는 태그 필요 없이, 여는 태그만 있으면 된다.

src 속성으로 이미지 이름을 지정하고, width 속성과 height 속성으로 이미지 크기를 지정한다. 이미지는 원래 크기가 정해져 있기 때문에 width와 height 속성을 모두 사용하면 왜곡되는 현상이 발생할 수 있다. 이 둘중 하나의 속성만 사용하면 그 크기와 맞게 원본 이미지의 비율로 크기를 수정할 수있다.

alt 속성을 사용하면 이미지 손상 등의 이유로 웹 페이지에서 보여줄 수 없을 때 이미지가 깨진 아이콘과 원래 이미지에 대한 설명을 보여줄 수 있다. 

title 속성을 사용하면 이미지에 마우스 커서를 대면 title 속성값을 보여준다.

<html>
<body>
    <img src="mountain.jpg"  height="300" alt="mountain img" title="산이미지">
</body>
</html>

이미지 파일을 불러올 수 없는 경우

표 - table

위와 같은 표도 웹 페이지에 삽입할 수 있다. 

각 칸에 들어가는 내용들은 <td>태그 안에 넣는다. td는 table data라는 의미이다.

각 열은 <tr>태그로 구분한다. tr은 table row라는 의미이다. td태그들은 테이블의 열에 맞게 tr태그 안에 들어간다.

td를 포함한 tr 태그는 <table> 태그 안에 들어간다. table 태그의 border 속성을 이용하여 표의 구분 선도 만들 수 있다. border속성의 값이 커질 수록 선의 굵기가 굵어진다.

<html>
<body>
    <table border="1">
        <tr>
            <td>이름</td> <td>성별</td> <td>주소</td>
        </tr>
        <tr>
            <td>lee</td> <td>남</td> <td>서울</td>
        </tr>
        <tr>
            <td>kim</td> <td>여</td> <td>청주</td>
        </tr>
    </table>
</body>
</html>

과거에는 웹 페이지의 레이아웃을 잡을 때 테이블 태그를 이용하여 표로 구성하기도 했다.

위의 표를 보면 이름, 성별, 주소가 있는 열은 표의 제목에 해당하는 부분이다. 이 열은 tr 태그 밖에 <thead> 태그로 감싸준다. thead태그 안에 있는 각 칸의 데이터들은 <th>태그를 이용하면 글씨를 볼드체로 굵게 만들 수 있다.

그 밑의 두 줄은 표 내용의 본문에 해당한다. 이 열들은 tr 태그 밖에 <tbody> 태그로 감싸준다. 

테이블의 가장 밑 줄은 <tfoot>태그로 감싸주면 된다. thead, tbody, tfoot태그는 표의 모양을 직접적으로 변화시키지 않지만 태그만 보고 표의 구조를 파악하는데 도움을 주며 표를 더 체계적으로 만드는데 도움을 주므로 꼭 사용하는 것이 좋다. 

thead 태그와 tfoot 태그는 테이블의 중간에 들어가도 웹 페이지에 나오는 표를 보면 항상 표의 맨 위와 맨 아래에 위치하는 자리를 결정하는 역할도 한다.

<html>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>이름</th> <th>성별</th> <th>주소</th> <th>회비</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>lee</td> <td>남</td> <td>서울</td> <td>1000</td>
            </tr>
            <tr>
                <td>kim</td> <td>여</td> <td>청주</td> <td>500</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>합계</td> <td></td> <td></td> <td>1500</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

표의 각 칸을 병합하고 싶을 때는 td태그의 속성을 사용하면 된다. rowspan 속성은 속성 값만큼 수직으로 병합하며 병합되는 칸에 해당하는 td태그는 지워줘야 한다. colspan 속성은 속성 값 만큼 수평으로 병합되며 병합되는 칸에 해당하는 td태그는 지워줘야 한다.

<html>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>이름</th> <th>성별</th> <th>주소</th> <th>회비</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>lee</td> <td>남</td> <td rowspan="2">서울</td> <td>1000</td>
            </tr>
            <tr>
                <td>kim</td> <td>여</td> <td>500</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">합계</td> <td>1500</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

입력양식 - form

로그인, 회원가입, 글작성 등을 할 때 서버로 정보를 전송하기 위해 사용하는 글자를 입력하는 곳, 선택하는 곳 등을 form(폼) 이라 한다.

<input>태그를 이용하면 웹 페이지 이용자가 작성할 수 있는 텍스트 상자를 만들 수 있다. input 태그의 type의 속성을 "text"로 지정해 주면 된다.

type 속성을 "password"로 지정해주면 로그인할 때 비밀번호를 작성하는 곳처럼 내용이 보이지 않는 텍스트 상자를 만들 수 있다.

type 속성을 "submit"으로 지정하면 제출 버튼을 만들 수 있다.

이러한 input태그들은 <form> 태그 안에 넣어야 한다. input 태그에 작성한 내용들은 form 태그의 action속성 안에 지정한 서버로 전송한다.

같은 type 속성이 여러 개 있는 경우 서버에서는 각 태그를 구분할 수 없기 때문에 name 속성을 이용하여 구분해준다.

<html>
<body>
    <form action="http://localhost/login.php">
        <p>아이디 : <input type="text" name="id"></p>
        <p>비밀번호: <input type="password" name="pw"></p>
        <p>주소 : <input type="text" name="addr"></p>
        <input type="submit">
    </form>
</body>
</html>

기술소개

HTML : Hyper Text Markup Language

Hyper Text : 링크와 같은기능

Markup : 문법적인 형식 

-> 하이퍼텍스트를 가장 중요한 특징으로 하는 마크업 형식을 가진 프로그래밍 언어

Language : 언어

언어의 핵심은 약속이다. 약속을 공유하고 있기 때문에 서로 소통이 가능하다.

기계를 제어하고 싶으면 사람도 이해할 수 있고, 기계도 이해할 수 있는 약속이 필요하며 이를 언어라고 부른다.

HTML은 웹 브라우저에 표시되는 웹 페이지를 컴퓨터에게 만들어달라고 표현하는 언어이다.

사람과 웹 브라우저 사이에서 모두가 이해 가능한 약속(언어)이다.

웹 브라우저에서 우클릭 -> 페이지 소스 보기를 클릭하면 나오는 문자들이 HTML 코드 이다.

기본 문법

태그 : HTML에서 가장 중요한 문법이며 Markup가 태그와 밀접한 관계를 가진다.

텍스트 파일에 내용을 넣고, 인코딩은 utf-8 로 하고, 확장자는 .html 확장자를 사용하여야 한다.

확장자가 html이면 파일을 더블클릭 했을 때 웹 브라우저가 열린다. 운영체제가 해당 확장자를 열 프로그램을 미리 지정하고 있기 때문이다.

텍스트 편집기에 입력된 내용을 웹 브라우저가 화면에 표시해주고 있다.

<strong> </strong>안에 있는 내용은 글씨가 굵게 강조되어 표시된다. 이러한 것들을 태그라 그러고, <strong>를 시작태그 , </strong>를 닫히는 태그라 한다. 시작 태그에서 닫히는 태그 안에 있는 내용을 강조하는 것이다.

웹 브라우저에서는 텍스트 편집기에서 입력한 줄바꿈이 적용되지 않는다.

위와 같이 <h1>태그를 사용하면 제목을 적을 수 있다. h1은 heading 1 이라는 뜻이다. 웹 브라우저는 h1이라는 태그가 사용되면 굵고 큰 글씨로 표현되고, 줄을 바꾼다고 약속되어 있기 때문에  h1 태그를 작성하면 위와 같이 표현한다. 더 작은 제목을 쓰고 싶으면 h2를 사용하면 된다.

태그는 꺽쇠로 시작하고, 꺽쇠 안 태그 이름에 슬래시를 붙인다.

하이퍼텍스트와 속성

a 라는 태그로 다른 웹사이트의 링크를 달 수 있다. 연결될 웹 페이지의 url을  a 뒤 href=""에 넣어야 한다. href와 같은것을 속성 이라고 한다.

웹 페이지에 링크가 생기며 클릭하면 href속성에 작성한 url로 페이지가 이동된다.

위와 같이 target 라는 속성에 "_blank"를 넣으면 새 탭에서 연결된 url 페이지가 열린다. 속성의 순서는 상관 없고, 속성에 따라서 태그의 기능이 추가된다.

a 태그는 문서와 문서가 연결되는 하이퍼 텍스트를 구현한 것이다. a태그는 anchor에서 가져온 것이다. anchor은 배의 닻이라는 의미를 갖고 있고, 연결할 url에 정박해 있다는 의미일 것이다.

GML -> SGML -> SGMLguid -> HTML의 순서로 HTML이 발전하였다. 

태그의 중첩과 목록

각각의 항목들을 리스트로 표현하려면 <li>라는 태그를 사용한다.

<li> 태그를 사용하면 각각의 항목들이 시각적으로 구분되게 사용할 수 있다.

서로 성격이 같은 태그들을 다음과 같이 <ul>태그로 묶으면 <ul>태그로 묶인 태그끼리 구분할 수 있다.

위와 같이 태그 안에 태그를 넣어 중첩하여 사용할 수도 있다. 위와  같은 방식으로 사용하면 태그가 복잡해질수록 읽기 힘들어 지기 때문에 들여쓰기를 사용하여 가독성을 높여줄 수도 있다.

위에 있는 순서가 있는 리스트로 표현하려면 ul을 ol로 바꿔 주면 된다.

li 는 list의 약자이고, ol은 ordered list의 약자이고, ul은 unordered list의 약자이다.

문서의 구조

<title> 태그를 사용하면 탭의 제목을 정해줄 수 있다. <meta charset="utf-8">을 사용하면 문서가 깨질 경우를 방지할 수 있다.

<title>HTML - 수업</title>
<meta charset="utf-8">

<h1>HTML</h1>
<ol>
    <li>기술소개</li>
    <li>기본문법</li>
    <li>하이퍼텍스트와 속성</li>
    <li>리스트와 태그의 중첩</li>
</ol>

<h2>hello world</h2>

html 문서의 위 두줄은 본문과는 관계없는 부가적인 내용들을 담고 있고, 그 아래부터는 본문의 내용들을 담고 있다. 

html에서는 문서의 부가적인 정보들과 본문에 해당하는 정보들을 각각 다른 태그에 담도록 약속하고 있다.

본문이 아닌 태그들과 본문인 태그들은 head태그와 body 태그로 구분하기로 약속하고 있다.

또한 문서의 가장 바깥에 html 태그를 두어 그 안에 head 태그와 body 태그를 담기로 약속되어 있다.

<html>
<head>
    <title>HTML - 수업</title>
    <meta charset="utf-8">
</head>

<body>
    <h1>HTML</h1>
    <ol>
        <li>기술소개</li>
        <li>기본문법</li>
        <li>하이퍼텍스트와 속성</li>
        <li>리스트와 태그의 중첩</li>
    </ol>

    <h2>hello world</h2>
</body>
</html>

DOCTYPE

DOCTYPE은  html문서의 시작 부분에 <!DOCTYPE html>이라는 태그를 넣어 줘야 한다. 

DOCTYPE은 Document type declaration의 약자이다. 어떤 방식으로 html코드를 작성했는지 브라우저에게 알려주는 문자이다. 어떠한 표준에 따라 문서를 작성했는지 알려주는 역할을 한다.

웹사이트 만들기

<html>
<head>
    <title>HTML - 수업</title>
    <meta charset="utf-8">
</head>

<body>
    <h1><a href="index.html">HTML</a></h1>
    <ol>
        <li><a href=1.html>기술소개</a></li>
        <li><a href=2.html>기본문법</a></li>
        <li><a href=3.html>하이퍼텍스트와 속성</a></li>
        <li><a href=4.html>리스트와 태그의 중첩</a></li>
    </ol>

    <h2>hello world</h2>
</body>
</html>

위와 같은 li 태그의 내용에  a태그로 링크를 걸어서 각 페이지 마다 다른 내용을 웹 브라우저에서 보여주는 웹 사이트를 만들 수 있다. 이 실습에서는 본문은 다 동일하게 하고 페이지 구분을 위해 h2 태그의 내용만 수정하였다. 다음은 기본문법에 링크된 페이지(2.html) 이다.

개발도구

html을 사용하여 웹 페이지를 만들 때 사용하는 도구(프로그램)이다. 개발 도구에는 atom, sublime text, bracket등이 있다. 나는 개발도구로 vscode를 사용할 것이다.

HTML의 변천사와 통계

www.martinrinehart.com/frontend-engineering/engineers/html/html-tag-history.html

위 사이트는 html 버전의 태그들이 어느 버전때 생겨났고, 어느 버전때 사라지게 된 태그들이 있는지 확인할 수 있는 html 연대기 사이트 이다.

www.advancedwebranking.com/html/

위 사이트는 구글에서 분석한 웹 페이지에서 html태그를 얼마나 많이 사용하는가? 어떤 태그들이 웹 페이지에서 많이 등장하는가? 등의 html의 태그에 관련된 통계를 확인할 수 있다.

주요태그

단락 - p

p 태그는 paragraph의 줄임말로 단락을 구분할 때 사용한다. 단락은 줄바꿈과 약간의 여백으로 구분한다.

<html>
    <body>
        <p> 
        Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. 
        It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.
        </p>
        <p>
        Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. 
        HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
        HTML elements are the building blocks of HTML pages.
        </p>
        <p>
        With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. 
        HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. 
        HTML elements are delineated by tags, written using angle brackets.
        </p>
    </body>
</html>

p 태그를 사용하면 웹 페이지에서 단락을 구분할 수 있다. 단락간의 간격은 CSS를 통해서 변경시킬 수 도 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CALC</title>
    <script>
        // 숫자와 연산기호 입력
        function input_num(calc_num){
            document.getElementById("formula").value += calc_num;
        }

        // 사칙연산 수행
        function calculate(result){
           var formula = document.getElementById("formula").value;
           result = eval(formula);

           document.getElementById("result").value = result;
        }

        // 초기화
        function reset(){
            document.getElementById("formula").value = null;
            document.getElementById("result").value = null;
        }


    </script>
</head>
<body>
    <div align='center'>
        <input type="text" name="formula" id="formula" size="30"><br> <!-- size:30 == 180pt -->
        <input type="text" name="result" id="result" size="30"><br>

        <input type="button" value="초기화" style="width: 90pt;" onclick="reset()">
        <input type="button" value="=" size="15" id="result_btn" style="width: 90pt;" onclick="calculate()"><br>

        <input type="button" style="width: 45pt;" id="btn" value="7" onclick="input_num('7')">
        <input type="button" style="width: 45pt;" id="btn" value="8" onclick="input_num('8')">
        <input type="button" value="9" style="width: 45pt;" id="btn" onclick="input_num('9')">
        <input type="button" value="+" style="width: 45pt;" id="btn" onclick="input_num('+')"><br>

        <input type="button" value="4" style="width: 45pt;" id="btn" onclick="input_num('4')">
        <input type="button" value="5" style="width: 45pt;" id="btn" onclick="input_num('5')">
        <input type="button" value="6" style="width: 45pt;" id="btn" onclick="input_num('6')">
        <input type="button" value="-" style="width: 45pt;" id="btn" onclick="input_num('-')"><br>

        <input type="button" value="1" style="width: 45pt;" id="btn" onclick="input_num('1')">
        <input type="button" value="2" style="width: 45pt;" id="btn" onclick="input_num('2')">
        <input type="button" value="3" style="width: 45pt;" id="btn" onclick="input_num('3')">
        <input type="button" value="*" style="width: 45pt;" id="btn" onclick="input_num('*')"><br>

        <input type="button" value="0" style="width: 60pt;" id="btn" onclick="input_num('0')">
        <input type="button" value="." style="width: 60pt;" id="btn" onclick="input_num('.')"> 
        <input type="button" value="/" style="width: 60pt;" id="btn" onclick="input_num('/')"><br>
    </div>
</body>
</html>

문제 설명을 보면 

버튼을 클릭해라! 나는 그것을 잡을 수 없다! 라고 써져 있다.

페이지에 들어가보면 

key를 얻고 싶으면 click me! 라는 버튼을 클릭해야 하는 것 같은데 마우스 포인터 이동에 따라 click me! 버튼이 계속

움직여서 버튼을 클릭 할 수가 없다.

소스코드를 보면 저 버튼의 html 태그에

다음과 같이 버튼을 클릭하면 저 페이지의 get 방식으로 key=7206이 입력된 페이지로 이동함을 확인할 수 있다.

저 값을 url에 주게 되면 flag를 확인할 수 있다.

이번에도 역시 alert(경고) 창을 띄워야 한다.

이미지 버튼을 누르면 이미지 번호에 따라서 url의 frame#뒤의 값이 변한다.

소스코드의 index.html을 보면

num이라는 변수에 이미지 번호를 대입한다.

저 변수의 값에 공격 코드를 주입하면 문제를 해결할 수 있다.

공격 코드 : 4.jpg' onerror='alert(1);'

4.jpg는 존재하지 않는 이미지이기 때문에 alert창을 띄운다.

level 1과 같이 <script>alert(1);</script> 코드를 주입해보면  위 코드가 필터링 된다.

저 문자열에 있는 여러 문자열을 포함하여 시도해보니 '<알파벳' 을 필터링 하는 것 같다.

script 태그를 사용할 수 없기에 image태그를 이용하여 우회할 수 있다.

<img src=1 onerror="alert(1);">태그를 이용하면 지정한 이미지를 로드할 수 없을 때 alert 코드를 실행시킨다.

위 태그를 주입하면 클리어가 가능하다.