24년 08월 20일

Developer Note/국비과정 수업내용 정리&저장

24년 08월 20일

DH_PARK 2024. 8. 21. 00:07

video 태그 : html에서 video 파일을 재생시켜 준다.

autoplay : 자동재생 (실행하지 않아도 자동으로 재생이 된다.)

muted : 음소거

loop: 무한재생

 <video controls autoplay muted loop> / 자동재생 , 음소거 , 무한재생
        <source src="./image/video1.mp4" type="video/mp4">
    </video>

유튜브에서도 iframe을 사용해서 동영상 재생창을 화면에 띄운다.

유튜브 자동재생 api : iframe

body::-webkit-scrollbar{
            display: none; / 크롬 웹의 스크롤바를 없앰.

 .bg-video{
            width :100vw;
            height : 100vh;
            position: fixed;
            left:0;
            top: 0;
            z-index: -1;
            opacity: .8;
        }
        
        // 삽입한 동영상이 화면에 딱맞게 움직이지 않게 해줌

form 이란?

 <!-- 
    form : 사용자로부터 특정정보를 받아 서버로 전달하는데 사용되는 태그
    action attribute : 전달받는 서버 API() (OR Endpoint)
    method Attribute : 서버로 요청하는 방식
        get : 사용자 요청 정보를 query string 으로 전달(default)
        post : 요청 정보를 request body 에 담아 전달(optional)
        put
        patch
        delete -->

<form action="" method=""> //폼 사용 형식

  <div>
        <label>패스워드 :</label>
        <input type="password" name="password" />
      </div>    파라미터          입력한 값

파라미터 = 매개변수 , 함수안에 들어가면 인자

form 사용 속성

    <form action="test.jsp" method="GET">
      <div>
        <label class="fw-bolder">아이디 :</label><br />
        <input class="m-2" type="text" name="userid" required />
      </div>
      <div>
        <label class="fw-bolder">패스워드 :</label><br />
        <input class="m-2" type="password" name="password" required />
      </div>
      <div>
        <label class="fw-bolder">패스워드 확인 :</label><br />
        <input class="m-2" type="password" name="repassword" />
      </div>
      <div>
        <label class="fw-bolder">E-mail확인 :</label><br />
        <input class="m-2" type="email" name="email" readonly />
      </div>
      <div>
        <label class="fw-bolder">나이 확인 :</label><br />
        <input class="m-2" type="number" name="age" min="5" max="70" step="2" />
      </div>
      <div>
        <label class="fw-bolder">전화번호 :</label><br />
        <input
          class="m-2"
          type="number"
          name="tel"
          pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"
        />
      </div>
      <div><label class="fw-bolder">집주소 :</label><br /></div>
      <br />
      <div>
        <label class="fw-bolder">상세 주소 :</label><br />
        <input class="m-2" type="text" name="addr2" />
      </div>
      <div>
        <label class="fw-bolder">성별</label><br />
        <input type="radio" name="gender" value="M" /> 남자
        <input type="radio" name="gender" value="W" /> 여자
      </div>
      <div>
        <label class="fw-bolder">취미</label><br />
        <input type="checkbox" name="hobby" value="climbing" /> 등산
        <input type="checkbox" name="hobby" value="swim" /> 수영
        <input type="checkbox" name="hobby" value="soccer" /> 축구
        <input type="checkbox" name="hobby" value="golf" /> 골프
      </div>
      <br />
      <div>
        <label></label>
        <input class="" type="file" name="files" multiple />
      </div>
      <br />
      <div>
        <label for="" class="fw-bolder">DATE :</label><br />
        <input class="m-2" type="datetime-local" name="date" /><br />
      </div>
      <div>
        <label for="" class="fw-bolder">COLOR</label><br />
        <input class="m-2" type="color" name="color" />
      </div>
      <div>
        <label for="" class="fw-bolder">RANGE</label><br />
        <input
          class="m-2"
          type="range"
          name="range"
          min="0"
          max="100"
          value="30"
        />
      </div>
      <div>
        <label for="" class="fw-bolder">URL :</label><br />
        <input class="m-2" type="url" name="url" />
      </div>
      <div>
        <select class="m-2" name="location">
          <br />
          <option value="대구">머구</option>
          <option value="포항" selected>포항항</option>
          <option value="울산">울산</option>
        </select>
      </div>
      <div>
        <label for="" class="fw-bolder">MEMO</label><br />
        <textarea rows="10" cols="50"></textarea>
      </div>

      <!-- <input type="submit" value="회원가입" /> -->
      <div>
        <button class="btn btn-primary">회원가입</button>

간단히 설명.

name 과 id 차이

name과 id는 비슷해보이긴 하나 실제론 별로 관계가 없다.

id : html 내에서 요소를 고유하게 식별하기 위해서 사용

name : 주로 폼 요소에서 제출될 때 서버로 전송되는 데이터를 식별하는데 사용됨.

label 옆에 class = “m-2” : bootstrap 프레임워크 사용

required : 반드시 그 칸안에 값을 입력해야만 하게 만듬.

placeholder : web에서 입력 칸이 비어있을 때 나타나는 문구 지정.

radio 와 select 의 차이

radio : 여러 옵션 중 하나만 선택할 수 있도록 하는 요소
select : 옵션 중 하나만 지정하는 건 비슷하나 , multiple 속성을 사용하면 여러 옵션을 선택할 수 있도록 할 수 있음.

disabled 와 readonly 차이

서버로 전달해서 창을 띄울 때 disabled 속성 지정하면 서버로 전달안됨

readonly 는 전달됨 ,, 둘다 입력은 어차피 안됨

일단 헷갈리는건 요정도.

음.. 어마어마한 양이긴 한데.. 이걸 전부다 외운다기 보다는 일단 이런게 있다하고 알고 넘어가는게 더 중요하다고 하셨고, 하나하나 다 외우기에는 시간이 너무 오래걸리기도 하고 당장에 그렇게 중요한 부분도 아니라고 하셨다. (안중요한건 아니겠지만)

유효성 체크 (예 : 회원가입)

간단하게 작성해본 회원가입 창

너무 조잡하네 ;;

여기서 css 나 bootstrap으로 스타일을 꾸며줄 수 있다 !

비밀번호 정규식 패턴

ex)

   <!-- ^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,15}$
    ^ : 문자열의 시작
    $ : 문자열의 끝
    () : 패턴을 구분하는 구분식
    ?= : 전방탐색
    . : 모든 문자 일치
    * : 앞의 문자나 부분식이 0개 이상 탐욕적으로 찾기
    [A-Za-z] : 영어 알파벳이 하나이상 포함되어야 한다(대문자,소문자)

    (?=.*[A-Za-z]) : 전방탐색(?=),  임의의 문자가 0개 이상 존재할 경우(.*) 영문다맨주/소문자 하나이상 포함하는지 여부([A-Za-z])
        /d : 모든 숫자와 일치. [0-9] 와 동일
        {8,15} : 8글자 이상 15글자 이하

부트스트랩 : html 프레임워크

부트스트랩을 사용하면 확실히 작업이 더 편해진다.

https://getbootstrap.kr/

(부트스트랩 주소)

bootstrap을 vs code 에서 바로 사용하고 싶을 때 :

(이 css 코드는 head 태그 안에 !)

(이 js 코드는 body 태그 안에 !)
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

마진과 패딩

속성 - property:

m - margin 클래스 설정 : 요소와 요소 사이의 거리(간격)
p - padding 클래스 설정

버튼 컬러

<button type="button" class="btn btn-primary">Primary</button> : 대표적인 색깔. 파란색 버튼으로 변함.

아까도 말했지만 너무 다 외우려고 애쓰지 말고 (그렇게 할 수도 없거니와) 효율적으로 우선순위를 정하고 공부하자 !

유효성 체크 **

form ****

저작자표시 비영리 변경금지

'Developer Note > 국비과정 수업내용 정리&저장' 카테고리의 다른 글

24년 08월 22일 (0)	2024.08.24
24년 08월 21일 (0)	2024.08.21
24 년 08월 19일 (1)	2024.08.20
24년 8월 16일 (0)	2024.08.19
24년 08월 14일 (0)	2024.08.15

현재글24년 08월 20일

끝까지 처음처럼