Front-end.html

[HTML]기본

whitedeveloper 2022. 9. 19. 02:34

HTML문서

-tag로 만들어진다

-전체구성 : html, head, body tag

 

tag속성

- tag는 시작 tag과 종료tag로 쌍을 이루거나  시작 tag만 존재하는 태그도 있다.

- 시작과 종료를 /구분하여 중첩되지않도록 한다.

- 각각의 tag는 속성과 속성의 값이 존재

ex) <a(시작 태그) href(속성 이름) = " http..."(속성값)> ssaft</a(종료태그)>

-html tag에는 어느 tag에나 넣어서 사용할 수 있는 글로벌 속성이 있다

  -class : tag에 적용할 스타일으 이름을 지정 - <div class ="content">...</div>

  -dir: 내용의 텍스트 방향을 지정

  -id : 태그의 유일한 id를 지정, 자바스크립트에서 주로 사용

  -style : 인라인 스타일을 적용하기 위해 사용 - <p style="color:red; text-align : center;">빨강 가운데</p>

  -title : tag에 추가 정보를 지정. tag에 마우스 포인터를 위치시킬 경우 값 표시 -<p><abbr title="Web">wev<abbr>는...</p>

 

하이퍼링크 삽입

<a>태그 사용

<a href="http...">텍스트</a>

새탭으로 열 경우

<a href="새탭 주소http..." target="_blank">텍스트</a>

 

입력

폼 삽입

<form>사용

<form [속성 = "속성값"]> </form>

속성

method - 어떻게 넘겨줄 것 인가

-get : 256-1096byte까지만 전송가능 ,주소창에 사용자가 입력한 내용이 드러남

-post : 입력한 내용의 길이에 제한받지 않고 사용자가 입력한 데이터도 드러나지 않는다.

 

사용자 입력

<input>태그 사용

<input type ="text">텍스트 입력

<input type = "password"> 비밀번호 입력

<  ..type ="submit"  | "reset" value "버튼에 표시한 내용">

 

type ="image" : 이미지 버튼

type="button" : 버튼 형태만 삽입

-이 버튼을 통해 자바스크립트 window.open()함수 실행 - <input type="button" onclick="window.open('XXXX.html')>

 

화면 폼에 보이지않게

type ="hidden"

<input type="hidden" name="이름" value="서버로 넘길 값">