개발자연습노트

이렇게 생긴 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 실력이 가장 중요하겠군요.   ▲ 사진이 이렇게 슬라이드되어서 보이려면사진을 미리 어떻게 배..

저번시간 숙제는 다크모드 버튼눌렀을 때 버튼 누른 횟수가 홀수면 버튼 내부 글자를 Light로 변경해주세요~버튼 누른 횟수가 짝수면 버튼 내부 글자를 Dark로 변경해주세요~코드를 짜봅시다.그대로 코드로 번역만 하면 됩니다.    설명하다 var count = 0;$('.badge').on('click', function(){ count += 1; if (count가 홀수면) { 내부글자를 Light로 변경 } else { 내부글자를 Dark로 변경 }});한글만 잘 채우면 되겠네요.count += 1 왜하냐고요?버튼누를 때 마다 버튼누른 횟수를 계속 업데이트하고싶으니까 쓴 것임     설명하다 var count = 0;$('.badge').on('click', function(){ ..

and/or 연산자 if문 소괄호 안에 조건식을 여러개 동시에 입력하고 싶을 때가 있습니다.1 == 12 == 2이런거 동시에 비교해서 참이면 뭔가 코드를 실행하고 싶으면 and/or 기호와 함께 적으면 됩니다.   if (1 == 1 && 2 == 2){ console.log('안녕')}&& 기호는 논리학의 and 역할을 해줍니다.그니까 왼쪽 오른쪽이 둘 다 true면 전체를 true로 바꿔줍니다.  if (1 == 1 && 2 == 3){ console.log('안녕')}그럼 이건 안녕이 출력안될듯     if (1 == 1 || 2 == 3){ console.log('안녕')}|| 기호는 논리학의 or 역할을 해줍니다.그니까 왼쪽 오른쪽 둘 중 true가 적어도 1개 있으면 전체를 true로 ..

만들기  과 기능을 만들면서 if else 문법을 배워보도록 합시다. 설명하다  전송 닫기 ▲ 모달창 안에 폼 이렇게 만들어보십시오. 그리고 전 닫기버튼도 폼 안으로 옮겼습니다.그리고 success.html 파일도 같은 폴더에 하나 만들어두면 되겠습니다. 파일 내용은 아무 글자나 채웁시다.   지금은 전송버튼 누르면 폼 전송이 되며 success.html로 이동합니다.근데 여기에 제한을 걸어봅시다. 첫 에 입력한 값이 아무것도 없으면 전송버튼 누를 때 알림을 띄워봅시다.  그럼 자바스크립트로 전송버튼누르면저기 에 입력된 값이 공백이면 알림띄워주세요 코드 짜면 되는데 "이런 경우에만 코드 실행해주세요~" 라는 표현법은 배우지 않았습니다.이 경우엔 자바스크립트 if..

모달창 띄우기 숙제 1. 클래스부터 만들어놓읍시다( 재연이 안됨.) 버튼 누를 때 display : block 그냥 대충 줘도 되겠지만 나중을 위해 class 부착식으로 만들어봅시다.  설명하다 .black-bg { (생략) display : none;}.show-modal { display : block;}그래서 css 파일열어서모달창에 붙어있던 기본 class엔 display : none을 추가했고show-modal 이라는 class를 만들었습니다.이제 show-modal 원할 때 부착하면 모달창 보일듯요      모달창 띄우기 숙제 2. 버튼클릭시 모달창 띄워주세요 버튼클릭시 모달창 띄워달라고 컴퓨터에게 명령주면 되는데"띄워주세요~" 라고 코드짜면 컴퓨터가 알아듣겠습니까.지능이 없는 친구이기 ..

버튼누르면 등장하는 서브메뉴를 만들며자바스크립트로 class 탈부착하는 문법을 배워봅시다.   Bootstrap 설치해서 쓸 것임 Bootstrap css 파일을 설치해놓으면버튼, 탭, 메뉴 같은걸 복붙식으로 개발할 수 있습니다.css 짜기 귀찮으니 설치해봅시다.구글에 bootstrap 검색하면 나오는 맨 첫 사이트 들어가보면 되겠습니다. 그리고 get started 버튼 누르면 됩니다.1. 우선 우측 위에서 버전이 5.X 버전인지 확인한 후에   2. css 파일은 태그 안에,3. js 파일은 태그 끝나기 전에 붙여넣으면 설치 끝입니다. https://getbootstrap.com/docs/5.1/getting-started/introduction/#starter-template모르겠다면 그냥 sta..