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..

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

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

[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 코드 사용 예시 전송하기 >

✅ [jQuery] 오른쪽 배너 고정 : 플로팅배너 자동으로 따라다니는 jQuery 소스 ➡️ HTML ➡️ CSS ➡️ jQuery

파비콘(favicon) 만들기 웹 사이트 적용하기 html 작성하기 : meta tag ✅ 파비콘(favicon)이란? → 웹 사이트를 대표하는 아이콘으로 웹브라우저의 주소창에 아이콘으로 표시되는 이미지를 말합니다. ✅ 파비콘(favicon) 만드는 방법 → 포토샵(photoshop)이나 일러스트(ai) 등 이미지 툴을 사용해 16*16 사이즈의 로고 이미지 만들어줍니다. → ⭐️ 하지만, 이미지가 깨지는 것을 방지하기 위해 다양한 사이즈의 파비콘 이미지 제작을 위해 192*192* 사이즈로 로고 이미지를 만들어 저장해줍니다. → 이미지 확장자 : png , jpg → 아래 링크로 들어가서 아래의 순서대로 다양한 사이즈의 파비콘 이미지 만들어줍니다. → 제작된 이미지를 다운받아주고, html 연결 코드를..

✅ [Bi] Google font : 구글 폰트 사용 + 적용하기 https://fonts.google.com Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com ↓↓↓ ✅ 폰트 다운받기 ↓↓↓ ✅ 원하는 사이즈 옆에 Select this style 선택하면 오른쪽에 팝업이 열림 ✅ 폰트를 html과 css 적용하고 싶을때 → 우측 "Selected family" Review 박스 하단 태그를 복사해서 홈페이지 태그 안에 붙여넣기 → css 파일에 font-family 붙여넣기 font-family: 'Montserrat', sans-serif; font-family: 'Bla..

✓ 부트스트랩 파일 다운로드 ✓ 부트스트랩 사용하기 위해 필요한 파일 → css 링크, jQuery, bundle 📍jQuery도 따로 다운로드 📍jQuery 다운로드 링크 ↓ ↓ ↓ https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. jquery.com

CSS _선택자_속성 선택자(attribute selectors) >> HTML 요소가 가지고 있는 특정 속성의 속성값을 선택해서 변화를 주는 선택자 [ CSS - 속성 선택자 문법 ] [ html 작성 코드 ] 속성 선택자 ID : PW : [ css 작성 코드 ] @charset "utf-8"; /* 속성 선택자 */ input[type="text"] { background-color: lightpink; } input[type="password"] { background-color: lightskyblue; border: 3px solid red; } input[type="password"]:focus { background-color: #ffc13a; } [ 실행 화면의 변화 ] [ :focus ..

CSS : hover CSS - 선택자 hover는 사용자의 마우스 커서가 링크나, 글자 등 위에 올라가 있는 상태로 마우스 커서 이동에 따라 스타일 변화를 줄 때 사용합니다! ↓↓↓ [실제 예시 사진] " 홈페이지에서 메뉴바나 마우스가 올라갔을 때 변화하는 모습 많이 보셨죠? " [ html - css 코드 ] HOME PRODUCT SHOP EVENT [실행화면]

HTML semantic tag _ 시맨틱태그 HTML : 웹 문서 구조 만들기 - 시맨틱 태그란? 웹 문서 구조에서 의미가 있는 태그를 말함! 왜 시맨틱 태그를 사용해여할까요? 1). SEO(search engine optimization) : 검색엔진최적화 때문에 ⇢ 시맨틱 태그는 로봇이 웹 문서를 읽을 때 도움이 되며, 검색어에 맞게 웹사이트를 노출시켜준다. ✓ 검색엔진에서 노출이 잘 되어야하는 사이트의 경우, 시맨틱 태그를 잘 써주면 좋아요! 2). 웹 접근성 : 스크린 리더의 활용에 좋기 때문에 ⇢ 장애인분들이나 노인분들이 웹 사이트를 이용할 때 사용하는 화면 낭독기와 같은 보조 기기에서 웹 사이트를 더 정확하게 이해해 내용을 잘 전달 할 수 있습니다. 3). 유지보수와 높은 가독성 : 영역이 ..

HTML 테이블(Table) 표의 구조 지정해주기 → , , 태그 사용 HTML , , - 표만들었을 때, 테이블에 제목, 본문, 요약의 구조를 지정할 때 사용합니다. - Q : 왜 사용해야할까요? ㄴ 1. 표의 구조를 지정하면 시각장애인분들도 화면 낭독기를 통해 표를 쉽게 이해할 수 있기 때문입니다. ㄴ 2. 표의 영역을 지정해주면 나중에 CSS로 각각 다른 스타일을 줄 수 있습니다. ㄴ 3. 자바스크립트를 활용해 제목은 고정하고 스크롤하는 동작도 구현할 수 있습니다. [ 태그의 뜻 ] : 제목 : 본문 : 요약 ↓↓↓✅그림으로 쉽게 영역을 이해해보세요↓↓↓ 😍 이제 위의 표를 실제로 만들어볼까요?😍 [ 표의 구조 기본 형태 ] 표 제목 제목 제목 내용 내용 내용 내용 [ 실행시 화면 ] ㄴ "색깔이 ..

HTML 테이블(Table) 제목 만들기 - HTML - 표만들었을 때, 테이블에 제목이나 짧은 설명을 붙일 때 사용! - ~ 이렇게 클로징 태그를 작성해야합니다. - 아무런 CSS효과를 넣지 않으면 표 가운데 정렬로 위치합니다. - ~ 안에 작성한 내용은 기본적으로 표 위에 위치하지만, 위치를 바꿀 수 있습니다. → (※ CSS의 caption-side로 위치를 정할 수 있습니다.) [ caption 기본 형태 ] 테이블 제목 넣기 표의 제목 위치 제목 제목 내용 내용 [ 실행시 화면 ] ㄴ "색깔이 안들어가 있어서 테이블의 형태가 구분이 잘 안가시죠?" 아래에 css 요소를 잠깐 넣어 테이블 구분만 해볼께요~😀 (↓↓↓css는 나중에 배울테니 지금은 테이블의 영역만 확인하기!🤩↓↓↓) [ table에..

HTML 테이블(Table) 만들기 - HTML → 테이블태그를 사용해 표 만들기 - ~ ~ ~ ~ 이렇게 클로징 태그를 작성해야합니다. - 태그가 tr, th, td를 감싸고 있는 형태입니다. - : 표의 행을 만드는 태그입니다. - : 표에서 제목을 만드는 태그 → ※ 태그는 테이블(표)의 첫번 째 행에서 사용되며 각 열의 제목을 만드는데 사용합니다. - : 표의 열을 만드는 태그 [ table 기본 형태 ] 열의 제목1 열의 제목2 열의 제목3 2번째행의 1번째열 2번째행의 2번째열 2번째행의 3번째열 3번째행의 1번째열 3번째행의 2번째열 3번째행의 3번째열 [ 실행시 화면 ] ㄴ "색깔이 안들어가 있어서 테이블의 형태가 구분이 잘 안가시죠?" 아래에 css 요소를 잠깐 넣어 테이블 구분만 해볼께..

(VS Code)HTML 준비과정 - 02. 파일 저장하기 & 폴더 구성방법_비주얼 스튜디오 코드(Visual Studio Code) HTML 준비과정 - 02. 파일 저장하기 + 폴더 만들기 Tip! Visual Studio Code 단축키도 같이 알려드릴께요! [ STEP1. 비주얼스튜디오코드에서 html 파일을 새로 만드는 방법 ] ✔️ 1. 첫 화면에서 New File을 눌러 만들기 → 단축키 : Ctrl + N ✔️ 2. 저장하고 싶은 폴더에 html 문서 만들기 🔸순서 > 1) html 문서를 저장할 폴더를 만들기 → 2) Open Folder를 클릭해 폴더를 열기 → 3) 폴더 선택 → 4) VS Code왼쪽에서 저장하려는 파일 위치에서 옆에 첫 번째 아이콘을 눌러서 파일을 만들어주세요! →..

(VS Code)HTML 준비과정 - 01. 작성 프로그램 준비_비주얼 스튜디오 코드(Visual Studio Code) HTML 하기 전 준비과정 - 01. 작성 프로그램 준비 Visual Studio Code - 마이크로소프트에서 오픈소스로 개발하고 있는 소스코드 에디터로 무료로 사용할 수 있습니다. - 다양한 확장을 지원하고 있으며 Extentions 안에서 바로 검색하고 설치할 수 있습니다. ㄴ 쉽게 설명해 핸드폰에서 어플을 설치하는 것 같은 느낌입니다. (↓ 아래에서 설치하면 좋은 Extentions을 소개해드릴께요💜) - 확장을 통해 100개 이상의 언어를 지원하고 있으며, 마이크로 소프트에서 공식적으로 파이썬 Python, C/C++, C#, 도커 Docker, 고 Go, 파워 셸 Power..