잉여개발자

👉 로딩바 예제 (HTML, CSS, CSS-Animation) 사용 👉 HTML 코드 (loading.html) loading 👉 CSS 코드 (loading.css) body {background: #333333;} /* Rotation Box */ @keyframes rotate-loading { 0% {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);} 100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transfor..

리뷰 평점 매기거나, 별점 매길때 재사용하기 좋은 코드.. 기능 1) 마우스 Hover 시 색 들어옴 기능 2) 별점 클릭시 JavaSciprt로 value 전송 👉 예시 사진 👉 HTML 파일 ★ ★ ★ ★ ★ 👉 CSS 파일 .star-rating { display: flex; flex-direction: row-reverse; font-size: 2.25rem; line-height: 2.5rem; justify-content: space-around; padding: 0 0.2em; text-align: center; width: 5em; } .star-rating input { display: none; } .star-rating label { -webkit-text-fill-color: tra..

👉 입력값 검색 기능 + Dropdown 되는 Input 만들기 food_menu 👉 예제 사진

Button을 누르면 Video를 바꿔서 틀어주는.. 걸 만들고 싶었는데 인터넷 예제들이 속 시원한게 없어서 정리 해놓고 담에 사용하려고 함. 방법 1. Vanila JS 방법 2. JQuery (해당 방법은 특수 구현엔 약간 한계가 있다고 함) Vanila JS로 Video src 변경 JQuery로 Video src 변경

1. Flex 란 Flexible Box, Flexbox 라고 불리며, 레이아웃 배치 전용 기능으로 고안됨. 기존 레이아웃에 사용 되던 float / inline-block 등의 기존 방식보다 훨씬 효율적이고 편리한 기능들이 많음 2. Flex 적용 가능한 기본 HTML 구조 부모 (Flex Container) : div.container 자식 (Flex Item) : div.item item 1 item 2 item 3 3. 컨테이너(.container) 에 적용되는 속성들 /* 아이템들은 기본적으로 '내용물'의 width 만큼 차지 '컨테이너'의 height 만큼 차지 */ .container{ display: flex; display: inline-flex; /* 배치 방향 설정 */ flex-di..

1. JQuery Javascript로 HTML을 쉽게 제어 목적 JavaScript Document 기반 접근은 복잡하므로 대신 사용. 2. JQuery Selectors 이름, ID, 클래스, 유형, 속성 값등을 기반으로 HTML 요소 찾는데 사용 $("p") 요소 선택기 $("#test") id 속성 기반 찾기 $(".test") class 속성 기반 찾기 3. JQuery 이벤트 메서드 Mouse, Keyboard Events, Document, Windows, Form Events 등의 DOM 이벤트 메서드 $(document).ready() 문서 로드시 함수 실행 $("p").click(**함수**) HTML 요소 클릭시 함수 실행 $("p").dblclick(**함수**) HTML 요소 더블..

1. 변수 타입 let 변수 선언 const 상수 선언 (함수 포함 대부분 선언) 2. 데이터 타입 Boolean 논리요소 (True, False) Number, BigInt 숫자 (+infinity, -infinity, NaN 값도 존재) null, undefined 고의로 없다고 설정한 값 / 미설정값 String 텍스트 3. 비교연산자 === 두 값이 타입까지 완전히 일치하는지 확인 == 타입 제외 검사 (EX. 숫자 1과 문자 1, 0과 False, Null과 undefiend) 4. 함수 선언 function hello (name) { } 화살표 함수 const add = (a, b) => { return a+b; } 5. 클래스 (Class) 선언 (객체 변수, 객체 함수) const dog ..

1. CSS (Cascading Style Sheets) HTML 문서를 디자인 하는데 사용되며, [선택자, 선언, 속성] 세 가지로 이루어짐. 선택자(Selector) : HTML 태그들의 이름을 활용 ex) class ("."), id("#") 속성 (Property), 값 (value) : 해당 HTML 태그의 디자인을 위한 속성과 속성값을 의미. ex) magin:10px 여러 속성을 줄 때는 세미콜론(;)으로 구분. ex) margin:10px; padding:10px 2. 주요 CSS 속성 값들 box-model width, height 가로, 세로 (auto : 기본값 / px : 픽셀) padding box-model 의 안쪽 여백 영역 ex) padding : 10px => 상하좌우 10..

1. 기본 태그 웹 문서의 유형을 html로 지정 문서 언어를 영어로 지정 브라우저의 정보를 입력하는 곳 메타 데이터 ex) 문서 제목 2. 문서 구조 태그 문서 내용 영역 헤더 영역 메인 영역 콘텐츠 영역 사이드 바 영역 바닥 영역 ( header 영역) 내비게이션 영역 3. 내용, 텍스트 태그 ~ 제목 블럭 영역 단락 줄 바꿈 인용문, 들여쓰기 적용됨 , 텍스트 굵게, Bold , 텍스트 기울임 텍스트 밑줄 텍스트 취소선 하이퍼 링크 라벨 이미지 , 오디오, 비디오 4. 목록 (List) 태그 순서가 있는 목록 (ordered list) type "1" 숫자(기본값) "a" 영문 소문자 "A" 영문 대문자 "i" 로마 숫자 소문자 "I" 로마 숫자 대문자 설명할 용어 설명할 내용 순서가 없는 목록 (..