개발자연습노트

이렇게 생긴 UI를 탭이라고 합니다.어떻게 만드냐면 그냥 UI 만드는 step 그대로 따라가면 완성입니다. 버튼3개, div 박스 3개 만들어두고버튼누르면 거기 맞는 div박스를 보여주면 끝입니다.    시간아까우니 디자인은 미리 해옴 설명하다  Products Information Shipping 상품설명입니다. Product 스펙설명입니다. Information 배송정보입니다. Shipping  아무데나 복사붙여넣기하면 탭나옴 어떻게 만들었는지 설명하자면 1. 태그로 버튼 3개 만들었습니다.2. 태그로 박스 3개 만들었습니다.3. 제가 만든 orange 클래스명을 추가하면 버튼누른듯한 효과를 줄 수 있습니다 (매우편리) 4. 제가 만든 ..

문제 1. 스크롤바 100px 내리면 로고 폰트사이즈 작게 만들기 그런 재밌는 애니메이션을 만들어봅시다.  설명하다 .navbar { position : fixed; width : 100%; z-index : 5}.navbar-brand { font-size : 30px; transition : all 1s;}일단 상단메뉴는 상단고정하고 로고 폰트사이즈를 키운 채로 시작합시다.그리고 스크롤바를 100px 정도 내리면 폰트사이즈를 줄여봅시다.그럼 스크롤바를 얼마나 내렸는지 알 수 있어야겠군요        스크롤 이벤트리스너  window.addEventListener('scroll', function(){ console.log('안녕')});스크롤바를 조작하면 scroll 이벤트가 발생합니다.그..

게시판 스타일 지정한 파일이 제대로 로드 안 되었거나,스타일 지정한 클래스가 충돌나서 그런 것 같네요.해당 부위에 별도로 아이디 부여 후, 그 아이디에 맞춰 새로 스타일 짜시면 될 것 같습니다.  1. list-group를 건드니 ui 가 깨짐 2. list-group으로 dis paly none 하면 사라지나 작동은 안됨.3. 새로운 클래스 id를 만들고 해도 작동이 실패 4. important 로 해결ul class="list-group show" id="group">        li class="list-group-item">An itemli>        li class="list-group-item">A second itemli>        li class="list-group-item">A..

함수 function 문법은- 긴 코드 짧게 축약해서 쓸 수 있고 - 파라미터로 기능업그레이드도 가능하다고 했습니다.- 오늘 배울 return을 쓰면 함수를 쓰고나서 원하는 값을 그 자리에 퉤 뱉을 수도 있습니다.   함수안에서 쓸 수 있는 return 문법 함수 안에서 return이라는 문법을 사용할 수 있습니다.return 오른쪽에 아무거나 적으면 함수가 실행되고난 자리에 return 오른쪽에 있던 값이 뾰로롱 남습니다.  설명하다 function 함수(){ return 123}console.log(함수());그래서 진짜인지 확인하기 위해 함수() 실행하고나서 123을 남기라고 적었습니다.출력해보니 진짜 123 잘 출력되는군요. 이렇게 함수() 실행하고 나서 그 자리에 뭔가 결과를 남기고 싶으면 r..

슬라이드되는 UI들을 캐러셀이라고 합니다.어딜가나 있는 UI 라서 한번 만들어봅시다. 버튼이 많아보이는데 다 한 번에 만들려고 하면 매우 어렵습니다. 그건 천재들이나 하는 것이고가장 간단한 1개 기능만 먼저 개발하면 쉽습니다.우린 쉽게 2번 사진 보여주는 버튼의 기능만 먼저 만들어봅시다.    one-way 애니메이션들어간 UI 만드는 법은 1. 애니메이션 시작 전 화면 만들기2. 애니메이션 종료 후 화면 만들기3. 언제 종료화면으로 변할지 JS 코드짜기4. transition 추가하기 이거 그대로 하면 된다고 했습니다.     1. 애니메이션 시작 전 화면 만들기 html css로 알아서 만들면 됩니다. css 실력이 가장 중요하겠군요.   ▲ 사진이 이렇게 슬라이드되어서 보이려면사진을 미리 어떻게 배..