2023-02-22(수) sprite , class와id , audio , video , input , select , table , border , text

2023-02-22 (수)

● css sprites generator
  - 스프라이트 제작 사이트(여러 이미지파일 하나로 만들기)
  - 합쳤을떄 나오는 좌표로 큰사진에서 원하는 부분만 불러오기가능
  - <style>
    width : 54px;                      // 크기
    height : 54px;                     // 크기
    background : url(./images/css_sprites.png) -10px -10px;      // 파일좌표 및 이미지좌표
   </style>

● sprite cow
  - 스프라이트에서 원하는 이미지 좌표 및 크기 추출

● 이미지 파일에서 좌표 알아내기
  - 그림판에서 열기 후 마우스로 좌표확인 (좌측하단에 좌표 표시)

● class 와 id
  - 불러오기(#과.)
  - 중복사용(class는 중복사용가능 , id는 불가능)
  - 여러스타일링을 한번에 적용할때 class
    한가지만 적용할때는 id

● audio
  - <audio abc="./audio/piano.mp3" controls> </audio>
  - 오디오 태그로 오디오파일 재생 가능

● video
  - <video abc="./video/mov_bbb.mp4" controls> </video>
  - 비디오태그로 비디오바일 재생 가능

 

● 외부비디오 태그(유튜브)
  - </embed src="동영상주소">
  - https://www.youtube.com/embed/UDdN6eM5KnI">  
  - 원주소 : https://www.youtube.com/watch?v=UDdN6eM5KnI ※ watch?v= → embed/ 로 수정
  - 또는 유튜브 공유의 퍼가기에서 링크가져오기

● input
  -     <input type="text"/>   // 텍스트 입력창 생성
  -     <input type="text" placeholder="아이디를 입력하세요"/>                                                   // 텍스트 입력창에 글자표기
  -     <input type="text" placeholder="아이디를 입력하세요" value="김대리"/>                          // 값을 넣어두기
  -     <input type="text" placeholder="아이디를 입력하세요" value="김대리" maxlength="10"/>   //글자수제한
  -     <input type="password"/>                                                                                                   // 비밀번호 입력창 생성

  -     <input type="checkbox"/>                                       // 체크박스 생성
  -     <input type="radio"/>                                              // 동그란 체크박스 생성
  -     <input type="radio" name="radio-group1">
        <input type="radio" name="radio-group1">
        <input type="radio" name="radio-group1">           // name으로 그룹을 만들면 하나만 체크되게 가능

 

● form , action
  - <form action="./check.jps" method="get">
      check.jsp파일에 get방식으로 전송
      JSP에 form태그에 있는 입력값들 전송
  -  <form action="./check.jsp" method="get">
          <input type="text" placeholder="아이디 입력"/>
          <input type="password" placeholder="비밀번호 입력"/>
      </form>

● select 
    <select>
        <option>사과</option>
        <option>포도</option>
        <option>딸기</option>
    </select>                                   // 선택창 생성 

● table
    <table border="10">                           // border : 표 외곽선 굵기
        <tr>    <!-- table row : 가로줄 -->
            <th> 제목 셀</th>                       // table head  : 제목
            <td> 1행 2열</td>                      // table data : 데이터  
            <td> 1행 3열</td>    
        </tr>
        <tr> 
            <th> 제목 셀</th>
            <td> 2행 2열</td>
            <td> 2행 3열</td>
        </tr>
    </table>

● border
  - <style>에서 사용
  - border : 5px solid red;              // 5px의 빨강 외각선 생성
    border-top,bottom,left,right 사용가능
  - box-sizing : border-box;          // 경계선을 박스 내부로생성 ( 박스크기에 포함시킨다)
  - border-radius : 100%             // 아에 둥글게 만든다
                         10px                 // 10px 라운드

● test관련
  - test-align : left right center 정렬
  - color : 글자색
  - <strong> : 진하게
  - font-size: 1em 글자크기