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

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

>> 웹서버와 호스팅 서버 그리고 클라우드 호스팅 1) 직접 운영하는 서버 ㄴ 개인이 컴퓨터를 구매하거나 빌려서 직접 저장 공간을 만들어 서버를 운영 ▶ 장점 → 개개인이 서버를 관리할 수 있음 → 자유롭게 수정할 수 있음 ▶ 단점 → 서버에 관한 지식이 없는 사람은 관리하기 어려움 → 인터넷 속도면에서 불리할 수 있음 ※ 호스팅 서버나 임대형 웹서버를 이용하는 것이 더 경제적이고 실용적 2) 호스팅 서버 ㄴ 특정 업체에서 웹서버를 준비해 놓고 웹 서버의 일부 공간을 월 사용료를 받고 빌려주는 서비스 ▶ 장점 → 기본 설정이 완료되어 있어 월 사용료만 내면 바로 서비스 이용 가능 ▶ 단점 → 개개인이 서버를 관리하거나 수정하기 어려움 → 여러가지 제약이 있을 수 있음 3) 클라우드 호스팅 ㄴ 웹 서버나 ..

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

HTML - 다중 입력창 (폼 form 양식) HTML → 박스 형태의 입력창 만들기 - ~으로 클로징 태그를 작성해야합니다. - 사용자가 여러 줄의 데이터를 입력할 수 있는 창을 만드는 것입니다. - rows 속성과 cols 속성을 이용하여 크기를 설정해 작성 영역을 만들수 있습니다. [ textarea 기본 형태 ] ↓ 태그는 전체 선택 항목들을 감싸고 태그는 각 항목을 감싸는 형태입니다. 에서 자주 쓰는 속성 → autofocus, cols, row, required, placeholder autofocus : 자동으로 텍스트를 입력할 영역을 알려주는 속성 cols : 입력할 수 있는 글자수를 의미 (= 입력창의 너비를 결정) → 코드예시) cols="숫자" ← 이 숫자는 작성가능한 숫자를 말한다...

HTML 태그 - 선택박스 (폼 form 양식) HTML → 선택박스 - ~으로 클로징 태그를 작성해야합니다. - 는 선택 옵션 태그로 ~태그 요소를 1개 이상 가지고 있어야합니다. - 전체 항목 안에서 선택된~은 서버로 전송이됩니다. [ select 태그의 기본 형태 ] ↓ 태그는 전체 선택 항목들을 감싸고 태그는 각 항목을 감싸는 형태입니다. 옵션 내용 에서 자주 쓰는 속성 → selected selected : 옵션들 중에서 미리 선택되어지는 옵션을 지정하는 속성으로 selected를 쓴 의 순서와 상관없이 가장 먼저 표시가 됩니다. [ 실전예시 ] 이메일 : @ 직접 입력 naver.com gmail.com nate.com hanmail.com [ 실행시 화면 ]

HTML 태그 - 폼 양식 HTML 태그 - button 요소는 사용자가 누를 수 있는 버튼입니다. ↓ 버튼 태그의 기본 형태 ~ button에서 자주 쓰는 속성 → type, name, autofocus, onclick type : 입력 태그의 유형을 결정하는 속성 name : 서버로 전달되는 이름을 작성 (※사용자가 임의 지정합니다.) autofocus : 웹 페이지가 로드(load)될 때, 포커스가 되는 속성 onclick : 버튼이 클릭되었을 때 발생되는 이벤트의 속성 [예제] onclick [실행화면] [ 버튼 태그에 자주 사용하는 속성들 ] type의 속성값 → button, submit, reset button : 클릭할 수 있는 버튼 타입. submit : 데이터를 제출, 전송한다는 버튼 ..