Category/FrontEnd

[HTML] 2. 하이퍼링크와 form

developer__Y 2023. 11. 7. 21:36

웹 문서와 이미지

웹 페이지에서 사용할 수 있는 이미지 파일은 크기가 크지 않으면서

화질은 좋게 유지해야 하기 때문에 몇 가지 파일 형식만 사용 할 수 있다.

→ Gif , JPG,JPEG,PNG

<img>태그

alt 속성 : 이미지가 깨졌을때 표시할 문자

src 속성 : 이미지 파일 경로

width,height 속성 : 가로 세로 크기 조정

<figure> <figcaption> 이미지에 설명글 붙이기.

<figure>태그에 <img>태그를 넣어 표현하기도 한다.

링크 만들기

<a href=””> 태그

반드시 href속성을 함께 사용해서 어떤 대상으로 연결하는지 알려주어야 한다.

target 속성 : 새 탭에서 링크 연다.

https://www.google.com>” target=”_blank”>

한 페이지 안에서 <a>태그를 통해 점프하기 - 앵커

웹 문서와 이미지

웹 페이지에서 사용할 수 있는 이미지 파일은 크기가 크지 않으면서

화질은 좋게 유지해야 하기 때문에 몇 가지 파일 형식만 사용 할 수 있다.

→ Gif , JPG,JPEG,PNG

<img>태그

alt 속성 : 이미지가 깨졌을때 표시할 문자

src 속성 : 이미지 파일 경로

width,height 속성 : 가로 세로 크기 조정

<figure> <figcaption> 이미지에 설명글 붙이기.

<figure>태그에 <img>태그를 넣어 표현하기도 한다.

링크 만들기

<a href=””> 태그

반드시 href속성을 함께 사용해서 어떤 대상으로 연결하는지 알려주어야 한다.

target 속성 : 새 탭에서 링크 연다.

https://www.google.com>” target=”_blank”>

한 페이지 안에서 <a>태그를 통해 점프하기 - 앵커

 

웹에서 만나는 폼

  • 사용자가 웹 사이트로 정보를 보낼수 있는 모든 요소들은 form이다.
  • 모두 데이터베이스를 기반으로 하여, 정보를 저장하거나 검색한다.

form의 동작방식

1.사용자가 아이디 와 비밀번호 에 정보 입력  로그인 클릭 2) 사용자가 입력한 아이디와 비밀번호가 웹 서버로 보내짐 3) 서버는 자신이 가지고 있는 사용자 데이터베이스를 뒤져서 사용자 가 보내온 아이디와 비밀번호가 서로 일치하는 정보인지 확인하고 그 결과를 브라우저에 보냄 4) 회원이라면 로그인한 후의 결과 화면이 나타나고 , 아니라면 로그 인 실패 화면이 나타남

<form>태그

form 태그안에서 여러 속성들을 삽입.

action : 어디로 보내서 처리할것인가?

<form action=”search.php”

method = “post”>

<input type=”text” title = “검색”>

<input type = “submit” value=”검색”>

<label> 태그

: form 요소에 라벨을 붙이는 태그. 텍스트 눌러도 라디오버튼 체크됨

<fieldset> 태그 : form요소들을 그룹으로 묶는다.

<legend> 태그 : 그룹으로 묶는 form구역에 제목을 붙인다.

 

<input>태그의 다양한 속성들

  • 사용자가 입력하는 부분은 거의 모두 <input>태그를 이용해 처리
  • 입력내용의 종류는 type속성을 토해 지정
  • 여러 input 태그들을 구분하기위해 id 속성값을 넣어서 사용한다.
  • type에는 입력받기 원하는 정보의 형태(text,password,number)등에 따라 다양하게 사용한다.
  • type = “submit” : form안에 입력된 데이터들을 action이 가르키는 서버로 전송한다.
  • readonly : 내용을 볼수만있고 입력하지못함(회원 정보조회에서 아이디등)
  • required : 필수입력
  • selcet : 여러 항목중에 고르게할수있다. (콤보박스)
  • textarea : 텍스트 내용을 입력할때, 게시글 내용작성등 긴 텍스트를 입력하는 창
  • button : input의 submit처럼 button에도 submit를 사용한다. 그러나 button은 속성 기능이 3가지 밖에없다.

    웹에서 만나는 폼

    • 사용자가 웹 사이트로 정보를 보낼수 있는 모든 요소들은 form이다.
    • 모두 데이터베이스를 기반으로 하여, 정보를 저장하거나 검색한다.
    form의 동작방식<form>태그<form action=”search.php”<input type=”text” title = “검색”><label> 태그<fieldset> 태그 : form요소들을 그룹으로 묶는다.

    <input>태그의 다양한 속성들

    • 사용자가 입력하는 부분은 거의 모두 <input>태그를 이용해 처리
    • 입력내용의 종류는 type속성을 토해 지정
    • 여러 input 태그들을 구분하기위해 id 속성값을 넣어서 사용한다.
    • type에는 입력받기 원하는 정보의 형태(text,password,number)등에 따라 다양하게 사용한다.
    • type = “submit” : form안에 입력된 데이터들을 action이 가르키는 서버로 전송한다.
    • readonly : 내용을 볼수만있고 입력하지못함(회원 정보조회에서 아이디등)
    • required : 필수입력
    • selcet : 여러 항목중에 고르게할수있다. (콤보박스)
    • textarea : 텍스트 내용을 입력할때, 게시글 내용작성등 긴 텍스트를 입력하는 창
    • button : input의 submit처럼 button에도 submit를 사용한다. 그러나 button은 속성 기능이 3가지 밖에없다.
  • <legend> 태그 : 그룹으로 묶는 form구역에 제목을 붙인다.
  • : form 요소에 라벨을 붙이는 태그. 텍스트 눌러도 라디오버튼 체크됨
  • <input type = “submit” value=”검색”>
  • method = “post”>
  • action : 어디로 보내서 처리할것인가?
  • form 태그안에서 여러 속성들을 삽입.
  • 1.사용자가 아이디 와 비밀번호 에 정보 입력  로그인 클릭 2) 사용자가 입력한 아이디와 비밀번호가 웹 서버로 보내짐 3) 서버는 자신이 가지고 있는 사용자 데이터베이스를 뒤져서 사용자 가 보내온 아이디와 비밀번호가 서로 일치하는 정보인지 확인하고 그 결과를 브라우저에 보냄 4) 회원이라면 로그인한 후의 결과 화면이 나타나고 , 아니라면 로그 인 실패 화면이 나타남