<HTML/CSS> 부트스트랩
* container *: 전체박스에 양쪽 마진을 균등하게 줌. * row* : 컨텐츠들을 균일하게 가로로 정렬해줌. 한줄(행)은 총 12칸 임 * col* : row언애소 col 사용시에 균일하게 컨텐츠를 쪼개줌. 가로로 원하는 크기로 쪼개고 싶다면 col-차
<JS> 스크롤 이벤트로
window.scrollX() :가로축이동 -> 유저가 얼마나 스크롤바를 옆으로 밀엇나 window.scrolly() :세로축이동 -> 유저가 얼마나 스크롤바를 내렷나 = 예전에는 window.pageYoffset 으로 사용했음. window.scrollTo(x,
<JS> 캐러셀 만들기
캐러셀 : 회전목마라는 뜻. 슬라이드 되는 UI 를 말함 미리 html, css 로 화면들을 가로로 길게 붙여놓는다. 버튼을 누르면 보일 이미지가 당겨오거나 당겨가게 만든다. one-way 애니메이션 들어있는 UI 만들기 시작화면 만들기 최종화면 만들기 원할때
<JS> 정규식
-문자 검사 .includes('검사할문자') : '검사할문자'가 들어있는지를 검사할수잇음. ->숫자가 하나라도 들어가나, A로 끝나냐, 한글이 들어있냐, 영어가 들어있냐 이런건 안됨. -정규식: 문자를 검사할 수 있는 식. /검사할문자/.test('검사 당할 문
<HTML/CSS> 애니메이션 만들기
애니메이션 만들때는 기억하자!! 시작스타일 만들기 최종스타일 만들기 언제 최종스타일로 변하는지 transition 속성으로 애니메이션 입히기.✓ 만들때 어려웠던점 처음에 마우스를 사진에 올렸을때 회색 박스가 보여지게 하는건'opcitiy 조절로 하면 되겠다.' 생각했지
<JS> setTimeout() & setInterval()
-setTimeout : x초 후에 코드 실행됨 -Web Browser API (웹 API)
<JS> Return 문법 과 소수점
📍 function 문법 다시 생각해보기 긴코드를 축약해서 쓸 수 있음 파라미터 추가 기능 return 을 쓸수 있다. 📍 return 명령문 ✓ return 의 특징 return 왼쪽에는 아무거나 쓸수있다. return 아래에 있는 코드는 실행되지 않는다 (리
<HTML/CSS> 글자체를 가져와보자
📍 CSS 에서 폰트를 바꿀 수 있는 font-fmaily 속성 font-family 여기서 지정하는 폰트 또는 부모태그에서 inherit 되어 body 태그에 적용되게 css 작성함 📍웹폰트 첨부방법 CSS파일에서 @font-face 속성으로 불러올 수 있음
<HTML/CSS> 반응형 웹 만들기
📍 반응형 웹이란? 요즘 다양해진 브라우저 사이즈에 맞춰서 UI 의 디자인이 바뀌는 것을 말한다. 📍 반응형 웹에서 많이 사용하는 단위 vw: 브라우저에 보이는 가로폭 vh: 브라우저에 보이는 세로폭 % : 부모태그의 크기에 몇%을 받아오는지 rem: 기본
<JS> 변수문법
📍 변수문법 자료를 잠깐 저장할 수 있다. >var or let or const 작명 = 넣을값; 변수를 쓰는 이유? 길고 복잡한 자료들 저장가능 특정 값을 기억하게 만들때 변수의 선언, 할당, 재할당, 범위 변수의 종류 (차이) var: 재선
<JS> if 문을 활용한 실습
콘솔 창에서 삼육구 게임을 해보자! 3의 배수에 박수, 아닐때는 통과 임 3의 배수 중에 9의 배수이면 박수 두번쳐라!
<JS> if & else 와 연산자
📍 if 문법 (조건문) 조건부로 코드를 실행하고 싶을때 if 문을 사용함. if (조건식) { 실행할 코드 } 의 형태임 조건식은 보통 등호, 부등호 등이 많이 들어가고, 조건식이 참(true) 일때 중괄호안의 코드를 실행해줌 원래 조건식 자리에 true/
<HTML/CSS> 권장하는 작명법 (창의력 딸리는 사람에게 필수 😜 )
작명시 모듈단위로 나눠서 작성하는 방식작명 시 공통된 스타일에 클래스명 하나, 세부적으로 다른 스타일에 클래스명 하나를 작명하여 사용한다. 장점CSS 코드의 양이 줌코드 짜는 시간이 단축됨.유지보수가 편리함단점 : 너무 많아진 클래스명 때문에 가독성이 떨어질 수 있다.
<HTML/CSS> 혼자서 정리하기 위한 '가상 클래스' 와 '가상 요소'
배울때는 '아~' 하고, 선생님이 하시는 걸 보고 따라 할때는 쉬웠던 것들인데 막상 혼자 하니 어려웠고 이렇게 사용하는게 맞나 싶었다. 🤦🏻♀️머리속에 있는 것을 글로 적으면 더 명확하게 알 수 있기에 혼자서 정리를 한번 해보는 시간을 갖도록 하자.선택자 뒤에 붙
<JS> 모달창 만들어보기 (feat. jQuery 사용해보자)
jQuery : 자바스크립트의 긴 코드를 단순하고 보기 좋게, html 조작을 쉽게 바꿔주는 라이브러리jQuery 설치하기 jQuery cdn 검색해서 jQuery 홈페이지에서 script 태그를 찾아서 html의 head 태그안에 붙여넣기 → 그 밑부분부터 jQuer
<JS> 서브메뉴 만들어보기 (feat. 파라미터문법, addEventListener, querySelector 등 )
function의 파라미터 문법을 쓰는 이유같은 함수가 여러개 적히는것 보다, 하나의 함수만으로 다양한 기능을 사용하게 할 수 있음. 파라미터 문법의 생김새 html 태그 옆에 onclick 을 사용하여 적던 JS 들로 읽기가 더 힘들어짐. 이럴때는 addEventL
<JS> JavaScript 시작!
📍 Javascript 기초 시작! 👩🏻💻 JavaScript 의 처음 목적은 웹브라우저 조작 하는 일에 그쳤지만, 현재는 JS 로 그 이상의 많은 개발을 할 수 있는 세상이 되었다. JS 만 잘 해도 개발의 대부분을 할 수 있게된 것이다!! 지금 시점