4장. HTML

HTML이 뭔가요?

HyperText Markup Language.
- (구글에 치면 바로 나와요. 외울필요 없어요.)
- (친구한테 자랑할려면 외워두세요.)
확장자가 .html로 끝나는 모든 파일들
'<' 얘하고 '>'가 엄청 많이 들어가있음

HTML을 왜 써요?

이 세상에 존재하는 모든 웹사이트가 쓰고 있어요.
웹사이트에선 마치 뼈와 같은 존재죠.
- 물론 살점하고 장기가 있어야 사람처럼 보이지만 웹사이트 만드는 제일 첫단계가 우선 뼈부터 있어야 합니다.

태그 (Tag)

웹사이트의 가장 기본적인 단위

내용물입니다.

하지만 대부분은 태그로 감싸죠.

<태그>내용물입니다.</태그>

하나의 웹사이트엔

이런게 여러개 있어요.

<태그>내용물입니다.</태그>
<태그>이런거입니다.</태그>
<태그>여러개입니다.</태그>

얘내들도 깊이가 있죠.

<태그>
    <태그>내용물입니다.</태그>
    <태그>이런거입니다.</태그>
    <태그>여러개입니다.</태그>
</태그>

깊이도 정신 줄 놓으면

무한으로 정할 수 있습니다.

<태그>
  <태그>
    <태그>한놈</태그>
    <태그>두식이</태그>
    <태그>석삼</태그>
  </태그>
  <태그>
    <태그>인셉션</태그>
    <태그>
      <태그>
        <태그>더 깊이 가야되</태그>
      </태그>
    </태그>
  </태그>
  <태그>정신줄 놨습니다.</태그>
</태그>

속성 (Attributes)

태그는 속성이 있습니다.

<태그 속성>내용물 입니다.</태그>

속성은 이렇게 생겼죠.

name="Nimha"
value="wow"
attack-power="9999"
skill="Ultimate Skill"

속성은 이렇게 달려요.

<태그 name="Nimha">님하</태그>
<태그 value="wow">와우!</태그>
<태그 attack-power="9999">본캐 공격력</태그>
<태그 skill="Ultimate Skill">쓸줄 모르는 거</태그>

여러개 달릴수도 있어요.

<태그 name="Nimha"
    value="wow"
    attack-power="9999"
    skill="Ultimate Skill"
>
    님 캐릭터
</태그>

기본적인 태그들

지금까진 <태그> 라곤 불렀지만

<태그>나는 누구 여긴 어디?</태그>

태그들도 종류가 엄청 다양합니다.

<html></html>
<head></head>
<body></body>
<title></title>
<h1></h1>
<h2></h2>
<h3></h3>
<p></p>
<div></div>
<span></span>

엄청 많으니까 모르는게 보이면

한번 직접 찾아보세요

그래도 자주쓰이는 것들만 쓰이니까 걱정마세요.

얘내들이 가장 기본적으로 쓰여요.

<!DOCTYPE html>
<html>
<head>
    <title>내 생의 첫 웹사이트</title>
</head>
<body>
    와아, HTML 짱짱맨이네요.
</body>
</html>

세상에 존재하는 모든 웹사이트들이

html, head, title, body는 다 쓰고 있어요.

한줄 더 추가 해볼까요?

<!DOCTYPE html>
<html>
<head>
    <title>내 생의 첫 웹사이트</title>
</head>
<body>
    와아, HTML 짱짱맨이네요.
    이렇게 하는 맞나요?
</body>
</html>

엇, 이게 아닌데??

Body태그는 엔터친걸

알아듣질 못하네요

<!DOCTYPE html>
<html>
<head>
    <title>내 생의 첫 웹사이트</title>
</head>
<body>
    <p>와아, HTML 짱짱맨이네요.</p>
    <p>이렇게 하는 맞나요?</p>
</body>
</html>

거의 십중팔구는 긴 글이나 설명같은거

Paragraph Tag안에 들어가요.

문단이 있으면 헤더도 있어야죠?

<!DOCTYPE html>
<html>
<head>
    <title>내 생의 첫 웹사이트</title>
</head>
<body>
    <h1>내 생의 첫 웹사이트</h1>

    <h2>HTML 처음 배워보는 소감 </h2>
    <p>와아, HTML 짱짱맨이네요.</p>

    <h2>HTML 쓰는 방법</h2>
    <p>이렇게 하는 맞나요?</p>
</body>
</html>

헤더는 1부터 6까지 있어요.

참고로 얘도 헤더써요.

<h1 class="ui inverted header">
    Tech Bridge IT Service
</h1>
<h2>Where any of your ideas come true!</h2>

리스트 만드는 방법

<!DOCTYPE html>
<html>
<head>
    <title>내 생의 첫 웹사이트</title>
</head>
<body>
    <h1>내 생의 첫 웹사이트</h1>

    <h2>HTML 처음 배워보는 소감 </h2>
    <p>와아, HTML 짱짱맨이네요.</p>

    <h2>HTML 쓰는 방법</h2>
    <ul>
        <li>손가락을 키보드위에 올려놓는다.</li>
        <li>막 이것 저것 쳐본다.</li>
        <li>완성!</li>
    </ul>
</body>
</html>

리스트에 숫자 넣으려면 <ol>써보세요.

기능적인 태그들

하루 일상.jpg

이게 가능한 이유

<a></a>

앵커 태그라고 읽습니다.

앵커 태그 쓰는 방법

<!DOCTYPE html>
<html>
<head>
    <title>내 생의 첫 웹사이트</title>
</head>
<body>
    <h1>내 생의 첫 웹사이트</h1>

    <h2>HTML 처음 배워보는 소감 </h2>
    <p>와아, HTML 짱짱맨이네요.</p>

    <h2>HTML 쓰는 방법</h2>
    <ul>
        <li>손가락을 키보드위에 올려놓는다.</li>
        <li>막 이것 저것 쳐본다.</li>
        <li>완성!</li>
        <li>
            <a href="http://comic.naver.com/">
                이제 웹툰 보러 가야지
            </a>
        </li>
    </ul>
</body>
</html>

링크 = 웹서핑

<a href="http://comic.naver.com/webtoon/list.nhn?titleId=20853" target="_blank">마음의소리</a>

<a href="/webtoon/detail.nhn?titleId=20853&no=986&weekday=tue">982. 목소리</a>

글만 넣어봤으니

이제 짤방을 올려볼까요?

<img src="http://i.imgur.com/yQWZag7.gif">

Div와 Span

아까 가르친건 10%정도 쓰이고 90%는 이 두개만 씁니다.

<div></div>
<span></span>

Div와 Span은 뭘까요?

<!DOCTYPE html>
<html>
<head>
    <title>내 생의 첫 웹사이트</title>
</head>
<body>
    <div>한놈</div>
    <div>두식이</div>
    <div>석삼</div>
    <span>너구리</span>
    <span>오징어</span>
    <span>육개장</span>
</body>
</html>

그냥 비어있는 애들입니다.

의미는 개발자들이 직접 정의

Form 태그

데이터를 보여줄수만은 없다.

이젠 받아내자

<!DOCTYPE html>
<html>
<head>
    <title>내 생의 첫 웹사이트</title>
</head>
<body>
    <form>
      <div>
        아이디 <input type="text">
      </div>
      <div>
        비밀번호 <input type="password">
      </div>
      <input type="submit" value="회원가입">
    </form>
</body>
</html>