2017.07.18(화)

html-2

1. script 태그

경로 파악
- 관심사가 같은 파일끼리 분리하는 것

<script src="main.js"></script>

파일을 분리하는 이유 : 유지보수

2. meta tag

데이터를 위한 데이터
머신에게 알려주기 위한 데이터

descrition : 설명
keywords : 검색엔진 검색 단어
author : 제작자, 회사 등 

http-equiv="refresh" content="30"
 - 30초 마다 웹페이지 refresh 기능 (사용금지, 깜박임 원인)

<참고>
utf-8 : 다국어 지원
웹페이지를 깜박이는 현상은 없는것이 좋다.

3. body tag

body tag는 HTML 문서의 내용을 나타내며 웹페이지에 단 하나만 존재한다. 메타데이터를 제외한 웹페이지를 구성하는 대부분의 요소가 body 요소 내에 기술된다.

4. Text tag

4.1. herding : 제목 tag

h1 
h2
h3
h4
h5
h6

4.2. ``

글자를 두겁게 해주는 태그
bold

4.3. ``

강조 의미
시멘틱 요소

시멘틱한 태그의 사용을 위해 보다 을 사용하기를 권장한다.

4.4. ``

Italic체를 지정한다. 의미론적(Semantic) 중요성의 의미는 없다.

4.5. ``

emphasized(강조, 중요한) text를 지정한다. i tag와 동일하게 Italic체로 표현된다. 의미론적(Semantic) 중요성의 의미를 갖는다.

4.6. ``

small text를 지정한다.

4.7. ``

highlighted text를 지정한다.
의미론적 중요성의 의미는 없다.

4.8. `<del>`

취소선
css에서 가능하다.

4.9. `<ins>`

언더라인

4.10. ``

sub : 텍스트를 아래로
sup : 텍스트를 위로

태그의 줄바꿈
block요소, inlink요소 (css수업으로 배움)

5. 본문태그

5.1. ``

중요도가 높은 태그
단락을 나타낸다.

5.2. ` `

줄바꿈
빈요소
사용하지 않는다.

<참고>
HTML은 1개 이상의 연속된 공백(space)과 1개 이상의 연속된 줄바꿈(enter)을 1개의 공백으로 표시한다.

5.3. `<pre>`

형식화된(preformatted) text를 지정한다. pre 태그 내의 content는 작성된 그대로 브라우저에 표시된다.

5.4. ` `

스페이스 마크업

<참고>
HTML은 관대한 언어이다. 하지만 문법에 맞게 사용해야 한다.

5.5. `<hr>`

수평줄을 삽입한다.

5.6. `<q>`

짧은 인용문(quotation)을 지정한다. 브라우저는 인용부호(큰따옴표/quotation marks)로 q 요소를 감싼다.

5.7. `<blockquote>`

긴 인용문 블럭을 지정한다. 브라우저는 blockquote 요소를 들여쓰기한다. css를 이용하여 다양한 style을 적용할 수 있다.

6. Link

HyperText의 Hyper는 컴퓨터 용어로서 텍스트 등의 정보가 동일 선상에 있는 것이 아니라 다중으로 연결되어 있는 상태를 의미한다.

이것은 HTML의 가장 중요한 특징인 link의 개념과 연결되는데 기존 문서나 텍스트의 선형성, 고정성의 제약에서 벗어나 사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 제공한다. 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 이 기능을 하이퍼링크(hyper link)라 한다.

HTML link는 hyperlink를 의미하며 a(anchor) tag가 그 역할을 담당한다.

6.1. `href` 어트리뷰트

<a href="http://www.google.com">Visit google.com!</a>

href 어트리뷰트는 이동하고자 하는 파일의 위치(경로)를 값으로 받는다. 경로(path)란 파일 시스템 상에서 특정 파일의 위치를 의미한다.

6.2. 디렉터리(Directory)

작업디렉터리 : 작업 중인 파일의 위치한 디렉터리

절대경로 : 루트 디렉터리 중심
  - 웹사이트 주소
상대경로 : 나를 중심
  - 파일경로

<html>
  <body>
    <a href="http://www.google.com">URL</a><br> : 절대경로
    <a href="html/my.html">Local file</a><br> : 폴더이동
    <a href="file/my.pdf" download>Download file</a><br> : 다운로드 기능 활성화
    <a href="#">fragment identifier</a><br> : 파일 내 이동
    <a href="mailto:someone@example.com?Subject=Hello again">Send Mail</a><br>
    <a href="javascript:alert('Hello');">Javascript</a>
  </body>
</html>

페이지 내 위치 이동

<h2 id="top">Top of page!</h2>
<p>......
<a href="#top">Go to top</a>

`target

target = "_self" : 기본값
target = "_blank" : 새 창 열림

7. 목록 (list)

7.1. 순서없는 목록 (Unordered List)

<h2>순서없는 목록 (Unordered List)</h2>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
 </ul>

7.2. 순서있는 목록 (Ordered List)

type
- 1 : 숫자 (기본값)
- A : 대문자 알파벳
- a : 소문자 알파벳
- I : 대문자 로마자
- i : 소문자 로마자

<ol type="I">
  <li value="2">Coffee</li>
  <li value="4">Tea</li>
  <li>Milk</li>
</ol>

시작번호 지정 : start

<ol start="3">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

역순 : reversed

<ol reversed>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

7.3. 중첩 목록

<html>
  <body>
    <h2>중첩 목록</h2>
    <ul>
      <li>Coffee</li>
      <li>Tea
        <ol>
          <li>Black tea</li>
          <li>Green tea</li>
        </ol>
      </li>
      <li>Milk</li>
    </ul>
  </body>
</html>

8. table

행을 만들어 준다. <tr>
열(컬럼)을 만들어준다. <td>
행의 제목을 만들어준다. <td>

rowspan : 해당 셀이 점유하는 행의 수 지정
colspan : 해당 셀이 점유하는 열의 수 지정

열은 행안에 들어가 있어야 한다.

    <table border="1px">
    <tr>
      <th colspan="2">Subject</th>
      <th>john Doe</th>		
      <th>Jane Roe</th>
    </tr>
    <tr>
      <td rowspan="2">Biology</td>
      <td>Practical</td>		
      <td>A</td>
      <td>A+</td>
    </tr>
    <tr >
      <td>Theory</td>
      <td>A+</td>
      <td>A</td>
    </tr>
    <tr>
      <td rowspan="2">Chemistry</td>
      <td>Practical</td>		
      <td>B</td>
      <td>C</td>
    </tr>
    <tr >
      <td>Theory</td>
      <td>A</td>
      <td>C+</td>
    </tr>
        <tr>
      <td rowspan="2">Physics</td>
      <td>Practical</td>		
      <td>A</td>
      <td>A</td>
    </tr>
    <tr >
      <td>Theory</td>
      <td>A-</td>
      <td>A-</td>
    </tr>
  </table>

8. Image

src : 이미지 파일 경로
alt : 이미지 파일이 없을 경우 표시되는 문장
width : 이미지의 너비 (CSS에서 지정하는 것이 일반적)
height : 이미지의 높이 (CSS에서 지정하는 것이 일반적)

<body>
  <img src="assets/images/doug.jpg" alt="Smiley face" width="100">
  <img src="assets/images/wrongname.gif"  alt="이미지가없습니다.">
</body>

9. Audio

src : 음악 파일 경로
preload : 재생 전에 음악 파일을 모두 불러올 것인지 지정
autoplay : 음악 파일을 자동의 재생 개시할 것인지 지정
loop : 음악을 반복할 것인지 지정
controls : 음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다.

<body>
  <audio src="assets/audio/Kalimba.mp3" controls></audio>
</body>

지원 파일
- Browser MP3 Wav Ogg
- Internet : MP3
- Chrome : MP3, Wav, Ogg
- Firefox : MP3, Wav, Ogg
- Safari : MP3, Wav
- Opera : MP3, Wav, Ogg

<audio controls>
  <source src="assets/audio/Kalimba.mp3" type="audio/mpeg">
  <source src="assets/audio/Kalimba.ogg" type="audio/ogg">
</audio>

10. Video

src : 동영상 파일 경로
poster : 동영상 준비 중에 표시될 이미지 파일 경로
preload : 재생 전에 동영상 파일을 모두 불러올 것인지 지정
autoplay : 동영상 파일을 자동의 재생 개시할 것인지 지정
loop : 동영상을 반복할 것인지 지정
controls : 동영상 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 - 브라우저마다 차이가 있다.
width : 동영상의 너비를 지정
height : 동영상의 높이를 지정
지원파일
- Internet Explorer : MP4
- Chrome : MP4, WebM, Ogv
- Firefox : MP4, WebM, Ogv
- Safari : MP4
- Opera : MP4, WebM, Ogv

<video width="640" height="360" controls>
  <source src="assets/video/Wildlife.mp4" type="video/mp4">
  <source src="assets/video/Wildlife.webm" type="video/webm">
</video>

감싸는 태그의 필요성

한번에 조정하기 위해

10. form

<form> : 사용자가 입력해야하는 항목을 감싸서 전송하였을때, 유저가 입력한 정보를 서버로 전송하는 기능
속성
- action (URL) : 입력 데이터(form data)가 전송될 URL 지정
- method (get / post) : 입력 데이터(form data) 전달 방식 지정
  - get : url뒤로 문자열로 서버로 전송, 보완취약
  - post : body안에 넣어서 서버로 전송, 약간느림
- 입력값은 value에 입력된다.
- name : key

<body>
  <form action="http://jsonplaceholder.typicode.com/users" method="get">
    ID: <input type="text" name="id" value="1"><br>
    username: <input type="text" name="username" value="Bret"><br>
    <input type="submit" value="Submit">
  </form>
</body>

11. input

input 태그는 form 태그 중에서 가장 중요한 태그로 사용자로부터 데이터를 입력받기 위해 사용된다. input 태그는 다양한 종류가 있는데 type 속성에 의해 구분된다. form 태그 내에 존재하여야 입력 데이터를 전송할 수 있으나 ajax를 사용할 시에는 form 태그 내에 존재하지 않아도 된다. 서버에 전송되는 데이터는 name 어트리뷰트를 키로, value 어트리뷰트를 값으로하여 key=value의 형태로 전송된다.
button : 버튼 생성
checkbox : checkbox 생성
color : 컬러 선택 생성
date : date control (년월일) 생성
datetime : date & time control (년월일시분초) 생성. HTML spec에서 drop되었다.(표준탈락)
datetime-local : 지역 date & time control (년월일시분초) 생성
email : 이메일 입력 form 생성. subumit 시 자동 검증한다.
file : 파일 선택 form 생성
hidden : 감추어진 입력 form 생성
image : 이미지로 된 submit button 생성
month : 월 선택 form 생성
number : 숫자 입력 form 생성
password : password 입력 form 생성
radio : radio button 생성
range : 범위 선택 form 생성
reset : 초기화 button 생성
search : 검색어 입력 form 생성
submit : 제출 button 생성
tel : 전화번호 입력 form 생성
text : 텍스트 입력 form 생성
time : 시간 선택 form 생성
url : url 입력 form 생성
week : 주 선택 입력 form 생성

12. select

복수개의 리스트에서 복수개의 아이템을 선택할 때 사용한다. 함께 사용할 수 있는 태그는 다음과 같다. 서버에 전송되는 데이터는 select 요소의 name 어트리뷰트를 키로, option 요소의 value 어트리뷰트를 값으로하여 key=value의 형태로 전송된다.
select : select form 생성
option : option 생성
optgroup : option을 그룹화한다.
disabled : 선택하지 못하도록 설정

13. textarea

textarea 태그는 여러 줄의 글자를 입력할 때 사용한다.

<body>
  <textarea name="message" rows="10"(높이) cols="30"(넓이)>Write something here</textarea>
</body>

14. button

button 태그는 클릭할 수 있는 버튼을 생성한다. <input type="button">과 유사하지만 input 태그는 빈 태그인 반면 button 태그는 그렇지 않다. 따라서 button 요소에는 텍스트나 이미지 같은 콘텐츠를 사용할 수 있다. type 속성은 반드시 지정하는 것이 바람직하며 속성값으로 button, reset, submit를 지정할 수 있다.

위IE6, IE7에는 ‘foo’ 대신 ‘Click me’를 서버로 전송한다. 따라서 오래된 IE를 지원해야 한다면 input 태그를 사용하는 것이 바람직하다.

15. filedset / legend

fieldset 태그는 관련된 입력 양식들을 그룹화할 때 사용한다. legend 태그는 filedset 태그 내에서 사용되야 하며 그룹화된 filedset의 제목을 정의한다.

<body>
    <fieldset>
      <legend>Login</legend>
      Username <input type="text" name="username">
      Password <input type="text" name="password">
    </fieldset>
</body>

16. Structure 공간분할태그

header : 헤더를 의미한다
nav : 네비게이션을 의미한다
aside : 사이드에 위치하는 공간을 의미한다
section : 본문의 여러 내용(article)을 포함하는 공간을 의미한다
article : 분문의 주내용이 들어가는 공간을 의미한다
footer : 푸터를 의미한다

17. CSS 개요

하나하나의 요소들이 지정된 위치에 정확히 위치할 수 있도록 하는 것 중요!!
상단의 명령이 하위요소까지 영향을 주기 때문에 복잡해질 가능성이 있다.
개발자의 입장에서 바라본 CSS란 무엇인가?
임무 : 어떻게 보여줄 것인가?
명칭
- 선택자, 셀렉터(selector)
- 속성(property)
- 속성-값(property-value)
- 선언(declaration)
- 룰셋(role-set) : 선택자+속성+속성값을 통틀어 이르는 말
- 키워드(keyword) : 미리 문법상에 지정된 값 (ex) color:orange;
html -> parsing -> DOM 제작 (메모리에 기억하고 있음)
css -> parsing -> CSSOM 제작 (메모리에 기억하고 있음)
- 결과적으로 html + css = Render tree 생성 -> Display(최종)

17.1. Link style

<head>
  <link rel="stylesheet" href="css/style.css">
</head>

17.2. Embedding style

<style>
  h1 { color: red; }
  p  { background: aqua; }
</style>

17.3. Inline style

HTML요소의 style 프로퍼티에 CSS를 기술하는 방식이다.
JavaScript가 동적으로 CSS를 생성할 때 사용하는 경우가 있다. 하지만 일반적인 경우 Link style을 사용하는 편이 좋다.

<body>
  <h1 style="color: red">Hello World</h1>
  <p style="background: aqua">This is a web page.</p>
</body>

17.4. Reset CSS 사용하기

모든 웹 브라우저는 디폴트 스타일(브라우저가 내장하고 있는 기본 스타일)을 가지고 있어 CSS가 없어도 작동한다.
웹브라우저에 따라 디폴트 스타일이 상이하고 지원하는 tag나 style도 제각각이어서 주의가 필요하다.
단순하게 좋다.
부트스트랩과 같이 프로임워크를 사용하면 사용할 필요가 없다.

Eric Meyer’s reset (추천)
normalize.css

* TIP

서버와 클라이언트

역활

클라이언트 : 요청하는 것

서버 : 공급하는 것

데이터베이스 : 파일들의 집합

통신

request : 자료 요청

response : 응답 회신

localhost:3000

localhost(로컬호스트) : 서버와 연결하는 것과 같이 개인 컴퓨터에서 작업 할 수 있도록 하는 개발환경

내 컴퓨터에 안에 있는 서버와 통신하다.

도메인(호스트) : 서버의 별명

3000 : 포트 번호

프로토콜 : 약속

Files

0718.md

Latest commit

History

0718.md

File metadata and controls

html-2

1. script 태그

2. meta tag

3. body tag

4. Text tag

4.1. herding : 제목 tag

4.2. <b>

4.3. <strong>

4.4. <i>

4.5. <em>

4.6. <small>

4.7. <mark>

4.8. <del>

4.9. <ins>

4.10. <sub / sup>

5. 본문태그

5.1. <p>

5.2. <br>

5.3. <pre>

5.4. &nbsp;

5.5. <hr>

5.6. <q>

5.7. <blockquote>