[HTML] 링크 만들기 & 폼 만들기

📌 링크만들기

🔎 하이퍼 링크 

- 다른문서 or 다른 사이트로 연결해 주는 기능

- 메뉴 뿐만 아니라 원하는 곳에 링크를 만들 수 있음

 

[ <a></a> 태그 ]

기본 : <a href = " 링크할 주소 "> 텍스트 </a> or <a href = " 링크할 주소 "> <img src = "이미지 파일 경로" > </a>

✔️ 반드시 href 속성을 사용해서 링크할 주소를 알려줘야 함

 

<a> 태그의 속성

 📌 href - 링크할 문서나 사이트 주소 입력

               - 링크를 만들 텍스트 / 이미지를 <a> 와 </a> 사이에 넣어줌 

 

 📌target - 다른 사이트로 연결하거나 현지 페이지에서 다른 페이지를 어떻게 열지 결정

• _self : 링크를 클릭한 해당 창에서 연다.
• _blank : 링크를 새창으로 연다.
• _parent : 부모 창에서 연다. (부모 창이 없으면 _self 속성으로 처리)
• _top : 전체 브라우저 창에서 가장 상위의 창에서 연다. (부모 창이 없으면 _self 속성으로 처리)

📌download - 링크한 내용을 보여주는 것이 아니라 다운로드

📌rel - 현재 문서와 링크한 문서의 관계

• bookmark - 즐겨찾기(bookmark)에 사용하는 고유주소 제공
• help - 도움말 문서에 대한 링크 
• license - 현재 문서의 저작권 정보 링크
• next - 연관된 문서들의 모음중 다음 문서에 대한 링크
• nofollow - 유료 링크와 같이 검색엔진이나 봇(bot)등이 추적해서는 안됨을 명시
• noreferer - 사용자가 하이퍼 링크를 클릭할 때 브라우저가 http referer header를 전송해서는 안 됨을 명시
• prefetch - 해당 문서를 캐시(cache)해야만 함을 명시
• prev - 연속된 문서들 중 이전 문서 제공
• search - 현재 문서를 위한 검색 도구 제공
• tag - 현재 문서를 위한 키워드 제공

 

📌hreflang - 링크한 문서의 언어 지정

📌type - 링크한 문서의 파일 유형을 알려줌

 

[ 한 페이지 안에서 점프하기 - 앵커 ]

 - 앵커를 사용하려면 이동하고 싶은 위치에 id 속성으로 앵커를 만들고

    ➡️ <a> 태그 href속성에  "#앵커이름" 으로 링크함 

 

ex )

<h1 id="menu">텍스트 링크 만들기</h1>

<p><a href="#menu">[메뉴로]</a></p>

위에 처럼 id 와 href 속성값이 일치하면 <a> 태그가 있는 곳을 누르면 ➡️ id가 있는 곳으로 이동함 

 

 

[ <area> 태그 ]

-하이퍼링크가 연결될 영역을 정의할 때 사용

[ usemap 속성 (img의 속성) ]

-이미지 맵 : 한 이미지 상에 여러 다른 링크를 만들 떄 사용

 

<area> 태그의 속성

 

📌alt - 대체 텍스트

📌coords - 영역의 좌표를 지정

📌download - 링크 클릭시 문서 다운로드

📌href - 문서의 경로를 지정

📌media - 링크 문서를 어떤 미디어에 최적화시킬지 지정

📌rel - 링크와 현재 문서 사이의 관계 지정 ✔️ <a> 태그의 rel 속성과 같음

📌shape - 영역의 모양

• default - 이미지전체
• rect - 사각형
• circle - 원
• poly - 다각형

📌target - 영역을 클릭했을 때 문서가 열릴 위치 ✔️ <a> 태그의 target 속성과 같음

📌type - 링크문서의 미디어 유형

 

ex )

 

        <img src = "images/미소의 세상.jpg" usemap="#miso">
        <map name="miso">
            <area shape="rect" coords="10,10,160,200" href="https://mingtory.tistory.com/category" target="_blank">
            <area shape="rect" coords="220,10,380 200" href="https://github.com/minnnnji" target="_blank">
        </map>

왼쪽을 누르면 blog로 이동하고 오른쪽 박스를 누르면 github로 이동

---

📌 폼 만들기

폼 [ From ]  - 사용자가 웹 사이트로 정보를 보낼 수 있는 모든 요소들

- 폼과 관련된 대부분의 작업들은 정보 저장 or 검색 or 수정

- 데이터베이스를 기반으로 함

- 아이디를 입력하는 텍스트 필드나 버튼 같은 폼의 형태를 만드는 것은 html 태그

- 폼에 입력한 사용자 정보를 처리하는 것은 ASP or PHP 같은 서버 프로그래밍 이용

 

[🔎 동작 방식 ]

 

아이디 + 비밀번호 정보 입력 후 로그인 클릭

                              ⬇️

입력한 아이디와 비밀번호가 웹 서버로 전송

                              ⬇️

서버는 자신이 가지고 있는 사용자 데이터베이스를 뒤져 일치하는 정보를 확인하고 결과를 브라우저로 보냄

                              ⬇️

회원이면 로그인한 후의 화면 or 회원이 아니면 로그인 실패화면 

 

[ <form> </form> 태그 ] 

폼을 만드는 기본 태그

<form> 태그의 속성

📌method - 사용자가 입력한 내용을 서버쪽 프로그램으로 어떻게 넘겨줄지 지정

• get - 주소표시줄에 사용자가 입력한 내용이 그대로 드러남. 길이 제한이 있음 ( 256byte ~ 4096byte ) 
• post - 대부분 이방식을 사용. 사용자의 입력을 표준 입력으로 넘겨주기 때문에 입력 내용 길이에 제한 받지않고, 사용자가 입력한 내용이 드러나지 않음

📌name - 폼의 이름 지정

📌action - <form> 태그 안에 내용들을 처리해줄 서버상의 프로그램 지정

📌target - <action>태그에서 지정한 스크립트 파일이 열릴 위치 지정 ✔️ <a> 태그의 target 속성과 같음

 

[ <form> </form> 사이에 들어가는 태그들 ]

[ <label> </label> 태그] 

 

- 폼 요소에 레이블(텍스트)을 붙이는 태그

- 라디오 버튼이나 체크 박스에서 텍스트 부분을 클랙해도 라디오 버튼과 체크 박스 버튼이 선택된다.

 

[ <fieldset> </fieldset> 태그]

 

- 폼 요소를 그룹으로 묶는 태그

 

[<legend> </legend> 태그]

 

- 그룹으로 묶는 구역에 제목을 붙이는 태그

	<form> 
            <fieldset>
                <legend>개인 정보</legend> <ul>
                    <li>
                    <label for="name">이름</label> <input type="text" id="name">
                    </li>
                    <li>
                    <label for="mail">메일 주소</label>
                    <input type="text" id="mail"> </li>
                    </ul> 
            </fieldset> 
                <!--fieldset1-->
            <fieldset>
                <legend>로그인 정보</legend> <ul>
                <li>
                <label for="id">아이디</label> 
                <input type="text" id="id">
                </li>
                <li>
                <label for="pwd">비밀번호</label>
                <input type="text" id="pwd"> </li>
                </ul> 
            </fieldset>
            <!--fieldset2-->
        </form>

 

 

[ <button> </button> 태그] 

- 사용자가 누를 수 있는 버튼이 나타남

 

[ CODE ]

        <button type="button" onclick="alert('버튼을 클릭하셨군요!')">
            버튼을 눌러주세요.
        </button>

button 태그

눌렀을 때 화면에 뜨는 것 내용 설정 가능

[ <input> </input> 태그] 

기본 : <input type="속성값">

 

[ CODE ]

        <form action="/examples/media/request.php">
            검색할 내용을 입력하세요 :
            <input type="text" name="search">
        </form>
        <br><br><br><br><br>
        <form>
            사용자 : <br><input type="text" name="username"><br>
            비밀번호 : <br><input type="password" name="password">
        </form>
        <br><br><br><br><br>
        <form>
            <input type="radio" name="lecture" value="html" checked> HTML <br>
            <input type="radio" name="lecture" value="css"> CSS <br>
            <input type="radio" name="lecture" value="java"> JAVA <br>
            <input type="radio" name="lecture" value="cpp"> C++
        </form>
        <br><br><br><br><br>
        <form>
            <input type="checkbox" name="lecture" value="html" checked> HTML <br>
            <input type="checkbox" name="lecture" value="css"> CSS <br>
            <input type="checkbox" name="lecture" value="java"> JAVA <br>
            <input type="checkbox" name="lecture" value="cpp" disabled> C++
        </form>
        <br><br><br><br><br>
        <form>
            <input type="file" name="upload_file" accept="image/*">
        </form>

📌type -  <input> 요소가 나타낼 타입을 명시

• text - 한 줄로 된 텍스트 필드

• password - 비밀번호를 입력할 수 있는 필드 ✔️ 입력받은 문자나 숫자 대신 별표나 작은 원 모양이 표시됨

• radio - 여러개의 옵션중에 하나의 옵션만 받을 수 있음

• checkbox - 여러개의 옵션 중 다수의 옵션을 받을 수 있음

• file - 사용자로부터 파일을 받을 수 있음

[ <select> </select> 태그]

 - 여러개의 옵션이 드롭다운 리스트로 되어 있으며, 그 중에서 단 하나의 옵션만 선택 가능 

 

[ CODE ]

        <select name="fruit">
            <option value="apple"> 사과
            <option value="orange" selected> 귤
            <option value="strawberry"> 딸기
            <option value="peach"> 복숭아
        </select>

select 태그

[ <textarea> </textarea> 태그] 

- 사용자로부터 여러 줄의 텍스트를 입력받을 수 있음

 

[ CODE ]

 

	<textarea name="message" rows="5" cols="30">
            여기에 적으세요.
        </textarea>

textarea 태그

[ reference ]

코딩의 시작, TCP School - tcpschool.com/html/html_input_forms