천천히 차근차근

아이프레임은 HTML Inline Frame 요소이며 inline frame의 약자이다. 효과적으로 다른 HTML 페이지를 현재 페이지에 포함시키는 중첩된 브라우저로 iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불러와서 삽입 할 수 있다. 사용 방법 여러개의 영상을 반복재생 하고 싶은 경우 src="https://www.youtube.com/embed/wgS_E2GDmAo?autoplay=1&mute=1&loop=1&playlist=Afw_FuW7dkw,XEsKvmv9nCw,wgS_E2GDmAo" playlist에 youtube 영상ID를 ,를 사용하여 이어 붙여주면 된다.😎 자동재생 방법 autoplay=1&mute=1 chrome / enternet explore..

이미지 px 좌표 자동 계산 링크 : http://maschek.hu/imagemap/imgmap/ 이미지맵 좌표 유동적으로 적용하기. 이미지맵의 coords는 고정적인 px로 동적인 화면을 구현할 때는 유동적으로 크기가 줄어들지 않는다. 이를 해결하기 위한 방법 rwdImageMaps 라이브러리 활용하기. rwdImageMaps 라이브러리 Github : https://github.com/stowball/jQuery-rwdImageMaps .first > .second > img { width: 100%; } jQuery를 사용하기 위한 script와 rwdImageMaps 라이브러리를 사용하기 위한 script 총 2개를 head 태그 안에 넣어준다. 위의 코드대로 img, map, area 태그를 ..

우선 지식백과에서 정의한 단어의 뜻입니다. CGI란 common gate way interface의 약어로 WWW 서버와 서버 상에서 등장하는 다른 프로그램이나 스크립트와의 인터페이스 폼을 사용한 메일의 송신이나 게임 등 HTML에서는 불가능한 인터렉티브한 요소를 홈페이지에 받아 들여 쓸 수 있다. 예를 들면 자신의 홈페이지를 만들었을 때 누가 자신의 홈페이지에 접속했고 자신의 홈페이지에 대해 어떻게 생각하는지 알고 싶다거나 홈페이즈를 통해 물건을 주문받는다거나 특정한 데이터 베이스의 내용을 서비스해주고 싶은 경우 홈페이지를 사용하는 사람들로부터 이름이나 주소 등의 자료를 얻어야할 것이다. 그리고 원하는 상품을 고르게 한 후 찾고자 하는 자료의 이름을 입력하도록 해야 할 것이다. 이런 기능을 지원하는 홈..

var msg = '안녕하세요'; function hello(mode, num) { if ( mode == '일본어' ) { msg = '곤니찌와'; } else if ( mode == '영어' ) { msg = '헬로'; } for ( var i = 1; i

※ input radio 독립하여 사용할 수 있다. - checkbox와는 다르다. - 중복 체크를 허용할 수도 있고, 독립적으로 사용할 수도 있다. - 같은 form 안에서 같은 name으로 만들어진다면 중복 허용을 허용하지 않는다. - 다른 form에서 사용하면 별개로 구분하여 사용할 수도 있다. ※ select multiple - select 사용 시, multiple 입력을 하면 여러개를 선택할 수 있도록 한다.

※ [ html, javascript ] 모바일에서 사이트가 PC에서의 픽셀크기 기준으로 작동하게 하기(반응형 하려면 필요) - head.jspf에 meta 코드만 저렇게 입력을 해주어도 모바일 모드에서 자동으로 zoom이 되지 않는다. - 원하는 경우 zoom은 가능(당겨볼 수 있음) ※ 기존 작업 내용 // 아이폰 용 끄기 // 1) Pinch Zoom 끄기 document.documentElement.addEventListener('touchstart', function (event) { if (event.touches.length > 1) { event.preventDefault(); } }, false); // 아이폰 용 끄기 // Double tab Zoom 끄기 var lastTouchEnd..

overflow 안에 사진, 동영상 채울 때. CSS를 이용하여 나 요소같은 오브젝트들을 비율을 유지한 채로 크기를 조정하는 것은 매우 까다로운 부분이다. 오브젝트들이 출력될 공간이 유동적인 크기가 아닌 고정된 크기라면 더욱 골머리를 썩히게 된다. 이에 대응하는 CSS3 속성에 대하여 살펴보자. object-fit 속성 object-fit 속성은 대체되는 요소의 내용(, , , 등과 같은)이 지정된 너비와 높이에 맞게 장착되는 방식을 지정한다. 이는 프로필 이미지나 고정된 크기의 썸네일을 출력하는 다양한 경우처럼 제각각의 크기를 가진 오브젝트등을 넘겨받아 비율을 유지한 채로 일정한 크기로 재가공하는 경우에 유용하다고 할 수 있다. CSS3의 background-size 속성과 매우 유사하다. object..

절대 경로 : https:// ~~~ 와 같이 절대로 변경될 수 없는 경로. 상대 경로 : 본인의 위치를 기준으로 경로를 지정하는. [ test 결과 ] ../ 상위 폴더의 데이터(test file 형식 :. css)를 잘 불러왔음(연결 완료) 이런 식으로 html과 css를 연결했음. css를 필요로 하는 다른 파일들도 상위로 2번 이동하는 동일한 경로에 css를 만들어서 혼용함... 일단 내가 의도했던 위치가 아녔어서 운이 좋지 않았으면 또 멘붕이 왔을 것임. css를 활용하기 위해 html의 좋은 위치?선정이 필요할 것 같음. 구글링 결과 ./ 하위 폴더 이동이라고 검색되었으나 나는... 적용되지 않음..... ㅠㅠ..... 대체 왜... 그리고 다른 폴더에 저장되어 있는 html을 사용하기 위하여..

HTML 한글 깨짐을 방지하기 위해서는 코딩을 할 때, 우선적으로 작성해야 하는 문구가 있다. head, foot 2개의 HTML파일을 생성하여, 이클립스와 호환해서 사용할 수 있다. 다만 head, body 열고 닫는 태그를 나눠서 작성해주고 그 가운데에 이클립스에서 작업한 내용을 더해준다. (샌드위치처럼..) html 코드를 작성하기 위해 사용한 프로그램은 Visual Studio Code로 을 입력해도 웹페이지에서 한글이 깨지는 경우에는 연결한 프로그램인 이클립스의 환경을 동일한 UTF-8로 필히 변경을 해주어야 한다. Window - preferences - General - Workspace - Text file encoding - Default(MS949) ->> ..

메뉴 예시 Home Tutorial Articles Inspiration HTML ↑ body, h2 { margin:0; background-color:pink; } a { color:inherit; text-decoration:none; font-weight:bold; font-size:1.2rem; } body > article > img:first-child { display:block; margin:auto; padding-top:70px; width:940px; } article { text-align:center; } article > img { margin:8px; width:300px; } nav { text-align:center; } nav > section { background-c..

1. React란 무엇인가 React는 페이스북에서 제공하는 자바스크립트 UI 라이브러리다. 즉 React 프론트엔드 라이브러리다. Angular가 프레임워크인 데 반해 React는 라이브러리다. 즉, 웹을 만드는 데 꼭 필요한 도구들이 전부 기본적으로 제공되지 않는다. 그런만큼 가볍고, 선택의 폭이 넓다. React는 컴포넌트 기반이다. 컴포넌트에 데이터를 흘려보내면 설계된 대로 UI가 조립되어 사용자에게 보여진다. 2. 왜 React를 사용하는가? 웹페이지를 만들기 위해서 굳이 프론트엔드 라이브러리를 사용해야 할 필요는 없다. HTML과 CSS, 그리고 순수 자바스크립트 만으로도 웹페이지를 얼마든지 제작할 수 있다. 특히 단순한 정적 페이지를 만드는 것이 목적이라면 React와 같은 프론트엔드 라이브..