[TIL] 2021.09.26 SUN

💻 오늘 배운 내용
1. CSS

Z축 : Z축을 사용한다는 것은 평면이 아닌, 3차원적 공간을 사용한다는 것을 의미. 따라서 POSITION이 3차원인 경우에만 사용할 수 있음

• position이 3차원인 경우는? relative, absolute, fixed

알아두면 좋은 팁

background-size : 배경이미지의 크기를 정하는 속성
(1) contain : 배경을 사용하는 요소를 벗어나지 않는 최대 크기로 이미지를 확대 혹은 축소. 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정. 이미지의 가로, 세로 비율은 유지.
(2) cover : 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정. 이미지의 가로세로비가 다르다면 이미지를 잘라내어 빈 공간이 생기지 않도록 설정.

background-attachment : 배경이미지의 고정 혹은 스크롤 여부를 결정
(1) scroll : 배경을 요소 자체에 대해 고정. 요소에 스크롤이 존재해도 배경은 함께 스크롤되지 않음. 즉 요소의 테두리에 배경 이미지를 부착한 것과 같은 효과.
(2) fixed : 배경을 뷰포트에 대해 고정. 스크롤이 존재해도 배경은 함께 스크롤되지 않음.

y축 중앙정렬

<style>
h1 {
 top : 50%;
 transfrom : translateY(-50%);
 }
 </style>

: top을 50%로 설정해 중앙 정렬. 이렇게 설정하면 콘텐츠의 가장 윗부분이 중앙에 오게 됨. 콘텐츠를 가운데로 이동해야 하기 때문에 transform을 사용하여 선택자(h1)의 절반 만큼을 빼서 위로 이동하라는 뜻. top을 사용하기 때문에 3차원 속성에 대해서만 사용할 수 있음.

Full Clip Plugin
배경이미지에 슬라이드 효과를 적용. 배경이미지가 자동으로 롤링되게 할 수 있음.

메인페이지 만들기

상단영역 만들기

box-shadow : 공간에 그림자 효과. 수평 거리, 수직 거리(오프셋), 흐릿함의 반경(값이 클수록 그림자의 끝은 흐려지고 0이 될수록 선명하게 나타남), 확산 정도, 색상으로 이루어짐.

border-radius : 요소 테두리 경계의 꼭짓점을 둥글게 만듦.

<style>
.box-shadow {
	box-shadow : 10px 10px 5px 5px red;
    border-radius : 30px;
    }
</style>

• 요소에 border-radius가 설정되어 있다면 box0shadow에도 똑같이 적용됨.

좌측 네비게이션 만들기

; 좌측 상단의 햄버거 메뉴를 클릭하면 나타나고 X 버튼을 클릭하면 다시 사라짐.

$(...).click(function () { $(....).animate(......);});

jquery를 사용하는 방법.

상세페이지 만들기

웹폰트

: 웹상의 폰트를 다운로드 받아서 사용하는 방법.

@import url(웹폰트가 있는 링크 주소);

상단 영역 만들기

특정 영역에 마우스를 올렸을 경우 손가락 모양으로 바꾸는 방법

cursor : pointer;

이미지 슬라이드 만들기

full clip과 비슷하지만 이번에는 oxl carousel 2를 사용. 모바일에서도 이미지 슬라이드 효과를 구현할 수 있는 라이브러리.

var owl = $('.owl-carousel');
owl.owlCarousel({
    items:4,
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:1000,
    autoplayHoverPause:true
});
$('.play').on('click',function(){
    owl.trigger('play.owl.autoplay',[1000])
})
$('.stop').on('click',function(){
    owl.trigger('stop.owl.autoplay')
})

item : 슬라이드에서 몇 개의 이미지를 보여줄지.
loop : 반복효과를 줄 것인지. 3개의 이미지가 있을 때, 3개가 끝났다면 더이상 안보여줄 것인지 아니면 다시 3개의 이미지를 반복할 것인지
autoplay : 자동으로 이미지가 보여지게 할 것인지
dots : 이미지 슬라이드 밑에 동그라미 표시를 할 것인지
autoplayTimeout : 다음 이미지로 넘어가기 전 이미지에서 머무는 시간
autoplayHoverPause : 마우스를 올렸을 때 이미지 슬라이드 효과를 잠깐 중지시킬 것인지

패럴랙스 효과 구현하기

패럴랙스 : 이미지 스크롤시 시간차에 따라 효과를 적용할 때 사용하는 용어. 스크롤을 기준으로 이벤트가 발생하는 효과.

form 태그

사용자가 특정 정보를 기입할 수 있도록 하는 태그. 버튼을 포함한 전체 영역을 포함.
action, method와 같은 서버와 관련된 내용도 있음
(1) input : 단문을 기입하는 칸. 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성.
주로 label과 쌍을 맞춰서 사용. label은 for라는 속성을 꼭 기입해서 for의 속성값과 input태그의 id와 name과 속성값을 똑같이 만들어줘야 함. 화면에서 input으로 포커스가 넘어가게 해주는 장치가 for. 그래서 for를 기준으로 포커스를 맞춰주기 때문에 동일하게 써야하는 것. input에 들어가는 데이터의 형태를 결정짓는 것은 type 속성.
① text : 글자
② email : 이메일 양식. 유효성 검증 매개변수 @
③ tel : 전화번호
④ checkbox : 단일 값을 선택하거나 선택 해제할 수 있는 체크박스. 중복체크가 가능
⑤ radio : 같은 name을 가진 여러개 중 단 하나의 값을 선택할 수 있음. 중복체크가 불가능. 예를 들어 성별.

<style>
  <label for="dog">
    <input type="checkbox" id="dog" name="dog">강아지
  </label>
  <label for="cat">
    <input type="" id="cat" name="cat">고양이
  </label>

  <label for="male">
    <input type="radio" id="male" name="gender">남자
  </label>
  <label for="female">
    <input type="radio" id="female" name="gender">여자
  </label>
</style>

(2) textarea : 장문을 기입하는 칸.input과 마찬가지로 label을 사용하며 for의 속성값과 id, name의 속성값을 동일하게 기입.

문의하기 양식 만들기

(1) button : 클릭 가능한 버튼.

• 속성 중 type은 버튼의 행동 방식을 의미. submit : 버튼이 서버로 양식 데이터를 제출. reset : 모든 컨트롤을 초깃값으로 되돌림. button : 기본 행동이 없으며 클라이언트측 스크립트와 연결 가능.
  (2) validation : 제대로 정보를 입력했는가를 확인/평가하는 것. 관련 문서 파일을 다운로드 해야 함.inpur과 text area 기입여부 확인. email의 @가 존재하는지. 내용은 최소 글자수를 충족했는지.