내일배움카드(재직자) 웹표준 수업 / 3월14일 (월) 5회차

 

 

 

*이미지 맵
: 이미지 중에서 일부분, 지정된 위치에서 링크 설정
<img src="이미지주소" alt="대체글자" usemap="#아무이름 지정">

<map name="event">
   <area shape="circle" coords="가로좌표,세로좌표,반지름" href="연결할 주소" alt="대체글자"
     target="_blank">
    <area shape="rect" coords="구역중앙 가로좌표,구역중앙 세로좌표,구역끝 가로좌표,구역끝 세로좌표" href="연결할 주소" alt="대체글자"
     target="_blank"> 
</map>


*사각형은 rect(렉텡글)
*구역 여러개 설정할땐 <area> 이부분만 태그 추가해주면된다. <map>부터 추가할필요 X

 

 

 

 

*이미지 좌표 보는법
이미지 우클릭 > 편집 > 그림판 좌측하단 좌푯값 나옴

*이미지 반지름 찾는법
그림판 선택 툴 클릭 > 원하는 부분 선택 툴로 잡기 > 좌측하단에 가로x세로값 나옴 거기서 가로값 나누기 2 하면 반지름값 나옴

Form(양식):사용자 입력 데이터 형태 지정
*fiedset은 의무로 꼭 넣어야 하는건 아니고 그냥 구역 구분용?

<form action="자료를 저장할 데이터 베이스 주소" method="get">
    <fiedset>
          <legend>구역이름</legend>
            <input type="자료형태">
    </fiedset>
    <fiedset>
          <legend>구역이름</legend>
            <input type="자료형태">
    </fiedset>
</form>

*method ="get" ▶ 주소 표시줄에 자료가 공개됨. 게시판에 주로 사용
               "post"  ▶ 사용자 입력자료 비공개 처리. 가입양식에 주로 사용

 

 

 

 

 

 

 

 

 

*input: 양식 종류, 자료 형태 <input type="자료형태">

▶ text :한줄글자,size 속성으로 텍스트 상자 크기 지정, maxlength 글자수 제한 
    <input type="text" size="200px" maxlength="2">
▶password :글자,숫자 대신 *나●로 표시
    <input type="password" size="200px" maxlength="12">
▶radio :여러 보기 중 하나만 선택,name 속성값이 같아야함. value로 전송할 값 지정
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
라디오에 대한 상세 설명: https://www.codingfactory.net/11559
▶checkbox :다중 선택,name 속성값이 같아야 함. value 전송할 값 지정
<input type="checkbox" name="option" value="music">
▶ image : 사진열기
 <input type="image" src="image/KakaoTalk_20220307_174342123_03.jpg" alt="울꼬미" width="200px">
▶ file : 파일첨부
 <input type="file">
▶submit :전송 단추 생성
 <input type="submit" value="전송">
▶reset :취소,초기화
<input type="reset" value="취소">
▶button :역할이 없는 버튼 모양만 생성
<input type="button" value="홈페이지로 이동">

 

 

*여러줄 입력할수 있는 텍스트 상자
<textarea cols="한줄에 보이는 글자수" rows="전체적인 줄 수" name="텍스트 상자 이름">
긴 글 입력
</textarea>

 

*선택 목록 : value는 데이터베이스로 전송할 값. 눈에 보이는값이 아님. 눈에 보이는값은 옵션태그 사이에 적은게 보이는 것!
<select>
<option value="관악구">관악구</option>
<option value="금천구">금천구</option>
<option value="강남구">강남구</option>
<option value="엄태구">엄태구</option>
    </select>

 

 

*자동저장기능(자동완성)해제
<form autocomplete="off">
</form>








★모든 본문내용은 <p>태그 같은걸 다 달아줘야한다. 나중에 CSS먹여줄수도 있으니..
그냥 쌩본문을 쓰는 일이 없도록!!!!!!!!!!!!★