반응형

DNS란 도메인의 주소를 할당하는 아이피를 적어놓은 서버? 시스템을 의미한다

도메인 주소의

BLOG.EXAMPLE.COM. 여기서

blog. = sub -level 이고

example. = Second-level 이고

com = top-level

. Root

맨끝에 .이 있다

nslookup 도메인 주소의 ip 주소를 보여줌




반응형

'프로그래밍 > 기타' 카테고리의 다른 글

아이패드 1세데 유튜브 어플  (0) 2019.04.09
반응형

Input 태그의 주요 속성 (HTML5)

l pattern : 정규식 표현을 넣어서 데이터를 검증할 수 있다.

l required : 필수 입력사항인지 여부를 세팅할 수 있다.

l autofocus : 페이지가 열릴 때 처음으로 포커스가 이동하도록 세팅한다.

l placeholder : 텍스트 박스에 흐린 글씨로 힌트 문장을 제공한다.

◎ pattern 속성

▼ pattern 은 정규식을 넣어서 데이터를 검증할 수 있는 속성입니다. pattern 속성에 정규식을 넣어서 input 에 입력한 값의 유효성을 체크할 수 있는 것입니다. 이렇게 pattern 속성은 유효성 검사를 아주 심플하게 만들어 줍니다. 아래 예제는 전화번호에 대한 유효성 검사입니다. pattern 에 정규식으로 전화번호인지 아닌지 판단하는 식을 넣었습니다. type=”tel” 은 전화번호 여부를 체크하지 않기 때문에 pattern 속성과 함께 많이 사용됩니다.

<form action="action.jsp"> <div> <input type="text" pattern="(010)-\d{3,4}-\d{4}" title="형식 010-0000-0000"> </div> <div><input type="submit" value="전송"></div> </form>


ㅎㅇ


(왼) 실패시 (오)성공시


◎ required 속성

▼ required 는 input 박스에 값을 반드시 입력해야 넘어갈 수 있도록 만든 속성입니다. 만약 입력하지 않으면 아래 그림과 같이 메시지가 뜨고 더 이상 진행할 수가 없습니다.

<form action="action.jsp"> <div> <input type="text" pattern="(010)-\d{3,4}-\d{4}" title="형식 010-0000-0000" required="required"></div> <div><input type="submit" value="전송"></div> </form>



◎ autofocus 속성

▼ autofocus 속성은 페이지가 새로 시작될 때 입력된 input 에 포커스가 자동으로 가수 있도록 해 줍니다. 기본 속성은 화면의 어느 컨트롤에도 포커스는 가지 않습니다. 보통 페이지가 로딩되지 마자 사용자에게 값을 입력 받아야 하는 화면에서 주로 이용됩니다. 로그인 창에서 id 에 포커스가 가 있는 것과 같습니다.

<form action="action.jsp"> <div> <input type="text" pattern="(010)-\d{3,4}-\d{4}" title="형식 010-0000-0000" required="required" autofocus></div> <div><input type="submit" value="전송"></div> </form>




◎ placeholder 속성

▼ 사용자에서 입력 해야 되는 값에 대한 힌트를 제공합니다. 흐리게 표현되는 문장을 보고 사용자가 실수 하지 않도록 입력 값을 유도하는 것입니다. 이것은 입력하는 순간 지워 지며, input 박스에 아무것도 없다면 다시 나타납니다. 이것은 화면을 아주 심플하게 만들어 줍니다. 왜냐하면 별도로 제목을 표시하지 않아도 되기 때문입니다. 예전에는 일일이 자바스크립트로 구현을 해야 했거든요.

<html> <head> <title></title> </head> <body> <form action="action.jsp"> <div> <input type="text" pattern="(010)-\d{3,4}-\d{4}" title="형식 010-0000-0000" required="required" autofocus placeholder="형식 010-0000-0000"></div> <div><input type="submit" value="전송"></div> </form> </body> </html>




◎ disabled 속성

▼ 이렇게 disabled 를 사용하면 태그가 먹통이 되서 사용이 불가능하게됩니다.

이상태로 전송시 form 태그엔 데이턱 ㅏ업

<form action="action.jsp"> <div> <input type="text" pattern="(010)-\d{3,4}-\d{4}" title="형식 010-0000-0000" required="required" autofocus placeholder="형식 010-0000-0000" disabled></div> <div><input type="submit" value="전송"></div> </form>




반응형

'프로그래밍 > HTML' 카테고리의 다른 글

HTML4 - Entity Code  (0) 2019.04.15
HTML4 - <IMG> 태그 , <a> 태그  (0) 2019.04.02
HTML4 - Inline,Block 의 차이 , <h1>~<h6> 태그  (0) 2019.04.02
HTML5 태그 (2) - article,section,nav  (0) 2019.02.28
HTML 태그  (0) 2019.02.27
반응형

article :

1. (신문·잡지의) 글, 기사

2. (합의서·계약서의) 조항

3. (특히 세트로 된 물건의 개별) 물품

section:

1. (여러 개로 나뉜 것의 한) 부분, 부문, 구획

2. (조립식) 부품

3. (문서책 등에서) 절(節), (신문의) 난(欄)

nav (navigation):

1. (지도 등을 보며) 길을 찾다

2. (바다·강 등을) 항해하다

3. (힘들거나 복잡한 상황을) 다루다

각각의 이런뜻이 있습니다.

옜날에는 모든것을 div로 묶어서 표현하였지만 HTML5 로 오면서 묶는거에도

의미를 두자 해서 여러가지 태그들이 나왓습니다

그중 많이쓰이는것이 HEADER , FOOTER , MAIN , NAV ,SECTION ,ARCTILE 등등

여러가지가 있찌만 (HTML5에서 나온태그들입니다.) 각각의 태그들은 이름 그대로의 의미를 가지고

딲히 다른 태그들처럼 특별한 기능은 없이 HTML문서를 레이아웃으로 구역화시키고 나누고 레이아웃을 짜고 묶는데를 주력으로 만들었다고 생각합니다.

자그럼 이태그들을 어떨때 사용해야하는지를이제 알아보겠습니다. 간단하게!

arctile 은 내용이 각기 독립적이고, 홀로 설 수 있는 내용 (블로그 글 , 뉴스기사)

section 은 내용이 서로 관계있을 경우 (주로 문서를 다른주제로 구분 짓기)

div 는 오로지 내용을 묶는 역할.

여러개의 section을 article 로 묶을수 있고,

마찬가지로 여러개의 article 을 section 으로 묶을수 있습니다.

nav 는 메뉴바 등의 다른 링크들을 모으는 구역? 레이아웃을 설정할떄 젤 상위로 사용합니다.

반응형
반응형

HTML 은? Hyper Text Markup Language

크게 <head> 태그와 <body>의 태그로 나뉘어진다

<head> 태그의 내용들은 브라우저가 보기 위한 정보로 되어있어 일반사용자는 보질 못하고

<body> 태그의 내용들로 일반사용자가 자주 본다.

<head> 태그안에 태그 (브라우저를 위한 정보)

<meta> : 엑스트라 추가정보와 같은뜻,

속성 : charset : Character encoding (UTF-8 , EUC-KR 같은 언어셋)

<meta charset = "UTF-8">

name : 페이지의 상세설명 및 내용을 간략히 적는것

<meta name : "description" content="Welcome to my Kakao Clone">

이렇게 작성할경우 구글 서치시 저렇게 아래 표시될수 있다.

********메타태그 추가설명 링크********

<구글>

https://support.google.com/webmasters/answer/79812?hl=ko

<공식문사 MDN>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta

<body> 태그안에 태그 (사용자를 위한 정보)

<Strong> 태그 : 문자열 진하게

<U> 태그 : 문자열 밑줄

<h1> ~<h6> : heading 제목 태그 글씨커짐 , 제목이라 줄바꿈도됨

<p> </p> 단락 ? 구문? 태그 (구문 넣은곳이 줄바꿈이됨)

<br> 줄바꿈 태그

<li> : list 의 준말 목차 태그 ul태그의 자식

<ul>: 들여쓰기 li태그의 부모

<ol>: 번호가 자동으로 할당됨 (li랑 같이씀 li에 번호가 할당됨)

<a>: 태그 link 걸기(anchor)

W3C 웹을 만드는 기관


반응형
반응형


라이브러리 (jquery.com)

자주사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 라이브러리 라고 한다.

CDN(Content Delivery Network)

제이쿼리 같은 JS 파일을 직접 로컬에 다운 받지 않고 웹주소 URL 로 통하여 클라이언트가 직접

접속해서 자원을 바로 전달해주는 URL 주소이다.

그냥 URL 주소를 넣으면 주소를 사용할수있다.

<script src="//code.jquery.com/jquery-1.11.0.min.js"> </script>

주소에 http 나 https 를 안붙인 이유는 접속자가

http 나 https 를 이용해서 들어오면 같은 프로토콜을 이용해서 접속하겠다는

상대적인 경로이다.

jquery가 2점대 이상은 IE 6,7,8 은 사용 불가하다.

jQuery

jQuery는 DOM을 내부에 감추고 보다 쉽게 웹 페이지를 조작할 수 있도록 돕는 도구이다.

DOM (Document Object Model)

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. 문서들을 객체를 사용하여 시각화 표시 한다고 생각하면된다.

웹페이지도 결국 하나의 문서이기 때문이다.

jQuery 는 javascript의 라이브러리 이다.

라이브러리지만 지금 안쓰는곳이 없다 할정도로

아주 많은 javascript 개발자들이 사용하고있다.

지금 이글을 작성한 지금도 react,view,agular 스펠링이 맞나 모르겠지만...

위 언급한 라이브러리 들이 커지고 있는상황이지만 그래도 아직까지

점유율은 jQuery가 가장 크다.

제이쿼리는 $ 로 시작한다

$ <-- 함수를 $의 변수로 저장한것

반응형

+ Recent posts