숫자 키 패드, position, 배경 이미지 사이즈 조정, rem과 em, 자동 줄바꿈 방지, fadeIn(), fadeOut(), mouseenter(), text()

프론트엔드 언어의 폴더 이동 방법

./ : 현재 폴더로 이동
../ : 한 단계 상위 폴더로 이동
/ : 최상위 폴더(root folder)로 이동

숫자 키 패드

스마트폰에서 숫자 키 패드가 나오게 하려면 [pattern="\d*"]를 함께 사용하면 된다.
<input type="number" pattern"\d*" />

position

position:static

top, left, right, bottom 속성이 적용되지 않으므로 위치가 변하지 않고 block형태로 쌓인다.

부모 엘리먼트 안에서 자식 엘리먼트의 이동

자식 엘리먼트들이 부모 엘리먼트를 기준으로 이동하려면 부모 엘리먼트는 position 속성값으로 relative, fixed, absolute를 갖고 있어야 한다.
부모 엘리먼트에 position:static을 적용하면 자식 엘리먼트들의 위치는 부모 엘리먼트가 아니라 상위인 body 태그를 기준으로 위치한다.

position:relative

자신의 위치를 기준으로 이동한다.

배경 이미지 사이즈 조정하기

contain: 배경 이미지가 잘리는 부분 없이 모두 표시
cover: 배경 이미지가 잘리는 부분이 있더라도 꽉 차게 표시

clear

앞의 박스 float 속성값이 left이든, right이든 아래로 내리고 싶다면 clear:both를 사용한다.

rem과 em

em: 부모 태그의 font-size 속성값을 기준으로 설정
rem: 최상위 태그의 font-size 속성값을 기준으로 설정
곱셈을 한 것과 같다.

자동 줄바꿈 방지

white-space : nowrap;
overflow-x: auto; → x축을 따라 스크롤바를 추가

fadeIn()과 fadeOut()

• 엘리먼트를 서서히 보이기
  $('selector').fadeIn();
• 엘리먼트를 5초간 서서히 보이기
  $('selector').fadeIn(5000);
• 엘리먼트를 서서히 숨기기
  $('selector').fadeOut();
• 엘리먼트를 5초간 서서히 숨기기
  $('selector').fadeOut(5000);

마우스 포인터를 요소 위에 올릴 때 무언가 하기

$('selector').mouseenter();

$('selector').mouseenter(function(){});

HTML 엘리먼트에 있는 텍스트 변경하기

$('selector').text('변경할 텍스트');