반응형

📢<form> 태그

▼ 사용자 입력을 위한 폼을 만드는데 사용

▼ Action = 양식이 제출 될 때 폼 데이터를 전송하는 위치지정

▼ Method = post , get

- 폼 데이터를 전송할때 사용하는 방법을 지정

- get : url 에 데이터가 출력되면서 전송되는 형태

- post : http request 본 문 내에서 전달되는 방식

form 태그에 action 하고 method 속성을 안넣으면 웹표준검사에서 통과를 못한다

 

📋<fieldset>

▼

- 폼의 그룹

- 요소 주위에 상자를 그림

 

📋<legend>

▼ - <fieldset> 의 제목을 정의

<form action="" method="">
    <fieldset>
        <legend>로그인</legend>
        로그인이 실제 들어갈 코드
    </fieldset>
</form>

 

반응형
저작자표시 비영리 변경금지

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

HTML4 - LIST 태그 (UL , OL , DL 태그)  (0) 2019.04.18
HTML4 - Table (테이블)  (0) 2019.04.16
HTML4 - form 태그의 enctype 속성 (파일 업로드)  (3) 2019.04.16
HTML4 - Entity Code  (0) 2019.04.15
HTML4 - <IMG> 태그 , <a> 태그  (0) 2019.04.02
반응형

◎ <li> 태그

​

▶ UL OL DL 의 각 리스트들을 li 로 표시한다

◎ <ul> 태그

​

▶ 비순서형 목록 Unordered List

▶ <li> 요소 마다 블릿이 제공됨 ( 블릿 : 특수문자)

▶ 연속으로 나열된 콘텐츠를 표현

▶ 순서가 정해져있지않아 홈페이지 대메뉴 또는 소메뉴 등이 적합하다.

​

▼ CSS 특징

왼쪽과 오른쪽 여백이 있다.

<ul> 과 <li> 사이에는 그어떤 문자도 태그도 올수가 없다. 와도 표현이 안된다 (ul 과 li 는 1set)

<li> 와 </li> 사이에만 사용할수 있고 li 와 li 사이에는 사용할수 없다.

<li>와 </li> 사이엔 다른 <ul> 이 올수도 있다.

ex)

<ul> <li> <ul> <li>자유게시판1</li> <li>자유게시판2</li> <li>자유게시판3</li> </ul> </li> <li>길드홍보게시판</li> <li>스크린샷</li> <li>팬아트</li> </ul>

​

<ul> <li>자유게시판</li> <li>길드홍보게시판</li> <li>스크린샷</li> <li>팬아트</li> </ul>



◎ <ol> 태그

​

▶ 순서형 목록 Ordered List

▶ <li> 요소 마다 숫자 블릿이 제공됨

▶ 순위 또는 연속된 숫자의 리스트를 표현

​

▼ CSS 특징

왼쪽과 오른쪽 여백이 있다.

ol태그도 ul태그와 마찬가지로 ol과 li 사이에 다른태그는 올수없다.

또한 li태그 안에 또 ol과 ul 등의 리스트를 표현할수있다.

​

<ol> <li>대마도여행</li> <li>정글의법칙</li> <li>슈퍼스타k</li> <li>열혈강호</li> </ol>



​

<ol> <li>대마도여행</li> <ol> <li>1일차 비행기타기</li> <li>2일차 배타기</li> </ol> <li>정글의법칙</li> <li>슈퍼스타k</li> <li>열혈강호</li> </ol>


◎ 정의형 목록 태그

​

▶ <dl> 정의형 목록 지정 ( Defines a description List.)

▶ <dt> 용어 정의 (Defines Terms/names)

▶ <dd> 지정 정의 설명 (Describes each Term)

낱말 등 특정 단어를 정의할때 사용하는 요소 (국어사전 등)

제목 + 내용 형태로 범용적으로 사용하곤 한다.

​

▼ CSS 특징

dt는 있는그대로 나타나고 dd는 들여쓰기로 나타난다.

반드시 순서대로 표시 dl > dt > dd 무조건 3가지가 다 나타나야한다.

각 서로다른 태그 사이에는 ul ol 과 마찬가지로 다른태그를 넣을수는 없다.

<dl> <dt>웹</dt> <dd>=월드 와이드 웹 (Web)</dd> <dd>[명사]Web</dd> <dt>웹</dt> <dd>=월드 와이드 웹 (Web)</dd> <dd>[명사]Web</dd> </dl> //dt 두번 사용도 가능


​

​


반응형
저작자표시 비영리 변경금지

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

HTML4 - 온라인 서식 (FORM 태그)  (0) 2022.01.05
HTML4 - Table (테이블)  (0) 2019.04.16
HTML4 - form 태그의 enctype 속성 (파일 업로드)  (3) 2019.04.16
HTML4 - Entity Code  (0) 2019.04.15
HTML4 - <IMG> 태그 , <a> 태그  (0) 2019.04.02
반응형



◎ <IMG> 태그

<img src="twitterlogo.jpg" alt="트위터">

▼ 내용이 없는 경우는 빈 대체 텍스트 제공 (alt 속성 이용)

alt의 대체 텍스트를 넣을경우 이미지를 있는그대로 표현할수 있는 텍스트를 넣는게 좋다. 예를들어 트위터 로고 img 파일을 너놓고 alt 속성에 새라고 넣으면 이건 잘못된 예시다. 이유는 시각장애인들의 접근성을 위해서이다.

​

​

<img src="연혁도.jpg" alt='수자원공사이력' longdesc='text.html' >

▼ 아래처럼 이미지내용이 길거나 복잡한 경우는 longdesc, 대체 콘텐츠 등으로 추가정보 제공

연혁도 같은 img파일의 텍스트가잇는 것 같은경우엔 longdesc='long.html' 같은걸 써서 텍스트를 따로남깁니다.

또한 다른방법으로는 보통 연혁도같은경우 ol li 태그등을 이용하여 텍스트로 표현해주는데 따로 html을 만드는게아니라 이미지 바로밑에 텍스트를 넣어준다 그리고 텍스트의 스타일을 position:absolute: left:-5000% 를 사용하여 넣어준다 이유는 일반사용자는 그림을보고 이해하지만 시각장애인들은 웹페이지를 대신 읽어주는 기계를 사용해서 듣기때문이다. 이미지파일은 못읽고 대체텍스트alt나 그밑에 숨긴텍스트를 읽어서 들려주기때문이다. 간혹 display none으로 하는경우도 있는데 이경우 시각장애인의 장비가 읽어주지 못하는 경우가생긴다. 그래서 position으로 위와같이 작성하는게 좋다​



▼ longdescription 확인방법. (마우스 우측버튼 > 설명보기)

◎ <a> 태그

​

▼ <a> = Anchor (닻)

▼ href = Hypertext Reference

▼ 페이지와 페이지를 연결하는 link

▼ target 속성으로 페이지 열리는 방식 제공 (_blank 라는 속성을 넣어주면 새창열림)

<a href="url" target="_blank"> 텍스트 ></a>

▼ 다른 도메인 연결시 http:// 까지 제공해야함

▼ 파란색 텍스트에 밑줄로 기본제공됨

▼ href의 여러가지 이벤트 #을 주게되면 그뒤에 나오는 id값을 찾아서 스크롤이 이동된다.

1. <a href=""> 링크값에 내용이 없을경우</a> 2. <a href="#">#만 제공하는 경우 </a> 3. <a href="#content">내부링크를 제공하는 경우 </a> 4. <a href="#a">없는 아이디를 넣는경우 </a> 1번 : 내용이 없을경우 IE의 경우는 내컴퓨터가 열림 , Chrome 는 아무 변화없음 2번 : #만 제공하는경우엔 scroll이 맨위로 가게됩니다 3번 : #content는 #뒤에 이름을 써줄경우 내부링크로 작동되어 태그의 id='content' 인 태그를 찾아서 scroll 이 이동됩니다. 4번 : #a #뒤에 없는 id를 넣을경우 현재 scroll 고정, 현재scroll에서 새창이나 다른 이벤트를 줄경우 사용 #none를 쓰는사람도있는대 #a 로 쓰는게 바람직하다

​




반응형
저작자표시 비영리 변경금지

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

HTML4 - form 태그의 enctype 속성 (파일 업로드)  (3) 2019.04.16
HTML4 - Entity Code  (0) 2019.04.15
HTML4 - Inline,Block 의 차이 , <h1>~<h6> 태그  (0) 2019.04.02
HTML 태그 (Input태그 속성{pattern,required,autofocus,placeholder})  (0) 2019.02.28
HTML5 태그 (2) - article,section,nav  (0) 2019.02.28
반응형

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
반응형

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 웹을 만드는 기관


반응형

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

HTML4 - Entity Code  (0) 2019.04.15
HTML4 - <IMG> 태그 , <a> 태그  (0) 2019.04.02
HTML4 - Inline,Block 의 차이 , <h1>~<h6> 태그  (0) 2019.04.02
HTML 태그 (Input태그 속성{pattern,required,autofocus,placeholder})  (0) 2019.02.28
HTML5 태그 (2) - article,section,nav  (0) 2019.02.28

+ Recent posts

티스토리툴바