Programming/Web Programming2017. 7. 12. 04:28

CSS #1

CSS #1

스타일 시트(style sheet): HTML5 문서에서 디자인의 표현 한계를 극복하고 다양한 레이아웃 효과를 높이기 위해 글꼴과 글자 크기, 여백과 배경색, 정렬 방식 등의 여러가지 스타일을 모아 작성하는 기술

이점: 하나의 스타일을 작성한 후 여러 개의 HTML5 문서에서 불러들여 사용할 수 있고, 테이블이나 프레임에 의존하지 않고 문서 구조를 표과적으로 표현할 수 있어 편리함

 

CSS3

CSS(Cascading Style Sheet)3란 W3C에서 웹 표준으로 제작하고 있는 CSS의 최신 버전으로, 웹 페이지에 다양한 스타일을 지정하기 위해서 사용하는 기술

스타일 정의는 스타일 대상(selector)과 스타일 선언부(declaration)로 구성됨

 

HTML 문서에서 <p>태그 내의 텍스트에 대해 이탤릭체, 파란색 효과를 지정하는 CSS 코드는 다음과 같음

 

@charset "utf-8"; p {

font-style:italic; color:blue;

}

 

태그의 스타일을 작성하여 저장한 CSS3 파일은 여러 HTML5 문서에 연결할 수 있으며, HTML5 문서 본문에 존재하는 모든 <p>태그에 적용됨

 

특징과 기능

1.    브라우저나 플랫폼의 종류에 관계 없이 적용 가능

2.    플래시나 자바 스크립트를 사용하지 않고 동적인 웹페이지 작성 가능

3.    웹 페이지의 스타일 표현 설계 영역을 담당해 HTML 문서 마크업을 간결하게 함

4.    글자, 줄 간격, 여백, 테두리, 배경, 이미지, 하이퍼텍스트 등의 서식을 다양하게 설정 가능

5.    하나의 CSS3 문서로 여러 HTML 문서의 스타일을 한꺼번에 관리하고 효과 적용 가능

 

선택자

CSS3에서 HTML5의 특정 대상에 대해 스타일을 지정할 때 그 스타일을 적용할 대상을 선택자(selector)라고 함

선택자의 종류에는 범용 선택자, 태그 선택자, 아이디 선택자, 클래스 선택자 등이 있음

 

1.    범용 선택자

             - 웹 페이지의 일부분이 아닌 전체를 대상으로 한 선택자

             - ‘*’ 기호로 표현하며 웹 페이지를 전체적으로 디자인 할 때 사용

 

* { margin:0; padding:0; }

 

위와 같이 설정하면 문서의 모든 요소의 외부, 내부 여백을 0으로 선언한 것이다.

 

2.    태그 선택자

             - 특정 태그를 선택자로 지정한 것

             - 하나의 태그를 대상으로 스타일을 지정할수도, 같은 스타일을 여러 태그에 지정할수도 있음

             - 태그 선택자에 지정된 스타일을 HTML 문서에서 참조됨

 

태그 { 속성:값; }

 

3.    아이디 선택자

             - 특정 태그가 가진 아이디를 선택자로 지정한 것

             - 아이디명은 HTML 문서 내에서 중복 없이 유일하게 하나만 존재함

 

#id명 { 속성:값; }

 

4.    클래스 선택자

             - 특정 태그가 가진 클래스를 선택자로 지정한 것

             - 클래스 명은 여러 태그에서 중복으로 지정하여 사용할 수 있으며, 여러 태그에 같은 스타일을 적용할 때 사용함

 

.클래스명 { 속성:값; }

 

 

스타일 작성

특정 일부 태그에만 필요한 경우, 하나의 웹 페이지에만 필요한 경우, 여러 문서에서 공통으로 필요로 하는 경우 등의 상황에서 스타일이 적용됨

 

1.    인라인 스타일

             - 스타일이 필요한 특정 태그에 속성을 기술하는 것처럼 style=“속성:값;”의 형태로 스타일 속성을 태그 안에 작성

 

<body>

             <p style="color:blue;"> 인라인

                           <span style="color:red;"> 스타일입니다.

                           </span>

             </p>

             <p> 일반 스타일입니다.

             </p>

</body>

 


 

2.    임베디드 스타일

             - HTML5 문서의 헤드 부분에 <style> 태그를 사용하여 필요한 스타일들을 한꺼번에 모아 작성하는 방법, 내부 스타일이라고도 함

             - 선언해둔 스타일은 본문에서 선언 대상이 나타나면 참조하여 적용됨

 

<head>

             <style>

             p { font-size:12pt; color:red; text-align:center; }

             </style>

</head>

<body>

             <p> 내부 스타일입니다.

             </p>

             <span> 일반 스타일입니다.

             </span>

</body>

 


p 태그에 대해 임베디드 스타일을 지정한 코드의 실행 화면

 

3.    외부 스타일

             - HTML 문서 외부에 스타일 시트 파일을 작성해두고 여러 웹 페이지에서 해당 스타일이 필요할 경우 스타일 시트 파일을 불러들여 참조하는 방식

             - HTML 문서의 head 부분에서 link 태그로 스타일 시트 파일을 연결

 

#cssex3_1.css

@charset "utf-8";

p{ display:block; font-size:20pt; color:green;

text-align:right; border:5px double red; }

 

#cssex3_2.html

<head>

             <link rel="stylesheet" href="./cssex3_1.css" />

</head>

<body>

             <pre>

                           <p>

외부 스타일이 적용되어 블록이 설정되고

블록의 테두리 두께는 5px, 빨간 이중선으로, 글자는 녹색의 20pt로 블록의 오른쪽에 나타납니다.

                           </p>

             </pre>

             <span>

             일반 스타일입니다.

             </span>

</body>

 

 

 


 

 

서식 관련 스타일

1.    글자 관련 속성

             => font-family:글꼴1,글꼴2,…;: 글꼴의 종류 설정. ‘,’로 구분하여 작성하며 차례로 검색해 해당하는 글꼴이 시스템에 있으면 적용

             => font-size:속성값;: 글자 크기 설정(pt, px, %, small, medium, large 등)

             => font-style:속성값;: 글자 효과 설정(italic 등)

             => color:속성값;: 글자 색상 설정(색상 코드, rgb(r,g,b), rgba(r,g,b,a) 등)

             => overflow:속성값;: 태그 표현 범위를 벗어나는 글자 처리에 대해 설정(scroll, visible, auto, hidden 등)

             => font-spacing:속성값;: 글자 간격 설정(normal, pt, px 등)

             => font-weight:속성값;: 글자 굵기 설정(normal, bold, bolder, lighter 등)

 

#cssex4_1.css

@charset "utf-8";

body { text-align:center; }

#txt1 { font-size:28px; color:rgba(0,0,255, 0.7); }

.over1 { font-family:"궁서", Arial;

width:200px; height:100px; margin:10px auto;

line-height:1.5; overflow:auto; border:1px solid #ccc; }

 

#cssex4_2.html

<head>

             <title> 글자 효과 지정 </title>

             <meta charset="utf-8" />

             <link rel="stylesheet" href="./cssex4_1.css" />

</head>

<body>

             <div id="txt1"> 글자 관련 스타일 </div>

             <br />

             <br />

             <div class="over1"> 글자 관련 스타일 속성을 이용하여 글꼴, 글자크기와모양,색상,표현범위지정등을설정한다.이외에도자간,굵기,줄간격을설정할수있다.

             </div>

</body>

 

 


 

 

2.    문단 관련 속성

             => text-align:속성값;: 문단 정렬 설정(left, center, right, justify(좌우 정렬))

             => text- indent:속성값;: 문단 들여쓰기/내어쓰기 설정(px, %, 음수(내어쓰기))

             => line-height:속성값;: 줄 간격 설정(normal, pt, px, % 등)

             => text-transform:속성값;: 영문자의 대소문자 변환 설정(none, uppercase, lowercase, capitalize)

             => text-decoration:속성값;: 문장 장식 설정(none, underline, overline, line-through 등)

             => text-shadow:x,y,blur,color;: 글자의 그림자 설정(글자로부터의 x,y 이동 좌표, 번짐 정도, 그림자의 색상)

 

#cssex5_1.css

@charset "utf-8";

h1 { text-align:center; text-indent:50px; }

#text1 { text-transform:capitalize; }

#text2 { text-decoration:underline; }

#text3 { text-decoration:line-through; }

a:link { text_decoration:none; }

a:hover { text-decoration:underline; color:red; }

 

#cssex5_2.html

<head>

             <title> 문단과 링크 효과 설정 </title>

             <meta charset="utf-8" />

             <link rel="stylesheet" href="./cssex5_1.css" />

</head>

<body>

             <h1> 문단과 링크 효과 </h1>

             <p id="text1"> CSS3의 문장과 문단 style </p>

             <p id="text2"> 문장 밑줄 효과(underline) </p>

             <p id="text3"> 문장 취소선 효과(line-through) </p>

             <a href="http://www.naver.com"> 네이버로 이동 </a>

             <br />

             <br />

             링크 위에 마우스를 올리면 밑줄이 나타납니다. <br />

</body>

 


 

3.    여백과 위치 관련 속성

             => margin:속성값;: 태그 문단 바깥쪽 여백 설정

             => padding:속성값;: 태그 문단 안쪽 여백 설정

             => float:속성값;: 태그 문단 수평 방향 배치(left, right)

             => position:속성값;: 태그 문단 위치 설정(static, relative, absolute)

 

<!DOCTYPE html>

<html lang="ko">

             <head>

                           <title> 여백과 위치 지정 </title>

                           <meta charset="utf-8" />

                           <style>

                                        body { margin:0; padding:0; }

                                        p, div { display:block; margin:50px 10px; width:300px; text-align:center; background:#ddd; }

                                        .text1 { border:1px solid red; color:green; float:left; }

                                        .text2 { border:3px dotted green; float:left; }

                           </style>

             </head>

             <body>

                           <div class="text1"> 여백과 위치 1 </div>

                           <p class="text2">여백과위치2 </p>

             </body>

</html>

 


 

 

4.    목록 관련 속성

             => list-style:속성값;: 전체 목록 스타일 지정

             => list-style-type:숫자 타입;: 숫자 타입(아라비아 숫자, 로마자) 글머리 기호 설정(none, decimal, upper-alpha(영문 대문자), lower-alpha, upper-roman(로마자 대문자), lower-roman 등)

             => list-style-image:url(“이미지 경로”);: 글머리 기호를 이미지로 대체 지정

             => list-style-position:속성값;: 글머리 기호의 위치 지정(inside(목록 안쪽), outside(목록 바깥쪽))

 

<head>

             <style>

             body { margin:0; padding:0; }

             #main_menu { background:#aaa; }

             #main_menu li { padding:5px; display:inline-block; list-style:none; }

             </style>

</head>

<body>

             <nav id="main_menu">

                           <ul>

                                        <li> 회사 소개 | </li>

                                        <li> 공지사항 | </li>

                                        <li> 자주 묻는 질문 | </li>

                                        <li> 자유게시판 </li>

                           </ul>

             </nav>

</body>

 


 

 

5.    테두리 관련 속성

             => outline:속성값;: 전체 아웃라인 설정(두께, 스타일, 색상 등 지정)

             => border:속성값;: 전체 테두리 설정(두께, 스타일, 색상 등)

             => border-width:속성값;: 테두리 두께 설정(pt, px, in, cm값 지정)

             => border-color:속성값;: 테두리 색상 설정(색상명 혹은 색상값)

             => border-style:속성값;: 테두리 스타일 설정(none, solid(단일 선), double(이중 선), dash(대시), dot(점), groove(홈 모양) 등)

             => border-radius:속성값;: 테두리의 둥근 정도 설정(px 등 값)

 

<!DOCTYPE html>

<html lang="ko">

             <head>

                           <title> 테두리와 아웃라인 </title>

                           <meta charset="utf-8" />

                           <style>

                                        body { text-align:center; font:bold 16px Arial; }

                                        .box1 { display:block; width:600px; height:100px; border:2px solid red; outline:3px dotted #00f; outline-offset:10px; }

                           .box2 { display:block; width:600px; height:100px; border:3px dashed #000; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; }

                           </style>

             </head>

             <body>

                           <h2> 테두리와 아웃라인 효과 </h2>

                           <p class="box1"> 높이100px,너비300px크기의블록에 <br/>

                           빨간색 단선 테두리와 <br />

                           파란색 점 아우트라인 효과를 준 스타일입니다. </p>

                           <br />

                           <p class="box2"> 높이100px,너비300px크기의블록에<br/>

                           대시 테두리, <br />

                           박스의 둥근 모서리 효과를 준 스타일입니다. </p>

             </body>

</html>

 


 

6.    배경 관련 속성

             => background:속성값;: 배경과 관련한 전체적인 스타일 지정

             => background:url(“이미지 경로”);: 배경 이미지 삽입

             => background-color:속성값;: 배경색 삽입

             => background-size:속성값;: 배경 이미지 크기 설정(auto, cover, contain)

             => background-repeat:속성값;: 배경 이미지의 반복 설정(repeat, repeat-x, repeat-y, no-repeat)

 

<!DOCTYPE html>

<html lang="ko">

             <head>

                           <title> 배경 이미지 </title>

                           <meta charset="utf-8" />

                           <style>

                                        body { background:url("./LA1.png"); background-repeat:no-repeat; background-size:cover; text-align:center; }

                                        #title { display:block; width:300px; height:30px; text-align:center; margin:50px auto; border:1px solid; border-radius:20px; background:-webkit-linear-gradient(top,#fff,#000); }

                                        #font1 { color:rgb(255,255,255); font-size:16px; }

                           </style>

             </head>

             <body>

                           <p id="title"> 그래디언트 배경 설정 </p>

                           <p id="font1" > 배경 이미지가 가로/세로 크기 비율은 고정되고

                           이미지의 가로 크기만 본문의 가로 크기에 맞추어 집니다. </p>

             </body>

</html>

 



 

 

 

저작자표시 비영리 동일조건

'Programming > Web Programming' 카테고리의 다른 글

JavaScript Basic #1  (0) 2017.07.13
CSS #2  (0) 2017.07.12
HTML Basic #3  (0) 2017.07.10
HTML Basic #2  (0) 2017.07.08
HTML Basic  (0) 2017.07.05
Posted by BinZIP
Programming/Web Programming2017. 7. 10. 02:55

HTML Basic #3

HTML#3


웹 표준

방대한 웹 자료와 모호한 표현의 웹페이지는 정확한 정보 검색을 어렵게 함, 이를 해결하기 위해서 규칙적이고 일관성 있는 정보의 표현과 문서의 구조화가 필요함

웹 표준: W3C(World Wide Web Consortium)에서 권고하는 웹 페이지 기술에 대한 표준안을 말함

웹 표준을 준수한 웹 페이지는 문서 구조 계층(ex. HTML5), 문서 표현 계층(ex. CSS3), 동작 계층(ex. PHP, JS 등)으로 분리하여 작성하고 이들을 상호 연계하여 운영

 

웹 표준이 필요한 이유는 다음과 같음:

1.     크로스 브라우징 실현(다양한 운영체제와 브라우저에서 동일한 웹페이지가 보이도록 함)

2.     코딩의 단순화 실현(역할에 따라 계층을 나누어 각각의 문서 작성)

3.     가독성 향상, 로딩 속도 향상

4.     유지보수의 간편화, 개발자와 디자이너 협업 가능

 

시맨틱 웹

시맨틱 웹(semantic web): 웹페이지에서 사람이 인식하는 정보를 기계가 이해할 수 있도록 하는 컴퓨터 기술을 말함

시맨틱 웹을 실현하기 위해서는 메타 데이터(기계가 읽고 이해할 수 있는 설명 정보)를 웹 페이지가 표함하고 웹 표준을 준수하는 문서 표현과 구조를 가져야 함

 

목적: 기존 웹을 확장하여 사람과 컴퓨터 간의 효과적인 협력 체제를 구축하고, 사용자를 대신해 지능형 로봇 프로그램이 정보의 의미를 파악하고 실행, 메타 데이터를 기술해 정보에 대한 자동화된 접근성을 높여 정보를 효과적으로 공유하고 전달

 

HTML은 시맨틱 웹 페이지라고도 불림 - 웹 표준 준수, 시맨틱 표현 요소(address, mark, meter, time 등) 다수 존재, 웹 페이지 레이아웃을 위한 시맨틱 문서 구조 요소가 추가되어 의미가 부여된 웹 페이지 형성 가능

 

HTML5 시맨틱 문서 구조

 

예시는 위와 같다. 웹 페이지를 용도에 따라 구분 짓는 것이다.

 

1.     header

           - 웹 페이지의 본문 전체나 각 섹션의 머리글을 정의하는 문서 구조 태그

           - 웹 페이지에 대한 소개, 네비게이션 메뉴 모음, 주요 로고 이미지 등과 헤딩 요소(Hn, hgroup) 포함

           => hgroup: 섹션 제목이 여러 계층일 때 대제목과 부제목, 소제목을 묶어 그룹화하는 문서 구조 태그

 

2.     footer

           - 웹 페이지의 본문 전체나 각 섹션의 바닥글을 정의하는 문서 구조 태그

           - 저자, 저작권 정보, 연락처, 관련 문서로의 링크 등을 포함

           - 바닥글이라고 항상 마지막에 존재하는 것은 아님

 

3.     section

           - 문서의 구조를 의미에 맞게 구성하는 기능

           => article: 문서 내에서 독립된 글을 표현하는 영역

           => aside: 문서의 주요 내용과 관련성이 낮은 보조 내용을 표현하는 영역

           => nav: 네비게이션 요소를 표현하는 영역

           => section: 실제 본문 주제에 해당하는 내용을 표현하는 영역



위와 같이 구조화 한다고 생각하고 HTML 시맨틱 문서 구조를 작성한 코드는 아래와 같음

 

<body>

           <header>

                     <hgroup>

                                <h1> Semantic Structure</h1>

                                <h2> HTML5 섹션 </h2>

                     </hgroup>

           </header>

           <hr />

           <nav>

                     <h1> navigation 영역 </h1>

                     웹 페이지의 주요 메뉴 부분이 위치하는 영역이다.

           </nav>

           <article>

                     <h1> article 영역 </h1>

                     문서 내의 독립적인 글을 작성하는 영역이다.

           </article>

           <section>

                     <h1> section 영역 </h1>

                     문서의 중요한 본문을 작성하는 영역이다.

           </section>

           <hr />

           <footer> footer 영역 </footer>

</body>

 

구조화 했던 그림과 같이 세로로 세 영역(article, aside, section)을 나누어 사용하려면 CSS단에서 레이아웃 스타일을 적용해야 함

저작자표시 비영리 동일조건

'Programming > Web Programming' 카테고리의 다른 글

JavaScript Basic #1  (0) 2017.07.13
CSS #2  (0) 2017.07.12
CSS #1  (0) 2017.07.12
HTML Basic #2  (0) 2017.07.08
HTML Basic  (0) 2017.07.05
Posted by BinZIP
Programming/Web Programming2017. 7. 8. 04:00

HTML Basic #2

HTML #2

 

폼 정의

폼이란 입력, 출력을 지원하는 양식 및 사용자와 상호작용이 이루어지는 영역 전반을 이름.

HTML 본문에 위치하며 폼 영역을 구성하는 태그는 <form> … </form>을 사용.

             => [form] name=“폼명”: 폼명을 지정하는 속성. 웹페이지에 여러개의 폼이 있는 경우 각각의 폼을 구분하기 위해 사용.

             => [form] method=“전송 방식”: 폼 입력 데이터의 서버 전송 방식을 지정. GET 방식과 POST 방식이 있음. 기본은 GET.

             => [form] action=“프로그램명”: 폼 입력 데이터를 처리할 서버용 프로그램(CGI, ASP, PHP 등)을 지정하는 속성. 서버와 사용자 간의 상호 정보 교환을 실행

             => [form] novalidate: ‘유효성 검사 안 함’을 지정(기본값: 유효성 검사 함)

 

필드 셋과 캡션

필드 셋은 입력, 출력 등의 여러 폼 양식 요소를 함께 묶어 그룹화하여 범위를 지정한 것

<fieldset> … </fieldset> 태그 사용

그룹화 한 범위의 캡션은 <legend> … </legend> 태그 사용

 

<fieldset>

             <legend> 폼 캡션 </legend>

             입력 양식 : <input type="text" />

</fieldset>

 


입출력 폼

사용자의 데이터를 받아들이거나 내보내기 위해서는 구성된 폼 영역 내부에 양식을 만들어 주어야 함

즉, 사용자가 처리할 데이터의 종류에 따라 양식을 선택하여 작성함

 

1.    input

             - 사용자의 입력을 받아들이는 양식을 만들고, 어떤 종류의 데이터를 입력받을 것인지를 type  속성을 이용해 지정

             - 종료 태그 없는 홑 태그

             => type=“입력 타입”: 입력 영역과 타입을 지정. text, password, check-box, radio, submit, reset, file, email, url, number, range, tel, date, time 등의 종류가 있음

             => name=“이름”: 입력 필드의 이름을 나타냄. 서버로 전송될 때의 변수명으로 사용되며, 웹 페이지 내에서 중복된 이름 사용 가능

             => id=“id 명”: 입력 필드의 아이디명을 지정하며 유일한 명칭을 사용해야 함

             => size=“ 값”: 입력 필드의 크기를 지정

             => value=“문자열”: 입력 필드의 초기 문자열 지정

             => maxlength=“값”: 입력 필드의 최대 문자열 길이 지정

             => autofocus: 입력 필드 로드시 필드에 커서를 자동으로 표시하는 기능

             => placeholder=“문자열”: 입력 힌트 문자열 표시 기능

             => checked: 항목 입력 필드에 선택 표시를 지정

             => required: 입력 필드 내용의 작성 여부 체크

 

1.    텍스트 & 암호

                           => type=“text”: 입력 필드에 한 줄로 작성한 텍스트를 그대로 입력받는 양식

                           => type=“password”: 한 줄로 작성한 텍스트를 ‘●’로 표시하여 입력받는 양식

 

<h1> 로그인 폼 </h1>

<form>

             ID : <input type="text" size="16" maxlength="10" value="id" />

             <br /> <br />

             PASS : <input type="password" name="p1" size="12" />

</form>



 

2.    라디오 & 체크박스

                           => type=”radio": 제시된 여러 항목 중 하나의 항목만을 선택할 때 사용

                           => type=“checkbox”: 제시된 여러 항목 중 사용자가 원하는 여러 개의 항목을 다중으로 선택할 때 사용

                           => value=“값”: 서버로 전송되는 값을 지정하는 옵션으로 필수적으로 지정해야함. 선택한 항목이 어떤 것인지 구별 할 수 있도록 각각의 value 값을 다르게 설정해야 함.

                           => name=“이름”: 선택할 항목에 이름을 부여하는 것으로 같은 이름을 부여한 2개 이상의 항목들이 하나의 그룹으로 인식되어 처리됨.

 

<body>

             <form>

                           <h1> 성별 구분 </h1>

                           <input type="radio" name="ra_btn" value="1" checked /> 남자 <br />

                           <input type="radio" name="ra_btn" value="2" /> 여자 <p>

                           <h1> 취미 활동을 선택하세요. </h1>

                           <input type="checkbox" name="ch_btn" value="1" checked /> 등산 <br />

                           <input type="checkbox" name="ch_btn" value="2" checked /> 골프 <br />

                           <input type="checkbox" name="ch_btn" value="3" /> 마라톤 <p>

             </form>

</body>

 


 

3.    submit & reset

                           - submit은 사용자가 입력한 모든 데이터를 서버로 전송하는 버튼 양식. type=“submit" 지정.

                           - reset은 작성한 모든 데이터 내용을 지우고 초기화하는 버튼 양식. type=“reset” 지정.

 

4.    email & url

                           - email은 이메일 주소를 입력받는 양식. type=“email” 지정.

                           - url은 웹페이지의 주소를 입력받는 양식. type=“url" 지정.

                           - 두 양식은 유효성 검사를 하는 기능이 있어서 입력 형식에 오류가 있으면 에러를 반환함

                           => placeholder: 입력 힌트. 사용자에게 입력 예시를 보여줌

                           => required: 해당 필드를 필수 입력 사항으로 지정

 

<body>

             <form method="post" action="./action.php">

                           <label for="e_id"> 이메일 보내기 </label>

                           <input type="email" id="e_id" name="e_name" placeholder="abc@abc.com" required />

                           <br />

                           <br />

                           <label for="u_id"> 인터넷 사이트 이동하기 </label>

                           <input type="url" id="u_id" name="u_name" placeholder="http:// " required />

                           <br />

                           <br />

                           <input type="submit" value="확인" />

             </form>

</body>



 

5.    number & range

                           - number는 사용자의 수치 데이터 입력을 쉽게 하기 위해서 스핀 컨트롤을 클릭하거나 직접 숫자를 입력하는 양식. type=“number” 지정.

                           - range는 슬라이드 컨트롤로 숫자의 크고 작은 정도를 표현하는 입력 양식. type=“range” 지정

 

<form>

             <label for="num_id"> 숫자 입력(스핀 컨트롤) </label> &nbsp;

             <input type="number" id="num_id" min="0" max="10" step="2" value="2" /> <br />

             <br />

             <label for="r_id"> 숫자 입력(슬라이드 컨트롤) </label> &nbsp;

             <input type="range" id="r_id" min="0" max="100" step="10" /> <br />

             <input type="submit" value="확인" />

</form>

 


6.    file & search

                           - file은 사용자의 컴퓨터에 있는 파일을 선택하여 서버에 전송하는 양식. type=“file” 지정

                           - search는 찾고자 하는 정보의 검색 단어를 입력하는 텍스트 필드 양식. type=“search" 지정.

                           => multiple: 여러 파일을 한 번에 선택할 수 있는 기능

 

<form>

             파일 선택 : <input type="file" />

             <br />

             <br />

             이미지 파일 선택(multiple) : <input type="file" accept="image/*" multiple />

             <br />

             <br />

             <input type="search" />

             <input type="submit" value="검색" />

             <input type="reset" value="다시 입력" />

</form>

 


 

7.    날짜 & 시간

                           - 사용자가 달력 폼, 스핀 컨트롤 등을 활용해 날짜와 시간을 편리하게 선택하여 입력받는 폼.

                           - 속성값 종류에는 date, month, week, time, datetime 등이 있음

 

 

2.    output

             - 폼 이벤트 처리 결과를 화면에 출력하거나 value 속성을 이용하여 관련 있는 요소들의 수치 계산 결과를 보여주는 역할을 함

             - input 태그의 id 속성값과 output 태그의 for 속성값을 동일하게 지정함으로써 입력 폼과 출력 폼을 상호 연계하고, id와 for의 속성값을 폼 이벤트의 변수로 사용하여 연산 결과를 처리할 수 있음

             =>

 

<form>

             <label> 좋아하는 과목 이름을 입력하세요. </label>

             <br />

             <input type="text" id="class" />

             <br />

             <br />

             <table border="1">

                           <tr>

                           <th> 입력한 내용은 : </th>

                                        <td>

                                        <output for="class" onForminput="value=class.value"> 입력 결과 </output>

                                        </td>

                           </tr>

                           <tr>

                           <th> 입력한 글자 수는 : </th>

                                        <td>

                                        <output for="class" onForminput="value=class.value.length"> 글자 수 </output>

                                        </td>

                           </tr>

             </table>

</form>

 


 

 

목록 & 텍스트 영역 폼

폼을 구성하는 양식에는 입력 폼, 출력 폼 외에도 목록과 텍스트 영역 폼을 만들어주는 select, datalist, textarea 태그가 있음

1.    select

             - 콤보 박스와 리스트 박스의 목록 폼을 만들 때 사용.

             => name=“이름”: 콤보 박스와 리스트 박스의 이름 지정

             => size=“값”: 목록 크기를 지정하여 형태를 결정

             => multiple: 여러 개의 목록을 선택하는 기능을 제공

             => [option] value=“값”: 서버로 넘겨지는 값 결정

 

<form>

             <label> 당신의 혈액형을 선택하세요. </label>

             <br />

             <select name="combo_box">

                           <option value="a"> A형 </option>

                           <option value="b"> B형 </option>

                           <option value="o"> O형 </option>

                           <option value="ab"> AB형 </option>

             </select>

             <br />

             <br />

             <label> 좋아하는 언어를 선택하세요.(다중 선택) </label>

             <br />

             <select name="list_box" size="4" multiple>

                           <option value="1"> C </option>

                           <option value="2"> C# </option>

                           <option value="3"> C++ </option>

                           <option value="4"> HTML </option>

                           <option value="5"> Python </option>

                           <option value="6"> ASM </option>

             </select>

</form>

 


 

2.    datalist

             - 텍스트 입력 필드에 데이터 선택 목록이 나타나도록 함

             - input 태그의 list 속성과 datalist 태그의 id 속성 값을 동일하게 부여해 입력 필드와 데이터 목록이 연계되도록 함

 

<form>

             <fieldset>

                           <legend> 가장 좋아하는 언어는? </legend>

                           <input type="text" name="lang" list="talent" />

                           <datalist id="lang">

                                        <option value="C">

                                        <option value="C++">

                                        <option value="C#">

                                        <option value="HTML">

                                        <option value="Python">

                           </datalist>

                           <br />

                           <br />

                           <label> 당신의 선택은? : </label>

                           <output for="lang" onForminput="this.value=lang.value">

                           </output>

             </fieldset>

</form>

 


 

3.    textarea

             - 텍스트 영역 폼을 만들어 줌

             - 텍스트 필드의 성격을 가지고 있으면서 여러 줄을 입력받는데 사용됨

             => name=“이름”: 텍스트 영역의 이름 지정

             => rows=“줄 수”: 텍스트 영역의 줄 수 지정(기본값: 1). 내용이 박스의 크기를 넘으면 자동으로 스크롤바 생김

              => cols=“칸 수”: 텍스트 영역의 칸 수를 지정(기본값: 1)


<form>

             <h2> 메모장 </h2>

             <textarea name="textarea_1" rows="5" cols="50"> 의견을 남겨 주세요.

             </textarea>

</form>


 



저작자표시 비영리 동일조건

'Programming > Web Programming' 카테고리의 다른 글

JavaScript Basic #1  (0) 2017.07.13
CSS #2  (0) 2017.07.12
CSS #1  (0) 2017.07.12
HTML Basic #3  (0) 2017.07.10
HTML Basic  (0) 2017.07.05
Posted by BinZIP

티스토리툴바