개발일지 16일차

웹퍼블리싱 html,css

form 태그

- 사용자에게 입력받은 정보를 서버에보내고, 보낸 정보를 다시 브라우저로 돌려주는 역할을 수행하는 태그이다.

    <form action="">
        <fieldset>
            <legend>
                <input type="text">
                <input type="password">
            </legend>
        </fieldset>
    </form>

form태그의 기본 형태는 form태그안에 fieldset태그를 넣고 legend태그안에 정보를 입력할 수 있는 input태그를 넣는것이

일반적이나 fieldset태그와 legend태그는 상황에따라 삭제되어도 무방하다.

form태그 속성

• action: 사용자에게 입력받은 정보를 어디로 전송할지 정한다.
• name: 입력받은 정보가 어떤정보인지 판단하기 위해 name을 지정한다
• method: 입력받은 정보를 어떤 방식으로 전송할때 지정하는 속성이다 대표적으로 GET 메소드와 POST메소드가 있다.

    <form action="./index.js" name="id"  method="get">
        <fieldset>
            <legend>
                <input type="text">
                <input type="password">
            </legend>
        </fieldset>
    </form>

input태그

- input 태그는 form 태그안에 사용자가 직접적으로 정보를 입력 할 수 있는 입력창을 제공하는 태그이다. 대표적으로 아이디와 비밀번호를 입력할 수 있는 로그인 창에서 쓰인다.

  <input type="text">
  <input type="password">

input태그 속성

  <input type="text" />텍스트 
  <input type="password" /> 패스워드
  <input type="radio" />라디오 
  <input type="date" />날짜
  <input type="checkbox" />체크박스 
  <input type="button" /> 버튼
  <input type="hidden" />히든 
  <input type="file" />파일
  <input type="submit" />제출 
  <input type="reset" />리셋

입력된 type에따라 input태그의 입력값도 달라진다.

type: 사용자에게 어떤정보를 입력받을지에 따라 태그모양을 다양하게 변경 할 수있다.

name: 사용자에게 입력받은 정보가 어떤정보인지 name을 지정하고 받은 데이터를 구분한다.

readonly: 태그를 읽기전용이으로 만든다.

maxlength: 해당 태그에 입력할 수 있는 텍스트의 길이를 제한한다 ex) maxlength: 255

placeholder: 해당태그에 어떤 값을 입력해야 하는지 추가적인 정보를 제공한다.

swiper.js

- swiperjs는 자바스크립트 라이브러리이다. swiper를 사용하면 원하는 영역에 슬라이드 효과를 적용할 수 있는 유용한 라이브러리이다.

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

슬라이드를 적용할 태그에 class="swiper-container mySwiper" 클래스를 적용하여 슬라이드 기능을 구현 할 수 있다.

swiper 기본구문

let swiper = new Swiper(".mySwiper", {
  loop: true,
  autoplay: {
      delay: 5000,
      disableOnInteraction: false  // // false로 설정하면 스와이프 후 자동 재생이 비활성화 되지 않음
    },
  // buttons 컨트롤은 options 에 navigation 사용 혹은
  // swiper api 에 slidePrev, slideNext 함수 사용 가능
  navigation: {
    nextEl: "#timesquare .card_nav .btn_next",
    prevEl: "#timesquare .card_nav .btn_prev",
  },
});

탭 구조

- 여러개의 버튼과 1개의 컨텐츠 영역을 가진 구조를 탭구조라고 한다. 보고싶은 컨텐츠에 해당하는 버튼을 누르면

지정된 한곳의 구역에서 컨텐츠를 보여줄 수 있다.

// 변수 설정
const $contents = $("#contents");
// 상품, 쇼핑물, MEN 각각의 컨텐츠
const $content = $contents.children(".shop_content");
// 상품, 쇼핑몰, MEN 탭 구현
const $tabs = $("#tab_title li");
// tab_title 밑에 a 버튼들 (상품, 쇼핑몰, MEN 탭)
const $tabsAtags = $tabs.find("a");
// 내가 사용할 swiper 객체
let shoppingSwiper = null;

탭 구조의 기본형태는 버튼을 클릭했을때 클릭한 버튼에 해당하는 컨텐츠의 display:block속성을 적용하고 나머지 컨텐츠에는 display:none 속성을 적용하여 버튼에 해당하는 컨텐츠만 보여주는 원리로 동작한다.

 

transtion

- transition 속성은 요소의 css속성을 변경할때 두 가지 상태에서 일어나는 애니메이션을 원하는 시간이나 효과를 주기위해 사용한다.

/* property name | duration | timing function | delay */
transition: opcity | .3s | ease | 1s

propertyname: 애니메이션을 적용할 속성을 지정한다 all을 적용하면 모든 속성에 애니메이션이 적용된다.

duration: 애니메이션이 적용될 시간을 지정한다. .3s 0.3초 동안 애니메이션을 동작하는 속성이다

timing function: 애니메이션의 속도를 지정한다. 대표적으로 ease, ease-in, ease-in-out등의 속성이있다

디테일한 속성을 적용해야한다면 배지어곡선을 만들어 주는 사이트를 참고하면 된다

https://cubic-bezier.com

cubic-bezier.com

delay: 애니메이션이 몇초뒤에 실행 될 것인지 지정하는 속성이다. 1s로 지정한다면 1초뒤에 애니메이션을 수행하게된다.

transform

- 요소를 회전,크기,기울이기,이동등의 효과를 지정할때 사용한다.

transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: rotateX(5deg);
transform: rotateY(5deg);
transform: rotateZ(5deg);
transform: translate(0%, 50%);
transform: translateX(10px);
transform: translateY(3px);
transform: translateZ(5px);
transform: scale(2, 0.5);
transform: skew(30deg, 20deg);

대표적으로 많이 사용하는 tranform효과들이다.

translate

- translate는 tranform 속성에 사용할 수 있는 효과중 하나로, 요소에게 이동하는 애니메이션을 부여할때 사용한다.

  transform: translate();
  transform: translateZ();
  transform: translateX();
  transform: translateY();