본문 바로가기

html54

WebSocket - 웹소켓 이란? 면접에서 웹소켓을 물어보면? 간단하게 알아보기 안녕하세요. 고코더 입니다. ● 1. 웹소켓이란 단어를 많이 들어봤지만 설명하라고 하면 입이 떨어지지 않는 주제입니다. 우선 소켓은 네트워크에 가장 기초적인 개념입니다. 통신을 위해 두 지점을 말합니다. 통신의 통로입니다. 여기서 Web이란 단어를 합성해서 "웹소켓"으로 불립니다. 기본 적으로 웹소켓은 Stateful Protocol 방식입니다. 한번 연결된 네트워크 라인 통신을 통해 데이터를 양측에 주고 받을 수 있습니다. 즉 기본 request, response 방법이 아닌 연결을 유지한채 정보를 주고 받는 방법입니다. HTML5에서는 이런 웹소켓 방식을 2009년 부터 공식 지원하고 있습니다. 1websocket = new WebSocket(URL);c.. 2019. 9. 17.
HTML5 - input 태그의 formaction 속성 formaction 예제 안녕하세요. 고코더 입니다. ● 1. form을 전송하는 방법은 웹프로그래밍 언어에 기본 입니다. 필요한 데이터를 로직을 처리하는 소스르 넘기는 과정입니다. 그런데 html5부터는 formaction 속성을 이용해 폼 주소를 input 박스에서 수정이 가능합니다. ● 2. 소스를 함께 살펴보겠습니다. 1234567891011121314151617181920 폼 전송 폼 전송2 목록 Colored by Color Scriptercs ● 3. formaction 속성이 없다면 post를 가로채서 스크립트를 작성하여 조건절을 걸었지만 html5에 편리한 기능 때문에 각각 다른 폼으로 전송이 가능합니다. ● 4. "폼 전송" 은 기존에 action 주소로 이동하고 ● 5. "폼 전송2".. 2019. 8. 5.
HTML - required 필수 항목 값을 확인해주는 속성 html5 입력 유효성 확인 안녕하세요. 고코더 입니다. ● 1. HTML5에 새로운 기능들은 개발자에 피로를 많이 덜어줍니다. 그 중에 하나가 바로 required 속성입니다. input이 비어있으면 자동으로 필수값으로 값을 넣으라고 해주는 유효성 체크 항목 입니다. ● 2. 가끔 브라우저에서 이런 메세지 창을 보신적이 있죠? required 속성을 입력한 input은 자동으로 이렇게 메세지 창을 띄워서 입력을 받도록 강제해줍니다. ● 3. 사용법은 간단합니다. 그저 input 태그안에 required만 붙혀주면 됩니다. 그리고 해당 속성은 해당 input은 필수 값이라는걸 알려주는 태그임을 강조하는 역할도 합니다. 마무리 물런 최신 브라우저를 써야 작동하는 기능이라 결국은 일부 유저를 위해 스크립트 .. 2019. 8. 1.
HTML5 - meter , progress 태그 비교 미터, 프로그래스 태그 차이 오늘은 간단한 HTML을 설명하려고 합니다. progress는 흔히 사용하는 태그입니다. 진행률 나타낼때 참 좋죠. 그런데 meter라는 태그도 progress와 너무 비슷합니다. 그래서 오늘은 이 두가지의 HTML 차이를 알아보려 합니다. 결론부터 말하면 progress : 진행율을 나타내기 위해, 동적 데이터 meter : 현재 점수나 범위를 나타낼때, 정적데이터 ▼ 아래 소스를 크롬에서 확인하면 meter 태그와 progress 태그 *당신의 수학점수는? 90점-> 90 *현재 프로젝트 완성률은 70%-> ▼ 아래처럼 보입니다. 특이점은 progress 태그는 눈금이 보이죠? 앞으로 뭔가 더 진행될거 같으 느껴집니다. 동적으로 보이고 meter 태그는 정적으로 보입니다... 2017. 12. 15.