UI

UI 만드는 방식 정리1번css로 display: none;으로 숨기기이벤트 설정Javascript js로 직접 display: block;, display: inline;으로 바꾸거나 class부여하기 display 바꾸기jQuery .show() .slideDown

구버전 animation 만들기애니메이션 만들기옛날 방식자바스크립트로 변화를 준다.속도가 느리다.변화 전 모습 만들기css로 margin-left: -100px margin 한방향으로 -픽셀을 설정하여 화면에서 숨기기변화 후 모습 만들기 이벤트 설정.animate({m

신버전 animation 만들기애니메이션 만들기UI를 꾸미는 css에 transition: all 1s를 설정한다.클래스를 만들어서 transform:을 설정하고 UI에 클래스를 넣어서 모습을 변화시킨다.이벤트를 설정하고, 클래스를 입력하거나, 제거하는 방식으로 모습의

프로의 애니메이션 팁 첫번째결론 : 변화는 trasform:으로 한다.변화 전 모습 설정시 하지말야아하는 css marginwidthheightpositionleftright변화 전, 후 모습 설정시에 써야할 것trasform:여러가지 기능이 있다.이동회전크기 변경

프로의 애니메이션 팁 두번째transform:은 빼서 class를 따로 만들어야 한다.왜냐하면, 해당 class를 넣거나 빼거나에 따라 모습이 변하기 때문이다.중요한 점은 transition: all 1s은 div를 꾸미는 css에 있어야 하고 transform: tr

div를 이동시키기

js로 유사 slideDown 기능 만들기 / 안보였던 메뉴가 버튼클릭하면, 오른쪽으로 나오게 하기css핵심position: fixed;css 폭과 길이가 적용되도록margin-left: -150px;왼쪽으로 150px 이동시켜서 안보이도록 했음js핵심버튼클릭하면 메

이미지 슬라이드 만들기만든다.이미지를 가로로 배치한다.float: left;이미지 한 개를 담는 이미지 박스에 설정한다.이미지가 한 개만 뜨도록 한다.overflow: hidden이미지 슬라이더를 div tag에 복붙하고, 그 div에 설정한다.애니메이션변화transf

다른 div를 기준으로 버튼을 배치시키기이유 : 이렇게 되어있어야 position: relative"와 position: absolute;을 쓸 수 있다.부모 div에 position: relative"자식 button에 position: absolute;위치 조정 한

프로의 이미지 슬라이드 개발오른쪽으로 이동버튼 개발 시let nowPicture = 1; 변수를 만듬조건문 만듬변수가 1이므로 무조건 첫번째 조건문이 실행되어서 2번째 사진으로 이동후에, 변수에 2를 저장함변수가 2이므로 두번째 조건문이 실행되어서 3번째 사진으로 이동

이미지 슬라이드 버튼 이벤트 코드 최종버전let nowPicture = 1; 변수를 만듬2번째 사진이 보이게 함이미지 박스 폯은 100vw이다.첫번째 사진이 보일 때, 사진 컨테이너가 X축 기준으로 -100vw이동하면, 두번째 사진이 보인다.\-100 = 변수 \*

웹 UI 라이브러리이미지 슬라이드차트nav-bar스크롤 바스크롤 바2전체화면 스크롤 사이트

스크롤을 조금 내리면, 동작하는 스크롤 이벤트스크롤 이벤트 설정스크롤이 100px 내려가면, nav-bar의 배경과 로고 폰트 사이즈를 변경함스크롤을 일정 부분 올리면, nav-bar가 원래 상태가 되도록 설정하였다.

스크롤 이벤트 많이 쓰면, 성능이 느려진다.스크롤 이벤트는 렉이 많이 걸리는 기능이므로 신경써서 구현해야한다.

tab button 만들기list를 만듦설명부분을 만듦list를 옆으로 배치시킴list를 담는 ul에 border-bottom을 만듬버튼을 클릭하면 class를 넣음active설명 div를 숨김버튼 클릭하면 class를 넣음버튼1 클릭하면, 버튼1에 active cla

UI / 로그인 모달창의 검은색 배경 클릭하면, 모달창 없어지게 만들기문제상황이벤트 버블링때문에, 로그인창을 클릭했을 때, 로그인창은 검은색 배경에 포함되어있기때문에, 검은색 배경도 클릭했다고 컴퓨터가 인지한다.해결방법컴퓨터가 실제로 클릭한 것만 인지하도록 해야한다.설

클릭 이벤트 핵심개념자식 여러 개에 클릭 이벤트를 걸면, 메모리를 많이 잡아먹으므로, 한 개인 부모에 클릭이벤트를 설정하고,이벤트 버블링을 통하여 자식인 li가 실제로 클릭되면, 동작되도록 만들어야 한다.

이벤트 버블링을 이용하여 탭 버튼 수정하기목적 ul tag 한 개, li tag 여러 개이다.현재는 li에 클릭 이벤트가 설정되어 있기 때문에 메모리를 많이 잡아먹는다.한 개있는 ul에 클릭 이벤트를 설정하면, 메모리를 덜 잡아먹는다.ul에 클릭이벤트를 설정한다.실제로

data를 이용하여 탭 버튼 코드 줄이기

select 만들기옷 종류를 선택하는 select, 사이즈를 선택하는 select 총 2개 있음class를 만들고, 사이즈 셀렉트를 안보이게함이벤트는 select tag에 설정해야 한다.select가 값들인 option을 포함한다.셔츠를 선택하면, 셔츠 사이즈가 보이

select로 배우는 UI 만드는 새로운 방식버튼 클릭 이벤트div 안의 모든 tag 없앤다.변수에 html tag를 넣는다.html tag들을 백틱(\`)으로 한꺼번에 감싼다. 띄워쓰기는 없어야한다. 단, 엔터키는 가능div에 그 변수를 넣는다.기존의 방식 : htm

js로 html을 만들고 넣어서 select만들기옷 종류 셀렉트와 사이즈 셀렉트 2개 있음이벤트옷 종류 셀렉트의 값이 바뀌는 것을 감지바지 선택 -> 바지 사이즈 나옴셔츠 선택 -> 셔츠 사이즈 나옴

select로 배우는 UI 만드는 새로운 방식 = javascript로 html을 만들어서 넣기 버튼 클릭 이벤트 div 안의 모든 tag 없앤다. 변수에 html tag를 넣는다. html tag들을 백틱(`)으로 한꺼번에 감싼다. 띄워쓰기는

웹 앱을 만드는 방식예시 : 상품카드 html파일을 서버가 보내고, 상품의 가격, 이미지, 상품명은 js로 비어있는 값을 채운다.최근에는 2번째 방식을 많이쓴다.

UI 만들기 정리(만들기와 데이터 요청)만들고, 숨겨서 나타나게 한다.동적 html 생성ajax이용하여 데이터를 요청하여 받아온다받아온 데이터를 화면에 보이게 한다.

애플 UI 만들기 / 스크롤 내릴 때, 왼쪽 글은 올라가고, 이미지는 멈춰있는 UI만들기body부모 div이미지textfloat: right;이미지 박스에 설정하여, 이미지를 오른쪽에 배치float: left;text 박스에 설정하여, text를 왼쪽에 배치positi

애플 스크롤 UIposition: sticky; top: 400px;이미지가 올라가다가 top: 400px; 지점에서 멈춘다.스크롤 이벤트 감지0번째 카드 박스를 들고 와서 css()css 직접 변경하여, 투명도와 크기를 조절하였음투명도 변경0번째 사진과 1번째 사진이

터치 & 드래그 이미지 슬라이드여러가지 종류의 터치를 지원한다.다운받기hammer.jscdn버전head tag안에 복붙이미지 슬라이드반드시 hammer.js적용 & 터치기능 적용을 해야지 여러가지 터치 기능을 이벤트 설정할 수 있다.설정해야할 이벤트리스너의 종류가 많다

한 글자씩 입력되는 애니매이션 만들기문자열의 글자를 일부분 떼오고, 변수에 추가시킨후에, h1 tag의 content에 넣음"a" -> "ab" -> "abc" -> ... -> "abcde"코드가 0,1,2,3,4 숫자만 다르고 나머지는 같음 -> 반복문화단, 500