23.03.24 HTML하이퍼링크, 책갈피, 테이블,아이프레임,타겟,폼,인풋,라벨, 선택상자, 텍스트상자

1. HTML의 하이퍼링크

• 책갈피 기능
• 테이블
  • table (테이블생성)
  • tr (행을 생성)
  • tb (셀을 생성)
  • th  (셀의 제목, 가운데정렬, 굵은글씨)
  • colspan (셀 가로로 합침)
  • rowspan (셀 세로로 합침)
  • colgroup  (컬럼별로 스타일주기)
  • caption (표 상단에 제목)
• Ifram (아이프레임)
• Target 속성
• form 태그
• Input 태그
  • Type속성
  • 속성
• Label 태그
• Select 태그 (선택상자)
• Textarea 태그 (여러줄 글상자)

---

 

 

 

1. 하이퍼 링크 

 

• 다른 페이지 또는 사이트로 연결 하는 링크(문자,이미지) 만들어주는것 !
• 인라인 태그

       사용법 

        <a href='이동할 사이트 또는 문서의 경로'>링크에 사용할 문자 또는 이미지 넣는곳 </a>

 

1-1. 책갈피 기능

• 같은 페이지에서 위치만 이동하는것
• <a> 태그의 name 속성 또는 IP 속성을 이용하여 책갈피 기능을 설정

     사용법

        <a href="#도착지에 쓰일 name">링크에 사용될 문자 또는 이미지</a>
        <a name="도착지 name"> 문자 또는 이미지 </a>
        <태그 id="도착지 name"> 문자 또는 이미지</태그>
        

       예)<h2 id="menu">책갈피</h2>
            <p><a href="#">위로2</a></p> 목적지를 설정 하지 않아도 '#'을 넣어두면 맨위로 올라감 

 

 

1-2. 테이블

 

• 웹접근성 시각장애인분들한테 읽어줄 방법이 없어서 지금은 진짜 표만들때만 사용하는 태그로 변경 되었다.
• 여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표를 작성
• 기본 선의 색은 투명 (지금은 테두리속성이 존재는 하지만 잘 안쓴다.)
• 크기는 글자수 많큼 

        사용법

• <table> 로 시작하고 </table> 로 끝냄
• <tr>로 행을 생성, <tb> 셀을 생성
• <th> : 셀의 제목, 가운데 정렬, 굵은 글씨
• colspan 속성
  • 셀을 가로로 합침
  • <td colspan="함칠 열의 개수">
• rowspan 속성
  • 셀을 세로로 합침
  • <td rowspan="함칠 열의 개수">

• colgroup : 태그 뒤에 나오는 컬럼(th 또는 td)에 적용할 스타일을 해당 태그에서 미리 설정할 수 있도록 함 (열에 대한 스타일) 
  예시 colgroup )
      <table>
                <colgroup>
                      <col style="css문법1">
                      <col style="css문법2">
                      <col style="css문법3">

                 </colgroup>

                <tr>
                    <td>1</td> 
                    <td>2</td>
                    <td>3</td>
                </tr>

                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>

            </table>

 

• caption
  • 표에 상단 제목을 붙일 때 사용
  • 기본 위치는 표의 상단 중앙

 

1-3.아이프레임 

 

• inline frame의 약자
• 웹사이트 안에 또 다른 웹사이트를 삽입 

        사용법

        <ifram src='삽입할 페이지의 주소 또는 문서위치' style= '크기를 설정할 css코드'></ifram>

 

1-4.target 속성 

•  _blank: 새탭에서 페이지 열림
• 아이프레임의 name: 해당 아이프레임에서 페이지 열림 

<p>
	<a href="1.하이퍼링크.html">하이퍼링크 연습 페이지(현재 페이지)</a>
    <a href="1.하이퍼링크.html" target="_blank">하이퍼링크 연습 페이지(새탭)</a>
    <a href="1.하이퍼링크.html" target="if">하이퍼링크 연습 페이지(아이프레임)</a>
</p>
<!--iframe 사용법 -->
<p>
    <iframe src="http://koreaisacademy.co.kr/ 
    "style="width: 100%;height: 800px; border: 3px dashed red" 
    name="if"></iframe>  
</p>

1-5.form 태그 

• 웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그
• 사용자가 입력한 데이터를 서버로 보낼 때 form 요소를 사용     

     사용법

    <form action ='서버에게 전달할 파일 위치' method= '전송방법'>
        form 태그 안에 form 요소를 통해 데이터를 서버로 전달한다.
    </form>

 

    ✔전송방법 
     - get: url에 데이터를 포함하여 전달
     - post: body에 데이터를 포함하여 전달

 

 

1-6. <input> 태그 : 입력상자

     사용법

     <input type="타입속성"> 

 

• type속성
  • text: 문자를 입력 받는 글상자
  • password: 비밀번호를 입력 받는 글상자
  • radio: 여러개의 옵션 중에서 단 하나의 옵션만을 선택 할 수 있도록 하는 버튼 
              ✔ 그룹을 맺기 위해 name속성의 값을 동일하게 해야함. 
  • checkbox : 여러개의 옵션 중에서 다수의 옵션을 입력받을 수 있도록 하는 버튼 
              ✔ 그룹을 맺기 위해 name속성의 값을 동일하게 해야함
  • file : - 원하는 파일을 서버로 전송하기위한 글상자 
            - 웹을 이용하여 파일을 업로드 할수 있게 해주는것
  • button : 이벤트가 없는 일반 버튼, 아무기능은 없지만 기능을 넣을수 있기때문에 많이 쓰인다.
  • reset : 입력받은 데이터를 초기화 하는 버튼, 내가 설정해놓은 기본값으로 다시 돌아간다.
  • submit : 입력받은 데이터를 서버에 제출하는 버튼, 실제 값이 입력되는 action쪽으로 이동한다 !
  • hidden : 보이지는 않으나 서버에 값을 전달하고 싶을 때 사용하는 글상자.(보통 맨위에 적는다. 중간에 들어가게 되면 찾기가 힘들기 때문에!)
  • email : 이메일을 입력받는 글상자(@필요) html5때생겨난 기능
  • url : 웹사이트를 입력받는 글상자(http 필요) html5때생겨난 기능
  • tel : 전화번호를 입력받는 글상자(모바일에서 숫자 키패드를 사용) html5때생겨난 기능
  • date : 원하는 날짜를 입력받는 글상자, 달력도 그려준다. html5때생겨난 기능
  • number : 원한는 숫자를 입력 받는 글상자
                <input type = "number" min="최소값" max="최대값" step="증가값">
  • color : 원하는 색상을 입력받는 요소(선택한 색상은 16진수 RGB컬러값으로 서버에 전달된다.)
  • search : 검색어를 입력 받는 글상자
  • range : 일정 범위안에 값만을 입력하는 조절바
                <input type = "range" min="최소값" max="최대값" value="현재값">

• 속성
  • name: 요소의 이름을 설정, 서버에서 값을 전달받을때 key로 사용되는 속성
  • id: 요소의 유일한 이름을 설정, HTML문서에서 해당 요소의 스타일을 주거나 동적인 프로그래밍을 할 때 사용 (HTML문서내에서 다른요소와 같은 id를 가질 수 없음 !!!)
  • mexlength: 값의 최대 길이를 설정
  • placeholder: 입력 전 특정 데이터를 입력하도록 안내하는 값을 설정(실제값이 아니기 때문에 입력하면 없어짐)
  • value: 서버로 전달할 입력양식의 값을 설정한다.
  • checked: 라디오 또는 체크박스 중에서 미리 선택하는 값을 설정
  • readnoly : 데이터를 볼 수 있으나 수정할 수 없게 설정하는것(서버로 데이터가 전달됨)
  • disabled : 입력 필드를 사용할 수 없게 설정하는것(서버로 데이터가 절대 전달 되지 않음)
  • required : 데이터를 submit 할 때 데이터를 필수로 입력하도록 가젱하는 설정 

 1-7. Labal 태그

• 폼 양식에 이름을 붙이는 요소
• 다른 요소를 연결하면 해당 영역이 넓어짐
• radio, checked의 스타일을 설정시 많이 사용됨

      사용법

     <label form='요소의 id'> 텍스트 또는 이미지 </label>

<!-- input + label 태그 코드... -->
<form action="#" method="post">

    <p>아이디: <input type="text" name="userid" id="userid" maxlength="5" placeholder="ID 입력하세요 "></p>

    <p>비밀번호: <input type="password" name="userpw" id="userpw" maxlength="5" placeholder="패스워드"></p>

    <p>성별: <label for="male">남자</label><input type="radio" name="gender" id="male" checked> <label for="female">여자</label><input type="radio" name="gender" id="female"></p>

</form>

 

 

1-8. Select 태그 (선택상자)

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

<p>직업: 
    <select name="job" >
        <option value="프로그래머">프로그래머</option>
        <option value="공무원">공무원</option>
        <option value="전문직">전문직</option>
        <option value="학생">학생</option>
        <option value="취준생">취준생</option>
    </select>
</p>

 

 

 

1-9. Textarea 태그 (여러줄 글상자)

• 여러줄의 텍스트를 입력 받는 글상장
• value의 위치가 다른애들이랑 다른 특이점 !!
      <textarea cols="가로 글자수" rows="세로 줄수">value</textarea>

<!-- 여러줄 글상장 태그 <textarea></textarea>-->
<p>자기소개</p>
<p><textarea name="content" cols="50" rows="5"></textarea></p>

 

 

예제 소스 )

<h2>폼 태그 </h2>
<form action="#" method="post">

<!--hidden-->
    <input type="hidden" name="hidden" value="서버로 전달될 값">

    <p>아이디: <input type="text" name="userid" id="userid" maxlength="5" placeholder="ID 입력하세요 " required></p>

    <p>비밀번호: <input type="password" name="userpw" id="userpw" maxlength="5" placeholder="패스워드"></p>
<!-- rabel -->
    <p>성별: <label for="male">남자</label><input type="radio" name="gender" id="male" value = "남자" checked> <label for="female">여자</label><input type="radio" name="gender" id="female" value = "여자"></p>
<!-- check box -->
    <p>취미 : 운동<input type="checkbox" name = "hobby" value="운동"> 음악감상<input type="checkbox" name = "hobby" value="음악감상"> 영화감상<input type="checkbox" name = "hobby" value="영화감상"> 게임<input type="checkbox" name = "hobby" value="게임"> 등산<input type="checkbox" name = "hobby" value="등산"> </p>
<!-- file -->
    <p>첨부파일 : <input type="file" name="name"></p>
<!-- readonly -->
    <p>나이: <input type="text" name="age" value="-1" readonly></p>
<!-- disabled 완전 잠금-->
    <p>주민등록번호 : <input type="text" name="ssn" disabled></p>
<!--선택상자 태그 <select></select>-->
    <p>직업: 
        <select name="job" >
            <option value="프로그래머">프로그래머</option>
            <option value="공무원">공무원</option>
            <option value="전문직">전문직</option>
            <option value="학생">학생</option>
            <option value="취준생">취준생</option>
        </select>
    </p>
<!-- 여러줄 글상장 태그 <textarea></textarea>-->
    <p>자기소개</p>
    <p><textarea name="content" cols="50" rows="5"></textarea></p>

<!-- email, url, tel 속성 -->
    <p>이메일 : <input type="email"></p>
    <p>웹사이트 : <input type="url"></p>
    <p>휴대폰번호 : <input type="tel"></p>
<!-- date속성 -->
    <p>생년월일 : <input type="date" ></p>
<!--number-->
    <p>좋아하는 숫자 : <input type="number" min="1" max="100" step="1"></p>
<!--color-->
    <p>좋아하는 색상 : <input type="color"></p>
<!--search-->
    <p>검색어 : <input type="search"></p>
<!--range-->
    <p>프로그래밍 능력 : <input type="range" min = "1" max="5" value="3"></p>
 <!-- 여러 버튼 -->
    <p><input type="button" value="클릭하세요." onclick="alert('안녕')"> <input type="reset" value="다시입력"> <input type="submit" value="회원가입"> <button>버튼클릭</button></p>


</form>