HTML❓

😊 전화걸기 ~

<a class="call" href="tel:전화번호" ontouchstart="call_check()"><span>통화하기</span></a>

전화번호를 입력하고 ontouchstart 함수를 이용해 몇번 전화되었는지 체크 가능하다
물론 상대방과 실제로 통화에 연결되었는지는 확인이 어렵다

😊 data 속성

data-로 시작하는 사용자 지정 속성

<div id="user-info" data-user-id="abc" data-user-name="teahwa">
</div>

const userId = $('#user-info').data('user-id');
const userName = $('#user-info').data('user-name');

프로그래밍 언어를 이용해 동적으로 값을 보낼 수 있다

😊 인풋태그 속성

<input type="text" autofocus>
<input type="text" required>

CSS❓

😊 position

static

포지션을 주지않으면 기본적으로 스태틱으로 값이 지정되고
레프트 라이트 탑 바텀은 비활성화 된다

relative

자기 자신 위치에서 움직일 수 있고 부모가 릴러티브라면
부모의 위치에 따라 자기자신도 상대적으로 움직인다
즉 자기가 어디에있었는지 기억하는 특징이 있다

absolute

부모태그 중 스태틱이 아닌 태그를 기준으로
자신의 위치를 정한다 자기 자신의 위치는 기억하지 않는다

absolute는 가장 가까운 position이 static이 아닌 조상 요소에 상대적으로 위치를 결정하고 fixed는 뷰포트에 대해 고정된 위치를 설정한다

이 둘은 요소의 크기를 자동으로 결정하지 않으며
크기는 width와 height 속성으로 지정하거나 콘텐츠의 크기에 따라 결정된다

다른 요소에 영향을 주지 않으므로 아래에 있는 요소들은
absolute나 fixed가 위치한 공간을 채우려고 하며
이로 인해 가려지거나 위치가 이동할 수 있다

😊 flex

flex-basis는 플렉스 아이템의 초기 크기를 지정하는 속성
flex-shrink는 플렉스 아이템이 flex-basis의 값보다 작아질 수 있는지 결정하는 속성

flex-basis의 기본값은 auto
auto는 플렉스 아이템의 width 또는 height 속성의 값을 사용하거나
크기가 정의되지 않은 경우에는 콘텐츠 크기만큼을 사용한다
따라서, flex-shrink를 사용하려면 flex-basis를 꼭 값줘야하는 것은 아니고
flex-basis의 값에 따라 flex-shrink의 효과가 달라질 수 있다

.item {
  width: 100px;
  flex-basis: 200px;
  flex-shrink: 1;
}

이때, flex-basis의 값은 200px이므로 width 속성의 값을 무시된다
플렉스 아이템의 초기 크기는 200px이고 flex-shrink의 값은 1
이는 플렉스 아이템이 flex-basis보다 작아질 수 있고
플렉스 컨테이너의 공간이 부족할 때 플렉스 아이템의 크기가
200px보다 작아질 수 있다는 의미이다

flex의 자식태그가 화면이 줄어들음에 영향받지않고 자기 크기를 항상 유지하고 싶으면

flex-shrink: 0;

으로 주면된다

flex의 자식태그들이 같은비율을 가지게 하고 싶다면

flex-grow:1;

을 주고 자식태그들 중 하나를 크게하고 싶다면
2를 주면 2배 3을 주면 3배가 된다

자식태그:nth-child(2){flex-grow:3;}

😊 여러가지 속성

opacity : 투명도
font-family : 글씨체
font-size : 글자 크기
line-height : 줄 간격
display : block, inline, flex, none
box-shadow : 그림자 효과

😊 transition, animation

애니메이션 트랜지션은 모두 속성의 변화를 시각화하는 기능이라는 점에서 동일하지만
애니메이션은 중간 단계가 있어서 보다 다양하고 복잡한 일련의 변화를 보여줄 수 있다
트랜지션은 초기상태와 최종상태만을 지정할 수 있다
애니메이션은 페이지가 로드될 때 자동실행될 수 있고 지정한 횟수만큼 무한히 반복될 수 있지만
트랜지션은 트리거에 의해서 실행되며 트리거가 제거되면 다시 원래대로 돌아가게 된다

😊 글자수 제한

overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
white-space: nowrap;
word-break: break-all;

😊 공간

마진은 요소의 테두리(border) 바깥쪽의 공간

margin: 10px; 		모든 방향에 대한 마진을 10px로 설정

패딩은 요소의 테두리(border) 안쪽의 공간

padding: 10px; 		모든 방향에 대한 패딩을 10px로 설정

오버플로우는 요소의 내용(content)이 요소의 상자 영역을 벗어날 때 어떻게 처리할지를 정의

overflow: visible;	기본값: 요소의 상자 밖으로 넘치는 부분이 보이게
overflow: hidden;	넘치는 부분을 숨김
overflow: scroll;	스크롤바가 필요할 때만 스크롤바가 표시
overflow: auto;		스크롤바가 필요할 때만 스크롤바가 표시되지만, 
					스크롤바를 사용하지 않아도 자동으로 표시될 수 있다

content-box는 박스의 크기를 요소의 콘텐츠(content) 영역의 크기로 정의
border-box는 테두리와 패딩을 포함하여 전체 크기를 정의

box-sizing: content-box; 기본값
box-sizing: border-box;

JavaScript❓

😊 무언가를 보여주기~

$('선택자').show();
$('선택자').hide();

이용해서 문구, 모달창을 보여주거나 감추기~

😊현재 태그의 부모 태그의 형제의 자식태그!

$(this).parents().siblings().children(): parents() 

현재 요소의 부모 그 부모의 부모 등을 모두 포함한다
그런 다음 siblings() 메소드를 사용하여 이러한 부모 요소들의 모든 형제 요소를 선택
마지막으로 children() 메소드를 사용하여 이러한 형제 요소들의 모든 자식 요소를 선택

$(this).parent().siblings().children(): parent() 

현재 요소의 직접적인 부모 요소만을 선택한다
그런 다음 siblings() 메소드를 사용하여 이 부모 요소의 모든 형제 요소를 선택하고
마지막으로 children() 메소드를 사용하여 이러한 형제 요소들의 모든 자식 요소를 선택

해당 요소의 index 값 추출

const index = $(this).index();

😊 Swipe 라이브러리

swiper 라이브러리 사용시 일정한 속도로 흐르는 효과 주고 싶을때
.swiper-wrapper{} CSS에
transition-timing-function : linear 를 추가하자!

linear: 일정한 속도로 변화
ease: 기본값으로 시작과 끝에서는 천천히 진행하고 중간 부분에서는 빠르게 진행
ease-in: 천천히 시작하여 끝에서 빠르게 진행
ease-out: 빠르게 시작하여 끝에서 천천히 진행
ease-in-out: 천천히 시작하여 중간에서는 빠르게, 그리고 다시 끝에서는 천천히 진행