Gwni Lab GwniLab

input 태그 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. 사용자 에이전트에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재합니다. 입력 유형과 특성의 다양한 조합 가능성으로 인해, 요소는 HTML에서 제일 강력하고 복잡한 요소 중 하나입니다.22가지 type을 지원합니다. submit, reset, button 이외에 문자열, 숫자, 시간, 파일 등 데이터 형식에 따른 다양한 선택지가 있습니다. 속성 type="submit" 📌 을 form handler에 데이터를 제출하기 위한 버튼으로 지정한다. form handler는 보통 데이터를 처리하는 서버단 페이지로 지정된다. 버튼에 value 속성을 지정하면 에 기본값(default value)로 표시된다...

태그는 웹 페이지에서의 입력 양식을 의미합니다. 로그인 창이나, 회원가입 폼 등이 이에 해당되죠. 사용자로부터 데이터를 입력받을 때 사용하며, 의도에 따라 다음의 11가지 태그들을 적절하게 조합해서 사용합니다. 텍스트 필드에 글자를 입력하거나, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 백엔드 서버에 양식이 전달되어 정보를 처리하게 됩니다. 사용자로부터 입력을 받을 수 있는 HTLM 입력 폼(form)을 정의할 때 사용합니다. 요소는 다음과 같은 요소들을 하나 이상 포함할 수 있습니다. 제일 많이 사용되는건 input태그 입니다. 태그는 전체 양식을 의미하며, 화면에 보이지 않는 추상적인 태그입니다. 실제로 사용자가 양식을 입력하기 위한 태그는 태그 등이 사용됩니다. type 속성을 통해 종류..

HTML Canvas 1. canvas는 html문서 내부에 그림을 그릴 수 있는 태그입니다. 우리가 div 태그 안에 이미지를 넣고 편집하듯이 사용한다고 생각하면 편하실거에요. 2. 캔버스를 선언하고 자바스크립트를 통해 그림을 그리고 애니메이션과 이벤트 처리 등을 구현할 수 있습니다. canvas 요소는 웹 페이지에 그래픽을 그려주는 쉽고 강력한 방법을 제공합니다. 이 요소는 그래픽을 위한 컨테이너(container) 역할만을 수행합니다. 따라서 실제로 그래픽을 그리기 위해서는 자바스크립트(JavaScript) 등의 스크립트 언어를 이용해야 합니다. # canvas 사용 방법 1. html 문서에 canvas 태그를 선언한다. 2. canvas 태그에 id 속성을 설정한다. 3. canvas 태그 내부..

엔티티코드란? HTML 예약 문자나 특수 문자를 쓸 때 사용 합니다. 엔티티 코드를 사용하는 이유는 컴퓨터가 문서를 읽어들일 때 예약문자와 문서내용을 구분하지 못해 생기는 문제를 해결하기 위해서 입니다. 예를 들어 문서 내용에 꺽쇠 괄호(

Jake Giltsoff의 오픈소스 프로젝트, 이수진의 번역, 안정민의 감수를 인용하여 글을 작성 합니다. 좋은 정보 글을 남겨주신 분들께 감사합니다. 링크를 누르시면 해당 레퍼런스로 이동합니다. SVG 란? 확장 가능한 벡터 그래픽(Scalable Vector Graphics)는 2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어입니다. 벡터는 기본적인 도형, 패스 등 일러스트에서 작업하는 모든 것이 될 수 있습니다. 일반적으로 웹 상 이미지 파일형식은 JPEG를 많이 사용합니다. SVG는 코드로 수정할 수 있기 때문에 (텍스트 편집기에서 수정이 가능하고, CSS / JS로 이미지 변경이 가능합니다) 다른 이미지 형식보다 강력한 기능을 가지고 있습니다. SVG를 사용해야 하는 이유. ..

시멘틱 태그 HTML5 이전에는 태그와 태그 등에 Id와 Class를 부여하여 원하는 구역을 나누고 스타일을 지정했다면 HTML5 에서는 의미를 가지고 있는시멘틱 태그를 사용하여 각 구역 별 코드의 가독성을 높이고 웹 표준에 부합하도록 하고 있습니다. 시멘틱 태그의 종류 속성 설명 태그는 주제별 그룹의 콘텐츠 섹션을 나타낼 때 사용합니다 링크, 광고, 툴바 등 페이지 콘텐츠를 제외한 부분을 정의합니다. 섹션 내의 내용을 정의합니다. 해당 문서의 주요 내용을 지정합니다. 문서나 섹션의 머리글을 지정합니다. 문서 또는 섹션의 바닥글을 지정합니다.주로 저작권, 연락처 정보 등 내용이 삽입됩니다. 사이트 내의 네비게이션으로 쓸 구역을 지정합니다. 사용자가 보거나 숨길 수있는 추가 세부 정보를 정의합니다. 요소를..

SEO(검색엔진 최적화)란? SEO는 Search Engine Optimization의 약자로 말그대로 검색엔진 최적화라는 의미입니다. 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정을 의미합니다. 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있게 합니다. 웹 페이지와 관련된 검색어로 검색한 검색 결과 상위에 나오게 된다면 방문 트래픽이 늘어나기 때문에 효과적인 인터넷 마케팅 방법 중의 하나이며 비용처리 없는 마케팅이라고 할 수 있습니다. 하지만 마케팅 적인 방법에 앞서 웹 표준을 준수하기 위한 방법이 우선됩니다. 구글 등장 이후 검색 엔진들이 콘텐츠의 신뢰도를 파악하는 기초적인 지표로 다른 웹..

그리드 시스템이란? 그리드 시스템(Grid System)에서 ‘Grid’는 격자나 바둑판 모양의 눈금을 뜻하며 일반적으로는 수직과 수평으로 면이 분할된 것을 의미합니다. 1970년대 중반부터 본격적으로 사용된 그리드 시스템은 디자인의 레이아웃에 규칙을 부여하는 수단입니다. 편집디자인(인쇄물)에서 시작해 현재 웹 개발 분야에도 적용하여 웹 페이지를 제작하는 기초 단계에서 그리드 시스템을 사용하면 제작을 쉽고 빠르게 진행할 수 있습니다. 그리드의 구성 그리드는 Columns, Gutters, Margins 로 이루어져 있습니다. 1.Columns 는 스크린에서 콘텐츠가 포함되는 영역을 말합니다. 보통 고정값 보다는 퍼센트로 정의될 때가 많습니다. 2.Gutters 는 칼럼 사이의 간격을 나타냅니다. 3.Ma..