HTML

  1. html
  2. css
  3. javascript
  4. deeperjs
  5. node.js
  6. site
  7. web
  8. wish list

1.HTML

  1. Hyper Text Mark up Language
    Hyper Text를 주요 특징으로 하는 Mark up이라는 형식을 가진 프로그래밍 Language
    language:약속.(사람과 컴퓨터 사이의 약속.사람과 웹브라우저의 약속)
    사람과 사람의 소통, 사람과 기계의 소통(제어)
  2. <!DOCTYPE html>이란?
    DOCument TYPE declaration:문서,형식,선언;
    자신이 작성한 html코드가 어떤 html 코드인지 알려주는코드
    이거는 어떠한 html 표준을 따르고 있는 코드야!
    HTML5에 들어오면서 <!DOCTYPE html>로 단일화 됬다.

2.Tag의 개념

  1. 태그란 설명하는 것.검색엔진들은 태그를 통해 정보를 얻고 자료를 찾아낸다.
    h1태그의 경우 높은 우선순위의 정보적 가치를 가진다.
  2. 태그끼리 포함 및 소속 관계가 있고 Parent/Child태그라 부른다.
    <parent>
        <child></child>
    </parent>
    ex)리스트 태그
    <ul,ol>
      <li></li>
    </ul,/ol>

3.Tag의 종류

  1. <strong></strong>:진한 글씨
  2. <u></u>:밑줄 긋기
  3. <h1></h1>......<h6></h6>:제목
  4. <br>:새로운 줄(닫히는 태그X)
    *특정 글을 수식하지 않아서 영역을 나타낼 필요가 없는 경우 닫는 태그 필요 없음.
    <br><br><br>연속 사용 가능.
  5. <p>:단락.디폴트로 정해진 여백이 있음, 정보적 가치가 있음.
    속성(atribute)을 통해 CSS로 제어 가능. ex)<p style="margin-top:40px;"> :단락의 위 여백을 40픽셀로 한다.
  6. <img src="***.jpg" width="100%"> :단위가 없으면 픽셀로 인식
    <img src="***.jpg" height="300" alt="산 이미지" title="산 이미지">
    :height(높이)나 width(폭)만 설정 했을 경우 자동으로 원본 비율대로 나머지 크기를 조절해준다.
    alt: 사진이 깨졌을 때나 시각장애인을 위해 사진을 대체하는 텍스트 title: 사진 위에 커서를 올렸을 때 나오는 도움말.
  7. <ul,ol></ul,/ol> :unordered list,ordered list
  8. <li></li>:list
  9. <a href="https://html.spec.whatwg.org/multipage/" target ="_blank" title="html5 specification"></a>:
    a=링크 태그. href=HipertextREFerence, _blank=새로운 창 생성, title=링크에 마우스를 가져가면 보이는 이름
  10. table: 엑셀같이 구조화된 정보를 사용하기 위해 사용.과거에 레이아웃을 만드는 용도로 사용.
    <table border="2">
      <thead>
        <tr>
          <th>이름</th>   <th>성별</th>   <th>주소</th>   <th>회비</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>정범석</td>   <td>남</td>   <td rowspan="2">경기</td>   <td>1000</td>
        </tr>
        <tr>
          <td>최유빈</td>   <td>여</td>   <td>500</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">합계</td>   <td>1500</td>
        </tr>
      </tfoot>
    </table>
    table=최상위 부모태그,thead,tbody,tfoot=표의 구성을 나타내는 태그, 코드 위치에 관계없이 순서를 유지한다.
    tr=table row 표의 행을 구분지어줌,td=table data 표의 각각의 데이터를 나타냄
    colspan,rowspan=해당 속성이 포함된 td 크기를 숫자만큼 늘려준다.
    이름 성별 주소 회비
    정범석 남 경기 1000
    최유빈 여 500
    합계 1500
  11. Form:사용자가 입력한 정보를 서버로 전송할 때 사용
    <form action="http://localhost/login.php">
      <input type="text" name="id"> ex)아이디 :
      <input type="password" name="pwd"> ex)비밀번호 :
      <input type="text" name="address"> ex)주소 :
      <input type="submit"> ex)
    </form>
    form이라는 부모태그안에 있는 정보들은 submit을 누르면 action속성에 있는 주소로 보내지고,
    각각의 정보는 name의 값들을 이름으로 가지고 보내지며, url창에 name의 값과 정보가 함께 뜬다. ex)http://localhost/login.php?id=00fanxi&pwd=coding18&address=%EA%B5%AC%EB%A6%AC%EC%8B%9C

    1. 텍스트 입력 form 태그:
      <input type="text" name="id" value="default value">
      <input type="password" name="pwd" value="default value>
      <textarea cols="50" rows="2">default value</textarea>
      ex) textarea :
      value 속성에 여러줄을 넣기 힘들기 때문에 textarea는 value를 쓰지 않는다.

    2. Dropdown list: 제한된 공간 안에 여러개의 선택지를 선택하게함.
      <h1>색상</h1>
      <select name="color">
        <option value="red">붉은색</option>
        <option value="black">검은색</option>
        <option value="blue">파란색</option>
      </select>

      <h1>색상2(다중선택)</h1>
      <select name="color" multiple>
        <option value="red">붉은색</option>
        <option value="black">검은색</option>
        <option value="blue">파란색</option>
      </select>

      value의 값은 해당 option을 선택했을 때 서버로 전송되는 값.
      mulitiple 속성은 값이 없다.
      다중선택을 하려면 Ctrl이나 Shift키를 누른채 선택. 좋지못한 UI.
    3. Button:
      <input type="text">
      <input type="submit" value="전송">
      <input type="button" value="버튼" onclick="alert('hello world')">
      <input type="reset">
      reset=같은 form을 부모태그로 가지는 텍스트 필드의 값을 지운다.
    4. Hidden field:눈에보이는 UI없이 서버쪽으로 데이터를 전송.
      <input type="text" name="id">
      <input type="hidden" name="hide" value="egoing">
      <input type="submit">
      ex) http://localhost/hidden.php?id=&hide=egoing
    5. Label:이름표. 클릭범위도 넓어짐
      1.<label for="id_txt">text : </label> <input id="id_txt" type="text" name="id" value="default value">

      2.<label>text :
        <input id="id_txt" type="text" name="id" value="default value">
      </label>

      1,2번의 결과는 같다. for과 id를 통해 멀리있는 대상을 수식해야하는게 아니라면 2번이 더 간단.

      3.<label>
        <input type="checkbox" name="color" value="red">붉은색
      </label>
    6. Get방식과 Post방식
      <form action="http://localhost/method.php" method="post">
        <input type="text" name="id">
        <input type="password" name="pwd">
        <input type="submit">
      </form>
      get이란 URL에 정보가 뜨는 방식
      post란 URL에 정보가 뜨지 않고 숨겨서 전송되는 방식
      따로 Method를 통해 get/post를 지정하지 않으면 디폴트로 get을 사용
      대부분의 경우 form태그를 통해 서버로 데이터를 전송할 경우 post를 사용한다.
    7. Uplaod
      <form action="http:localhost/upload.php" method="post" enctype="multipart/form-data">
        <input type="file" name="profile">
        <input type="submit">
      </form>
      클라이언트의 파일을 서버로 전송. method는 post, enctype은 multipart/form-data.
      type="file"에는 반드시 name이 있어야 php에서 오류가 안난다.
  12. 정보로서의 HTML
    1. font:퇴출됨
      <font size="8" color="red">Hello</font>world
      Helloworld
      font 태그는 아무런 정보적 가치가 없고 코드를 더럽게 만들고 도움이 되는건 아무것도 없고 그냥 쓰레기
    2. meta:데이터를 설명하는 데이터
      HTML의 태그들도 태그들이 감싸고 있는 데이터를 설명한다는 점에서 메타 데이터라 할 수 있음.
      웹페이지의 전체를 설명하는 데이터 ex) title, arthor, keyword......
      이런 정보들을 통해서 검색을 하고 분류를 할 수 있다.
      <meta charset="utf-8> : character + set 문자의 규칙, 웹페이지가 저장된 방식
      이런 정보들을 컴퓨터에 저장하는 것을 encoding 이라 하고,
      저장된 것을 꺼내는 것을 decoding이라 한다(엄밀하지 않음.)
      <meta name="description" content="코딩의 소개자료">
      이 정보는 웹페이지에는 나오지 않지만 해당 웹페이지에 대한 요약된 자료로 사용될 수 있다.
      어떻게 사용될지는 사용하는 쪽 마음. ex) 검색엔진에서 자료를 찾을 때 나오는 요약본에 사용.
      <meta name="keywords" content="코딩,coding,생활코딩,프로그래밍,html,css,javascript">
      <meta name="author" content="00fani">
      <meta http-equiv="refresh" content="30"> : 잘 사용되지는 않지만 30초마다 해당 웹페이지를 리프레쉬한다.
      결론: Web과 Html을 정보의 관점으로 바라봐야하고 어떻게 하면 더 가치있는 정보로 만들 수 있을 것인가를 고민해야함.
    3. semantic(의미론적 태그)
      Html 5가 되면서 기능은 없지만, 각각의 정보들을 명확하게 표현해주는 태그들이 등장.
      <header></header>
      <foorer></footer>      :웹페이지에 대한 부가 설명, 개인보호정책, 회사소개 등...
      <nav></nav>
      <article></article>
      <section></section>:문서의 구획을 정의. article들을 묶어주는 등.
      <aside></aside>: 광고와 같이 페이지의 내용과는 관계가 적은 내용들.
      그 밖에도 details, figure, main, mark, time 등 이있다.
    4. 검색엔진 최적화
       결론적으로는 html을 의미론적으로 잘 설명하는 것이 기본. 너무 과하면 검색엔진이 차단해버림.
      google의 검색엔진 최적화 기법.
      SEO(Search Engine Optimizing)/
  13. 웹개발자도구
  14. 모바일 지원(viewport)
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  15. 외부문서삽입-iframe: 다른 웹페이지를 그대로 가져오는 기법.
    <iframe src="" frameborder="0" width="500" height="500" sandbox></iframe>
    주의: 보안이 취약하기에 신뢰할 수 있는 웹페이만 가져올 것.
    sandbox: javascript가 실행되는걸 막고 form을 막는다.
  16. HTML5
    1. video
      에전에는 flash에 의존. html5가 나오고 웹브라우저만으로 동영상 재생가능
      <video width="400" controls>
        <source src="videos/small.mp4">
        <source src="videos/small.ogv">
      </video>
      FireFox의 경우 Mp4의 파일형식을 지원하지 않음. 웹브라우저마다 지원하는 코덱이 다르기 때문에 여러개의 소스를 넣으면 웹브라우저가 알아서 자신과 맞는 코덱을 선택한다.
      controls만 적으면 재생버튼 음량버튼 등을 만들어준다.
    2. Can i use
    3. Html5의 입력양식:사용자의 입력 강제 및 유도 , 모바일에서 입력의 편리 제공
      input의 type
      <input type="number" min="10" max="15">:mobile에서도 이 type을 인식하고 숫자 키보드를 띄운다.

      <input type="date" name="datevalue">

      <input type="month" name="monthvalue">

      <input type="week" name="weekvalue">

      <input type="time" name="timevalue">

      <input type="email" name="emailvalue">

      <input type="search" name="searchvalue">

      <input type="tel" name="telvalue">

      <input type="url" name="urlalue">

      <input type="range" name="rangevalue" min="0" max="10">
      1. Html5 입력양식의 속성들
        <form action="login.php" autocomplete="on">
          <input type="text" name="id" palceholder="id를 입력해주세요." autofocus>
          <input type="password" name="password" autocomplete="off" palceholder="비밀번호를 입력해 주세요.">
          <input type="submit">
        </form>
        autocomplete, placeholder, autofocus
      2. Html5 입력 값 체크:유효성 검사

        <form action="register.php">
          <input type="text" name="id" palceholder="id를 입력" required pattern="[a-zA-Z].+[0-9]">
          <input type="email" name="email" palceholder="이메일 입력">
          <input type="submit">
        </form>

        required: 입력을 강제 pattern: 정규표현식으로 입력 형식을 강제. 하지만 사용자의 편리함을 증가시킬 뿐 보안의 효과는 없다.

4.HTML의 기본 구조

<!doctype html>--->관용적으로 쓰임
<html>--->최상위 태그(이 태그안은 html임을 나타냄)
  <head>--->상위 태그(html의 구조를 나타냄)
     <title></title> --->Webpage위에 있는 제목
     <meta charset="utf-8"> --->meta는 방법,charset은 규칙을 말하며 utf-8은 언어를 읽는 방식을 말한다.
  <head>
  <body>--->상위 태그(html의 구조를 나타냄)
     contents
  </body>
</html>

5.개발도구

  1. emmet
    ol>li*5 = ol태그 밑에 li태그 5개가 있다.
  2. 개발도구를 배우는 것은 본질적인 것. 선택의 문제가 아니다.

Tips

  1. 부모자식 관계에서 들여쓰지 않아도 작동하지만 들여쓰는 습관.
  2. <!--과-->사이에 있는 코드는 컴퓨터가 무시한다.
  3. 항상 코드를 쓸때 열리는 태그를 쓰자 마자 닫히는 태그를 쓰는 습관
  4. Ctrl + / = 주석
  5. Ctrl + O = 디렉토리 열기
  6. 동영상 가져오는 법
    <iframe>으로 시작하는 태그 가져오기
  7. 댓글
    백엔드 + 데이터베이스 + 스팸차단기능 + 이미지 기능 + SNS연동 +...
    직접 구현이 힘들다. DISQUS,LiveRe(무료):웹서버를 통해서만
  8. 채팅 기능 : tawk
  9. 웹페이지 분석기 : Analytics(모바일 앱도 가능)
  10. 맥에서 따옴표 자동 변화 해제하기: 편집 - 대체 - 스마트 인용 체크 해제
  11. 공부를 할때 통계를 통한 과학적인 접근으로 하자