hj2의 정보 저장 공간

1. 유투브 영상 아래 공유하기 클릭

2.퍼가기(< >) 클릭

3.html 코드 복사 <iframe>

4.html 문서에 붙여넣기

옵션 ( 속성 : 0 = 비활성화 / 1 = 활성화 )

autoplay: 영상 자동 재생하기

loop: 반복 재생 설정

controls:컨트롤 바 생성

start: 재생시작 시간 설정

mute: 음소거 설정

콘텐츠 모델

: html5에서 html 요소들의 성격에 따라 그룹을 지어둔 것

1. metadata

콘텐츠의 표현,동작, 다른문서와의 관계등 정보를 포함 하는 요소들 그룹

ex) meta, title, link

(대부분 head 태그 안에 들어가는 요소들)

2. flow

대부분의 요소들 

3. sectioning

아웃라인에 영향을 주는 요소들

ex) nav, article, section

4. phrasing

텍스트 꾸미는 요소 (마크업)

ex) a, i, br

5. embedded

이미지 비디오 등 와부콘텐츠 표현

ex) img

6. interactive

사용자와 상호작용하는 요소

ex) input, form 

시멘틱마크업

브라우저가 코드를 잘 이해할수 있도록 하는 것

= 의미에 맞는 태그와 요소를 사용하고 구조화를 잘해 주는 것

<b>  - 텍스트를 굵게 해 줌(시각적으로만)   -  <strong> 텍스트를 굵게 해 줌(중요하다는 의미 포함)

<i>  -   텍스트를 기울려 줌(시각적으로만) -  <em> 기울려 줌(다른 텍스트에 비해 더 강조한다는 의미 포함)

<u>  -  텍스트에 밑줄을 쳐 줌  -  <ins> 새롭게 추가된 내용이라는 의미 포함

<s>  -  텍스트에 중간선을 그어 줌 -  <del> 삭제된 내용이라는 의미 포함

(참고로 후자들이 시멘틱마크업)

이처럼 브라우저 상에는 같은 것처럼 보이는 태그일지라도 

내포하고있는 의미가 다르므로 시멘틱마크업을 잘 사용하여 코드를 짜야 함

header : 헤더

nav : 메뉴 (카테고리)

main : 이 페이지의 메인 부분

   article : 이 자체만으로 독립적으로 고유한 정보를 나타내는것을 묶어줄 때

   section : 연관있는 내용들을 묶어줄 때

footer : 

block level 

한줄에 하나의 요소만 표시 (가로 영역 박스)

ex)div, p, h

inline level에 포함이 된다 (감싸진다)

inline level

한줄에 여러개 요소 표시 자기내용만큼 자리차지

inline level 요소는 블록레벨에 감싸지지 않음

ex) span, a 

예외)))  <a> 요소는 인라인요소지만 블록 요소에 감싸지는게 가능

폼 요소 = 서버에 데이터를 전달하기 위한 요소

그중 대표적인 <input> 요소를 배우기!

<input> 은 내용이 없는 빈요소지만 type 속성을 통해서 여러 종류로 나타남

기본 구조 <input type="요소">...</input>

text

<input type="text" placerholder="화면에 노출할 내용">

사용자가 입력전에 화면에 미리 노출되는 값의 양식 표현

password

<input type="password>

사용자가 입력하는 값이 노출되지 않음 (비번칠때)

radio

<input type="radio">

중복 선택이 안되는 체크박스

checkbox

<input type="checkbox">

중복선택이 되는 체크박스

submit

<input type="subit">

form값을 전송

resert

<input type="resert">

form 값을 초기화 시킴

image

<input type="image">

form 에 이미지 삽입

butten

<input type="button">

기능이 없다 (커스텀 하여 사용하는 것)

file

<input type="file">

파일을 서버에 올릴때

select

<select>

   <option>......</option>

                 .

                 .

</select>

일명 선택목록 상자

여러 개의 선택지를 리스트 형태로 노출, 그중에 하나 선택 할 수 있음

<option>으로 각 항목 나타내기

option 속성으로 selected 는 선택된 항목을 의미함 (사용자가 선택전 미리 지정된 값이 노출되는 것)

textarea

<textarea row="박스 세로 크기(숫자)" rows="가로 크기">

여러줄을 넣을 수 있는 텍스트 박스

textarea 의 속성 placeholder 은 텍스트 박스에 설명을 미리 노출 시키는 것

button

버튼을 만들때 사용 submit, reset, button 3가지 타입이 있음

빈태그가 아님 

<button type="submit/reset/button>

lable

모든 form요소에 사용 가능

form요소의 이름과 form요소를 연결시켜주기 위해 사용

lable을 사용한것을 클릭했을 경우 해당 form요소를 클릭한 것처럼 동작함

<lable for="id(지정한 이름)">연결시킬것</lable>

<input type="..." id="지정한 이름">

-> 지정한것과 연결시킬것이 이어진다

fieldset

여러 form 요소를 그룹화 시킴 ex) 필수 기입 vs 선택기입

legend 은 fieldset 그룹의 이름을 지정함 (자식중 가장 먼저 나와야함)

form 

: 데이터를 서버로 전송해줌

<form action="..." method="...">

form의 속성 

action  - 데이터 처리를 위한 주소

method - 데이터 전송 방식 지정     

method의 속성 = (get/post) 

기입내용 주소창에 노출vs 비노출

strong 

ctrl + o 파열열기

ctrl + s 저장

HTML이란

HYPER TEXT MARKUP LANGUAGE

HYPER TEXT = 링크

MARKUP LANGUAGE = 프로그래밍 언어의 한종류

태그

   <h1>hello, html</h1>       =요소

시작태그    내용    종료태크

태그마다 의미가 있기에 알맞게 사용해야 된다

속성(attribute)

추가적으로 정보 제공 / 원하는대로 태그의 동작,표현을 조절하는 설정값

시작태그 뒤 공백으로 구분한후 이름="값"

이름과 값사이에 이퀄사인 (=) 으로 이루어짐

값은 쌍따옴표 또는 홀따옴표로 감싼다

시작과 끝만 같은 따옴표를 사용하면 뭘 사용하든 상관 없음

하나의 태그에 여러 속성을 넣을 수 있다 (공백으로 구분)

모든 태그에 사용할 수 있는 글로벌 속성

특정 태그에서만 사용할 수 있는 속성으로 구분

또한 선택적으로 쓸 수 있는 속성

특정 태그에서 필요한 필수 속성으로 구분

태그 중첩 (nesting tags)

태그안에 다른 태그를 선언 가능

태그를 중첩해서 사용시 중첩되는 태그는 부모태그를 벗어나면 안된다

빈태그(empty tag)

시작태그만 존재하고 종료태그는 존재 x

사용 ) 이미지나 비디오등 외부 리소스를 삽입하는 경우

         경로를 지정해주는 것  

공백(space)

두칸이상은 동일 취급? 

주석(comment tags)

화면에 나타나지 않고 코드화면에만 나타나는 일종의 메모를 뜻함

하이픈 기호 (-)

<!-- 메모내용 -->

HTML 문서구조

공통적으로 가져야 하는 태그가 있음

DOCYTYPE - 문서내 최상단에 위치

규칙에 맞게 꼭 선언하여야된다

head 태그 - 문서의 기본설정을 선언하는 태그나

                외부 파일을 연결하는 역할을 하는 태그들이 위치해야하는 태그

meta 태그 - 내용이 없는 빈 태그

body 태그 - 실제 브라우저에 들어가는 태그들