HTML A태그로 버튼 클릭시 전화 연결 ↪️ / " 사이트에서 버튼을 클릭하면 전화로 바로 연결이 되는 전환 버튼을 만들고 싶을 때😊" / / [ 💖 기본 문법 ] ↪️ a태그 href 사용 ↪️ 클릭시 전화 연결하고 싶은 번호를 href="tel:연결하고 싶은 번호쓰기" 입력하기 전화 연결 버튼 / 🖤css를 적용해서 위에 이미지처럼 버튼을 꾸민 CSS 와 HTML 코드입니다.🖤 ⬇️⬇️⬇️ / PDF 다운로드 > 빠른 제휴 문의 > ✅ 지원 브라우저 ➡️ Chrome 크롬 : 14.0* ➡️ Explorer 익스플로러 18.0 ➡️ Firefox 파이어폭스 : 20.0* ➡️ Safari 사파리 : 10.1 ➡️ Opera 오페라 : 15.0 **Chrome 65이상 및 Firefox는 동일출처(s..

HTML A태그로 다운로드 버튼 만들기 ↪️ Tag / " 사이트에서 버튼을 클릭하면 이미지 또는 자료를 다운받는 기능을 만들고 싶을때😊" / [ 💖 기본 문법 ] ↪️ a태그 download 속성 사용 ↪️ 클릭시 다운로드 하고 싶은 파일 위치가 있는 경로를 href="파일경로 입력 위치" 입력하기 PDF 다운로드 받기​ / 📌 다운로드 파일 이름 설정하고 싶을 때 ↪️ download="저장될 파일의 이름" PDF 다운로드 받기​ / 🖤css를 적용해서 위에 이미지처럼 버튼을 꾸민 CSS 와 HTML 코드입니다.🖤 ⬇️⬇️⬇️ / PDF 다운로드 > 빠른 제휴 문의 > ✅ 지원 브라우저 ➡️ Chrome 크롬 : 14.0* ➡️ Explorer 익스플로러 18.0 ➡️ Firefox 파이어폭스 : 2..

Java 자바 프로그램 public static void main (String[] args) 코드 해석 | 쓰는 이유 / ➡️ 자바의 모든 프로그램은 public static void main (String[] args) 함수로 시작! ↪️ 이 코드의 의미는 무엇일까요? / ✅ Main 메서드 함수 : java로 작성된 프로그램이 실행되면 가장 먼저 실행되는 메서드입니다. 🟠 자바 기본 코드 구성 public class Main { public static void main (String args[]) { System.out.println("Java Study"); } } 🟠 public 의미 ↪️ 제한자 ➡️ main 메서드는 실행프로그램의 기본이 되는 함수로 어디에서나 접근이 가능해야하기 때문에 p..

JavaScript 숫자 3자리마다 콤마 표시하기 자바스크립트 JS / " 숫자를 표시할때 3자리마다 콤마가 표시되었으면 좋겠을 때 사용하는 코드.✌️ 가장 쉬운 방법은 toLocaleString()을 사용하는 것입니다.😊" / ⬇️⬇️⬇️숫자 콤마 구현⬇️⬇️⬇️ ⇣ 숫자를 입력하면 자동으로 3자리마다 콤마가 표시됩니다 ⇣

JavaScript 숫자 카운트 애니메이션 만들기 자바스크립트 JS / " 웹사이트 홈페이지를 보면 숫자가 올라가면서 카운팅되면서 고객의 시선을 잡는 페이지가 있는데, JS 카운트 애니메이션으로 구현 가능합니다.✌️ 고객에게 어필할 수 있는 숫자 카운트 구현 코드입니다.😊" / ⬇️⬇️⬇️쏘카 홈페이지 숫자 카운팅 예시⬇️⬇️⬇️ ✅ 숫자 카운트 애니메이션 Code ↪️ HTML > CSS > JS - 📍font : Montserrat 0명의 회원이 쏘카와 함께하고 있습니다. 지금 바로 쏘카 드라이브를 시작하세요.

React 리액트 리액트를 사용하는 이유 ↪️리액트의 장점과 단점 / 리액트를 사용하는 이유😊 ↪️ web-app : 모바일앱이랑 사용성이 비슷 ↪️ web-app을 쉽게 만들 수 있는 : React / Angular / Vue / [ 리액트의 장점 ] ✅ 모바일앱으로 발행이 쉬워요! ㄴ React Native : 모바일 환경도 개발 가능 (React Native 사용시 JS로 개발해 안드로이드 앱과 IOS 동시에 만들 수 있음) ✅ 모바일앱처럼 빠르게 전환되는 UX로 사용자 만족 높음 ㄴ 빠른 업데이트와 렌더링 속도 ➡️ React는 DOM을 직접 수정하는 것이 아니라 업데이트 해야할 최소한의 부분만 찾아서 변경하기 때문에 ✅ 카카오 많은 대기업에서 사용하는 비즈니스적 강점 ✅ 재사용성(Reusabil..

Java 자바 기초 자바란? ➡️ 자바는 객체 지향언어로 개발된 프로그래 언어. ➡️ 현재 전세계에서 가장 많이 사용하는 프로그래밍 언어 중 하나. / ✅ 자바 언어의 장점 → 독립적으로 실행이 가능 → 자동 메모리 관리 지원으로 다른 언어에 비해 안정성이 높음 → 연산자 오버로딩을 금지하고 제네리을 도입 > 코드의 가독성이 높은 편 → 현재 자바 코드예제가 많아 다양한 코드를 볼 수 있음 ✅ 단점 → 실행 속도가 느림 : 자바의 실행을 위해서 가상 머신을 거쳐야해 → 예외 처리를 개발자가 하나하나 다 처리해주어야 함 → 작성하는 코드의 길이 가 긴편 🟠 자바 기본 코드 구성 class Test { int code1; String code2; public void method1() { System.out..

[HTML] html / 블럭라인과 인라인 특징 정리

[css] / css style 속성 포지션일때 위치 조정하기 ✓ position : absolute 가운데, 중앙 정렬하기

[CSS] width height 100% 와 100vh의 차이점 ✅ 상황 → 넓이와 높이 속성 값을 설정할 때 %와 vh의 중 어떤 속성값을 사용해야하는지 고민이될 때 ✅ 100% 와 100vh의 차이점 → (%)퍼센트는 부모의 태그를 기준으로 퍼센트를 측정하여 사이즈를 표시 → VH는 Viewport Height라는 의미로 화면의 100퍼센트를 사용하겠다는 의미

[HTML] VIDEO 태그 / 페이지에 동영상 넣기 웹 홈페이지 ✅ 상황 → 웹 홈페이지를 만들다보면 동영상을 넣고 싶을 때, 또, 메인 페이지에서 풀화면으로 동영상을 깔아두고 싶을 때! ✅ 방법 → HTML video tag 사용 🟠 video tag 기본 문법 🟣 video tag 추가 문법 비디오가 깨졌을 때 나올 텍스트 video error(현재 브라우저는 비디오를 재생할 수 없습니다) 🟢 video tag 속성 설명 ➡️ src : 동영상 주소를 적는 속성 ➡️ controls : 동영상을 재생하기 위한 바를 표시하는 속성 ➡️ loop : 동영상 반복을 결정 ➡️ muted : 음소거 설정 ➡️ autoplay : 페이지가 로드되면 바로 동영상이 재생되도록 설정 ➡️ poster : "이미지..

[css] css background : transparent 란? / background : none 이랑 차이점은? background: none; background: transparent; ✅ background : transparent 란? → ✅ css background : transparent vs background : none ?? → 간단하게 background의 색상을 없앨 때 우리는 none(없애기), transparent(투명)을 사용할 수 있음 → 이 둘의 차이점을 알려면 background 속성을 알아야하기 때문에 아래에서 자세히 설명! ✅ 어떤 경우에 사용할까? → 배경색이 지정된 요소의 배경을 없애야하는 경우에 사용 🟣 background 속성 background-colo..

[Api] 카카오 주소찾기 api : kakao html input text api HTML / CSS / JS ✅ 상황 → 회원가입 폼이나 마이페이지 등 회원 정보 등록에서 흔히 볼 수 있는 주소 찾기 기능 구현하고 싶을 때 ✅ 방법 → 카카오 주소찾기 Api 사용 ✅ 사용 방법 → HTML 작성 → CSS input 디자인 → JS 연동 및 선택 입력값 세팅 🟢 아래에서 기본 사용법을 확인할 수 있습니다. https://postcode.map.daum.net/guide Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.ne..

[jQuery] 마우스 스크롤시 실행되는 함수 : window scroll ✅ 상황 → 브라우저 화면에서 스크롤시 페이지에 변화가 생겼으면 좋겠음 ✅ 방법 → 마우스 스크롤시 실행되는 jQuery 함수 window scroll 사용 $(window).scroll(실행할 내용 추가); ↓↓↓ 👩🏻‍💻👩🏻‍💻👩🏻‍💻 ↓↓↓ 🟢 HTML BRAND CONCEPT SPOTMATE 누구나 쉽게, 원하는 목적지로 편하게 이동하는 경로가 비슷한 드라이버를 찾아 출발지부터 목적지까지 편하게 이동해보세요. 사람들은 원하는 장소로 이동하기 위해서는 이동할 수 있는 수단이 있어야합니다. 하지만, 운전면허가 있어도 운전을 잘하지 못하거나 자신의 모빌리티가 없는 경우에는 대중교통을 이용하거나 택시를 타야하합니다. 하지만 날씨가..

CSS 이미지 자동 슬라이드 만들기 : 흘러가는 이미지 ✅ 상황 → HTML과 CSS만으로 이미지 자동 슬라이드 만들고 싶을 때 🟢 HTML 🟢 CSS @charset "UTF-8"; #slider { overflow: hidden; position: relative; /* border: 20px solid red; */ /* // 이미지 보여지는 뷰 부분만큼 px조절 */ width: 1440px; height: 140px; box-sizing: border-box; } .image-box { /* 원본+클론의 총 합 */ width:5478px; height:100%; display:flex; flex-wrap:nowrap; animation: bannermove 20s linear infinite;..

CSS 스타일 제거 : reset CSS (기본 스타일 지우기) ✅ 상황 → html 태그와 기본적으로 적용되는 브라우저 기본 스타일을 제거 하고 싶을 때 ✅ 방법 → css에서 스타일을 제거하는 코드를 적용해줍니다. ✅ 순서 → html파일 작성 → reset css 코드를 작성 → reset.css 파일을 전체 style.css 파일에 import 🟢 HTML에 CSS 파일 연결 → 저는 보통 style.css 파일을 만들어 적용되는 css 파일을 여기에 모아 import 합니다! 🟢 style.css 파일에 import 하기 @charset "UTF-8"; /* 저는 보통 reset코드를 common.css에 모아줍니다*/ @import url("common.css"); 🟢 css 파일에 reset..

[HTML] a태그 Href 속성 안에 Javascript Void:(0) 를 사용하는 이유 이랑 다른점 🟣 코드 사용 예시 Tistory zoo-land ✅ 상황 → 보통 내부나 외부링크를 걸고 싶을 때, a태그의 href로 링크를 걸어주는데 아직 링크가 정해지지 않은 경우 href="#"을 사용해야할지 Javascript Void:(0)을 걸어야할지 고민이 된다면? ✅ Javascript Void:(0) 를 사용하는 이유는? → undefined 의 결과를 얻기 위해서!! "링크가 작동하지 않게 하기 위해 사용하는데, 즉 클릭을 해도 실제 클릭 이벤트가 작동되지 않기 위해 사용 하는 것" ✅ 이랑 다른점은? → href="#"으로 작성하면 실제로는 링크가 없으니 이동하지 않은 것처럼 보여 Javasc..

[HTML] rel="noopener noreferrer" noopener noreferrer 노오프너 노리퍼너 사용 이유 ✅ noopener 노오프너란? → 링크된 페이지에서 window.opener을 사용해서 링크를 건 페이지를 참조 할 수 없게 됨 링크된 페이지와 링크를 걸어둔 페이지를 서로 다른 프로세스로 취급되기 때문에 서로 연결되어 퍼포먼스가 떨어진다거나, 신뢰할 수 없는 페이지 이동의 경우에도 사용하면 좋음 ✅ noreferrer 노리퍼너란? → 노리퍼너 코드를 작성하면 다른 페이지로 이동할 때, 링크를 건 페이지의 주소 정보를 브라우저가 Referer : HTTP 헤더로 리퍼러로서 송신하지 않음 ✅ noopener noreferrer 사용하는 이유 ? → a태그에서 target="_blan..

[HTML] a태그 스타일 없애기 : css 스타일 지우기 text-decoration:none; ✅ 상황 → a태그가 기본적으로 가지고 있는 스타일을 지우고 새롭게 스타일을 만들고 싶을 때 ✅ 방법 → CSS로 a태그 기본 스타일을 없애는 text-decoration:none; 코드를 적용해 기본 스타일을 제거해줍니다. 🔵 css 적용 코드 @charset "UTF-8"; /* hyper link */ a, a:link, a:visited{text-decoration:none;} a:active, a:hover{text-decoration:none;}

html 특수기호 특수문자 리스트 정리 자주쓰는 리스트 정리 표현문자 문자표현 숫자표현 내용 > > 보다 큰 = = 등호 & & & Ampersand " " " 따옴표 공백 Non-breaking space | ¦ ¦ 끊어진 수직선 ⓒ © © 저작권 ≪ « « 왼쪽 꺾인 괄호 ≫ » » 오른쪽 꺾인 괄호 · · · Middle dot ¡ ¡ ¡ 거꾸로된 느낌표 ✅ html 코드 사용 예시 전송하기 >