0422

0422
HTML
- HyperText Markup Language
* HyperText: 문서의 링크를 클릭하면 연결된 다른 문서로 이동할 수 있는 기능을 제공하는 텍스트
* Markup: 문서의 어느 부분이 제목이고, 어느 부분이 본문이고, 어느 부분이 링크인지를 표시하기 위해서 특별한 기호(마크업, 태그)이 사용된다.
- 웹에서 웹 문서간에 빠르게 이동할 수 있는 문서를 만들 때 사용되는 언어가 HTML이다.

태그
- 태그는 '<'와 '>'로 구성된다.
*

문서의 제목을 포함한다.

내용을 포함한다.

* : 현재 문서가 html5 작성 규칙에 맞춰서 작성된 웹 문서임을 나타낸다. * ~ : 웹 문서의 시작과 끝을 나타낸다. * ~ : 웹브라우저가 웹 문서를 해석하는데 필요한 정보를 입력하는 부분이다. 이 부분에 있는 정보는 실제 문서 내용이 아니기 때문에 화면에 표시되지 않는다. * ~

: 실제로 웹 브라우저에 표시되는 내용을 포함한다. 우리가 배우는 거의 대부분의 태그는 태그 안에 들어간다. *
: 줄 바꾸기. 콘텐츠를 포함하지 않음. 열자마자 닫는다. 브라우저: html 문서 -> 파싱(해석) -> Document 객체 생성 -> 태그마다 엘리먼트 객체 생성 -> 렌더링 -> 화면에 표시

0423
블록 엘리먼트(block element)와 인라인 엘리먼트(inline element)
- html 태그(엘리먼트)는 블록 엘리먼트와 인라인 엘리먼트로 나뉜다.
- 블록 엘리먼트는 인라인 엘리먼트로, 인라인 엘리먼트는 블록 엘리먼트로 바꿀 수 있다.
- 블록 엘리먼트
- 언제나 새로운 줄에서 시작한다.
- 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다.
- 폭을 지정할 수 있다.
- 블록 엘리먼트 내의 콘텐츠를 왼쪽/오른쪽/가운데 정렬시킬 수 있다.
- div, h1 ~ h6, p, table, ul, ol, li, dl, dt, dd, form
- 인라인 엘리먼트
- 콘텐츠의 흐름을 끊지 않는다.
- 새로운 줄을 만들지 않고, 콘텐츠가 필요한 너비만 차지한다.
- span, a, img, strong, em, input, select, textarea, label, button
* 인라인 엘리먼트는 단독으로 표시되지 않는다.
인라인 엘리먼트는 블록 엘리먼트 안에 있어야 된다.

div, span 엘리먼트
- 통용 컨테이너 태그(엘리먼트다).
- CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않는다.
- div 태그
- 블록 엘리먼트다.
- div나 다른 블록 엘리먼트, 인라인 엘리먼트들을 콘텐츠로 가진다.
- 여러 엘리먼트(태그)를 묶어서 스타일의 지정을 돕는 용도로 사용된다.
- 여러 엘리먼트(태그)를 묶어서 특정 영역으로 구분하는 용도로 사용된다.
- span 태그
- 인라인 엘리먼트다.
- 텍스트 콘텐츠를 묶어서 스타일의 지정을 돕는 용도로 사용된다.

id, class 속성
- 모든 엘리먼트(태그)는 id속성과 class속성을 가질 수 있다.
- id 속성은 해당 엘리먼트(태그)를 다른 엘리먼트와 구별하기 위해서 사용한다.
* html문서 안에 동일한 id속성값을 갖는 엘리먼트가 없어야 한다.
* id 속성값으로 특수문자를 사용할 수 없다.("_"와 "-"는 사용가능하다.)
* id 속성값은 문자(영어 대소문자)와 숫자를 사용할 수 있고, 숫자로 시작할 수 없다.
- class 속성은 엘리먼트(태그)에 동일한 스타일을 적용할 목적으로 사용한다.
* html 문서 안에 동일한 스타일이 적용될 엘리먼트는 동일한 class 속성값을 가지게 한다.
* class 속성값은 하나 이상의 값을 가질 수 있다.

버튼을 생성할 때 사용한다.

- input 태그
    - type 속성값에 따라서 다양한 입력 콘트롤을 생성할 수 있다.
    - 주요 타입 속성
        type="hidden"       사용자에게 보이지 않는 필드를 만든다.
        type="text"          한 줄 입력 텍스트필드를 만든다.
        type="password"   비밀번호 입력필드를 만든다.
        type="date"         날짜 입력 필드를 만든다.
        type="time"         시간 입력 필드를 만든다.
        type="number"     숫자 입력 필드를 만든다.
        type="email"        이메일 입력 필드를 만든다.
        type="url"            url 입력 필드를 만든다.
        type="file"           파일을 첨부할 수 있는 필드를 만든다.
        type="checkbox"  주어진 항목을 2개 이상 선택할 수 있는 체크박스를 만든다.
        type="radio"         주어진 항목에서 하나만 선택할 수 있는 라디오버튼을 만든다.
        type="submit"       입력된 값을 서버로 제출하는 버튼을 만든다.
        type="reset"        폼의 입력값을 원래 상태로 되돌리는 버튼을 만든다.
        type="button"       버튼을 만든다.
    - 주요 속성
        - type 속성: 입력 콘트롤의 형식을 지정한다.
        - name 속성: 입력된 값을 서버로 전송할 때 사용된다(필수).
        - id 속성: 입력 콘트롤을 식별하기 위해서 사용된다.
        - readonly 속성: 읽기 전용 입력 콘트롤로 만든다. 값을 변경할 수 없다.
        - disabled 속성:입력 콘트롤을 비활성화 시킨다. 값을 변경할 수 없고, 해당 입력 콘트롤의 같은 서버로 전송되지 않는다.
        - placeholder: 입력값 힌트를 제공한다.
        - maxlength: 최대 입력 문자 개수를 지정한다.
        - value: 입력값을 지정한다.
        - checked: 라디오버튼, 체크박스를 미리 선택되게 한다.

- select 태그
    - 콤보박스 생성
    - 사용자가 값을 입력하는 대신 나열된 값 중에 하나를 선택하도록 하는 드롭다운 목록을 생성한다.
       <select name="서버에전달할이름">
           <option value="값1">내용</option>
           <option value="값2">내용</option>
           <option value="값3">내용</option>
           <option value="값4">내용</option>
       </select>
        * 서버에는 선택된 옵션의 value에 설정된 값이 전달된다. 내용이 전달되지 않는다.
        - option태그의 주요 속성
            value: 서버로 전달될 값을 설정한다.
            disabled: 해당 항목을 선택하지 못하게 한다.
            selected: 해당 항목이 미리 선택되어 있게 한다.

    - textarea 태그
        - 여러 줄을 입력할 수 있는 텍스트영역을 만든다.
        - 주요 속성
            rows: 텍스트 영역의 세로 길이(행의 길이)를 설정한다.
            cols: 텍스트 영역의 가로 길이(문자 길이)를 설정한다.

저작자표시

'html' 카테고리의 다른 글

sample19~27(div, span, id, class, form 등)  (0)	2019.06.09
sample14~18(link, text, element)  (0)	2019.06.09
sample8~13 (table, img)  (0)	2019.06.09
sample1~7(title, text, list, table)  (0)	2019.06.09