Html 폼(form) 요소(input) 종류 (3)

결과

코드

See the Pen form3 by goddog (@g0dd0g) on CodePen.

input type	기능
checkbox	주어진 목록 중 선택할 수 있다. value 값을 이용해 판별한다. checked 를 사용하여서 기본값을 지정할 수 있다.
radio	주어진 목록 중 오직 하나만을 선택할 수 있다. name을 똑같이 주어서 묶어주어야만 하나만 선택받을수 있다.
datalist	input text 타입의 datalist를 연결해 주어 사용한다. 사용자가 직접 입력할 수 있으며 list에 입력한 것과 연관있는 목록을 보여준다.
select	하나만을 선택하는 콤보 박스를 만들 수 있다. selected 를 사용하면 기본값을 지정할 수 있다.

결과2

> 데이터 리스트는 목록의 있는 것을 선택할 수도, 없는 것을 직접 입력할 수 있다.

> 결과2 처럼 1을 입력하였더니 1로 시작하는 항목만을 보여준다.

> 또한, 입력하는 것을 돕기 위한 힌트의 역할도 할 수 있다.

결과3

> 콤보 박스는 데이터 리스트와 다르게 하나만을 선택할 수 있다.

> multiple 속성을 주어 다수 선택할 수도 있지만 거의 사용하지 않는다.

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

'Html' 카테고리의 다른 글

Html 폼(form) 요소(input) 종류 (2) (0)	2020.03.20
Html 폼(form) 요소(input) 종류 (1) (0)	2020.03.20
Html 특수 문자, 기호 사용 (0)	2020.02.14
html 테이블(table ) 표 만들기 (2)	2020.02.03
Html 태그 - 시맨틱 태그 및 기타 태그 (0)	2020.02.02

Html 폼(form) 요소(input) 종류 (2)

결과

코드

See the Pen form2 by goddog (@g0dd0g) on CodePen.

input type	기능
button	일반적인 버튼을 만든다. value="값" 을 주어 버튼 텍스트를 설정한다.
reset	폼에 입력된 내용을 reset(초기화) 해주는 버튼
image	이미지로 버튼을 만든다. src의 이미지 경로를 입력하면 img처럼 이미지가 뜨지만 버튼처럼 동작한다.
submit	제출 버튼으로 해당 폼의 데이터를 서버로 전송하는 등 처리한다.
color	컬러 피커 창을 띄워 색을 선택할 수 있다.
number	숫자를 입력 받을 때 유용히 사용할 수 있다. min = 최소값, max = 최대값 step = 증감 단위
range	슬라이드바로 숫자를 지정할 수 있다. 입력한 숫자는 value에 저장되어 이를 읽으면 된다. min = 최소값, max = 최대값
button	input 태그의 button 타입과 마찬가지로 버튼을 만드는 태그이다. 단, 버튼 태그 type에는 image가 없어 이미지 버튼을 만들기 위해서는 button태그 안의 img 태그를 사용해야 한다.

결과2

> number를 사용하면 이미지1 보이는 것처럼 스핀 버튼이 생겨 숫자를 증감 시킬 수 있다. 이 때 증감되는 숫자는 step으로 준 값이다.

+) label 은 요소를 묶어주는 역할을 한다. 위 코드에서는 "숫자 입력 : " 이라는 텍스트와 input 태그를 묶어주었다.

이렇게 연관된 것을 묶어야 css로 배치를 바꾸었을 때 묶음으로 움직일 수 있다.

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

'Html' 카테고리의 다른 글

Html 폼(form) 요소(input) 종류 (3) (0)	2020.03.21
Html 폼(form) 요소(input) 종류 (1) (0)	2020.03.20
Html 특수 문자, 기호 사용 (0)	2020.02.14
html 테이블(table ) 표 만들기 (2)	2020.02.03
Html 태그 - 시맨틱 태그 및 기타 태그 (0)	2020.02.02

Html 폼(form) 요소(input) 종류 (1)

결과

코드

See the Pen OJVwjpb by goddog (@g0dd0g) on CodePen.

input type	기능
text	한 줄의 텍스트 입력 value 를 사용하여 기본값을 채울 수 있다. maxlength로 입력 될 텍스트의 길이를 제한할 수 있다.
password	비밀번호를 입력하는 창(입력 내용이 가려진다)
email	겉으로는 text와 동일하지만 제출(submit) 버튼으로 제출 시 이메일 형식이 맞지 않다면 안내 메시지를 보여준다.
url	겉으로는 text와 동일하지만 제출(submit) 버튼으로 제출 시 url 형식이 맞지 않다면 안내 메시지를 보여준다.
tel	email 과 tel 처럼 안내 메시지를 보여주지 않는다. 그래서 placeholder를 사용하여서 힌트를 제공해주어야 한다.
search	검색 입력 창을 만든다. 특징으로는 x표가 있어 창의 내용을 한번에 지울 수 있다.
textarea	여러 줄의 텍스트를 입력할 수 있다. cols와 rows로 준 값만큼 area가 설정된다. cols=열 개수, rows=행 개수, 여기서 개수는 글자의 개수이다.

결과2

> email 형식에 맞지 않은 텍스트를 입력하고 제출 하면 경고가 뜨면서 양식에 맞도록 입력하라고 안내 메시지가 뜬다.

결과3

> url 형식에 맞지 않은 텍스트를 입력하고 제출 하면 경고가 뜨면서 양식에 맞도록 입력하라고 안내 메시지가 뜬다.

> url 의 형식은 'http:// ' 이다.

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

'Html' 카테고리의 다른 글

Html 폼(form) 요소(input) 종류 (3) (0)	2020.03.21
Html 폼(form) 요소(input) 종류 (2) (0)	2020.03.20
Html 특수 문자, 기호 사용 (0)	2020.02.14
html 테이블(table ) 표 만들기 (2)	2020.02.03
Html 태그 - 시맨틱 태그 및 기타 태그 (0)	2020.02.02

Html 특수 문자, 기호 사용

Html은 'UTF-8' 를 표준으로서 다양한 종류의 문자, 기호, 특수 문자를 표현할 수 있다.

하지만 태그를 감싸줄 때 사용하는 '<', '>' 처럼 Html에서 예약어로 지정되어 있는 문자나 특수 문자들을 입력하기 위해서는 다른 방법을 사용해야 한다.

자주 사용되는 특수 문자들

특수 문자	엔티티표현
<	<
>	>
&	&
"	"
'	'
공백(한 칸)

예시 코드


<!DOCTYPE html>
<html lang="kr">
    <head>
        <meta charset="utf-8">
        <title>제목</title>
    </head>
    <body>
        <h1>특수 문자들</h1>
        & quot;
        & apos;
        <br><br>
        & uarr;
        & rarr;
        & larr;
        & darr;
        <br><br>
        & lt;
        & gt;
        <br><br>
        & sum;
        & nbsp;
        & sub;
        & infin;
        & divide;
    </body>
</html>

해당 예시 코드에서는 입력한 값이 무엇인지 보기 위하여 '&' 이후 한칸을 띄어쓰기 해주었지만 붙여주어야 문자로 보인다.

결과

셀 수 없을 정도로 많은 기호들이 있으므로 자주 사용하는 것 몇 개만 기억하고, 나머지는 사용할 때마다 찾아서 사용하면 된다.

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

'Html' 카테고리의 다른 글

Html 폼(form) 요소(input) 종류 (2) (0)	2020.03.20
Html 폼(form) 요소(input) 종류 (1) (0)	2020.03.20
html 테이블(table ) 표 만들기 (2)	2020.02.03
Html 태그 - 시맨틱 태그 및 기타 태그 (0)	2020.02.02
Html 기초 - 기본 구조, 텍스트 관련 태그들 (0)	2020.02.01

html 테이블(table ) 표 만들기와 테이블 속성들

기본적인 테이블 만들기

태그	역할
<table>	테이블을 만든다.
<tr>	테이블의 행(가로 한줄)을 만든다
<td>	테이블의 열을 만든다.
<th>	테이블(표)의 헤드 부분(자동으로 가운데 정렬, 굵게 적용)
<caption>	테이블 이름 표시
<thead>	테이블의 헤더 영역 지정
<hbody>	테이블의 바디 영역 지정

[ 코 드 ]

    <table
            border="1"
            width="50%"
            height="200"
            cellspacing="5">
            <caption>표 제목</caption>
            <thead>
                <tr align="center" bgcolor="white">
                    <td></td>
                    <th>김씨</th>
                    <th>이씨</th>
                    <th>박씨</th>
                </tr>
            </thead>

            <tbody>
                <tr align="center" bgcolor="white">
                    <th>월급</th>
                    <td>100원</td>
                    <td>200원</td>
                    <td>400원</td>
                </tr>
                <tr align="center" bgcolor="white">
                  <td>월급</td>
                  <td>100원</td>
                  <td>200원</td>
                  <td>400원</td>
                </tr>
            </tbody>
        </table>

[ 결 과 ]

- <table> 을 사용하여서 테이블을 만든다.

- <tr> 태그를 사용하여서 하나의 행을 만든다.

- <tr> 태그로 행을 만들었으면 그안에 <td>를 사용하여서 열을 나누어 준다.

- <td>의 개수는 모든 <tr>에서 동일한 것이 좋다. 만약 값을 비워야 한다면 <td>로 열을 만들지만 값을 넣지 않으면 된다.

테이블 속성들

[ 코 드 ]

    <table border ="1" width="50%" height=200 bgcolor=#11a9c1 bordercolor="white" cellspacing="5">
      <tr align="center" bgcolor="white">
        <td rowspan="2">rawspan 사용</td>
        <td>김씨</td>
        <td>이씨</td>
        <td>박씨</td>
      </tr>

      <tr align="center" bgcolor="white">
        <td>100원</td>
        <td>200원</td>
        <td>400원</td>
      </tr>
      <tr align="center" bgcolor="white">
        <td colspan="4">
          colspan 사용
        </td>
      </tr>
    </table>

[ 결 과 ]

속성	설명
align	정렬을 지정한다. ( left, center, right )
border	테두리 선의 두께를 지정한다.
bgcolor	배경색을 지정한다. ( 색은 "red", "black" 처럼 기존의 정의되어있는 색을 사용할 수도 있으며 rgb형식의 #000000 으로도 색을 지정할 수 있다. )
bordercolor	테두리 선의 색을 지정한다. 색을 지정하는 방법은 bgcolor와 동일하다.
cellspacing	셀간의 간격을 지정한다.
width	가로길이를 지정한다. (상수값을 입력할 수도, % 단위로 입력할 수도 있다. %를 사용하였을 때는 웹브라우저 크기의 대한 %이다. )
height	세로길이를 지정한다.
rawspan	지정한 값만큼 행을 병합한다. (위아래로)
colspan	지정한 값만큼 열을 병합한다. (좌우로)

- 해당 예시에서는 테이블의 백그라운드 컬러를 준다음 행 <tr> 태그에서도 백그라운드 컬러를 주었다. 이렇게 하여bordercolor를 지정하여 색을 줄 때와는 유사하지만 다른 형태를 만들어낼 수도 있다.

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

'Html' 카테고리의 다른 글

Html 폼(form) 요소(input) 종류 (2) (0)	2020.03.20
Html 폼(form) 요소(input) 종류 (1) (0)	2020.03.20
Html 특수 문자, 기호 사용 (0)	2020.02.14
Html 태그 - 시맨틱 태그 및 기타 태그 (0)	2020.02.02
Html 기초 - 기본 구조, 텍스트 관련 태그들 (0)	2020.02.01

Html 태그 - 시맨틱 태그 및 기타 태그

시맨틱 태그

- 시맨틱 태그는 웹페이지의 공간을 분리해 준다. 공간마다 각각의 역할이 있다.

- 사용하여도 레이아웃 적으로는 변하는 것이 없다. 하지만 컴퓨터(검색 엔진 ,등...)는 이 시맨틱 태그를 읽음으로써 공간을 구분 하여 처리할 수 있다.

( ex) 제목 부분을 읽어서 어느 내용의 글인지 판단 )

[ 코 드 ]

<!DOCTYPE html>
<html lang=kr>
  <head>
    <meta charset="utf-8">
    <title>제목</title>
  </head>
  <body>
    <header>
      <nav>
      </nav>
    </header>
      <section>
      </section>
      <article>
      </article>
      <div style="background:green">텍스트</div>
      <span style="background:green">텍스트</span>
    <aside>
    </aside>
    
    <footer>
    </footer>
  </body>
</html>

- header : 보통 웹 페이지에서 상단 부분의 배치된다. 주로 페이지 제목, 로고나 아이콘, 페이지의 관한 간단한 설명, 네비게이션을 포함한다.

- nav : 네비게이션 역할을 한다. 즉, 해당 페이지의 목차(index) 같은 역할을 한다. 네비게이션은 보통 링크들을 포함하는 리스트로 만들어 진다.

- section : 글 내용을 세부적인 내용에 따라 구분할 때 사용한다. 책으로 표현한다면 1장(Chapter, Part)를 나타낸다. 한 section은 시작으로 <h1>~<h6>헤딩 태그를 사용하여서 섹션의 주제를 표현하는 것이 좋으며 하나의 헤딩 태그만을 사용하여서 주제를 명확하게 해주어야 한다.

- article : section에서는 페이지의 본문을 나타냈었다면 article은 section의 내용을 보조해주는 내용들을 나타낸다.

- aside : 주로 페이지 본문 바깥 부분의 오른쪽이나 왼쪽의 배치된다. 페이지 본문과는 상관없는 내용이 담긴다.

- footer : 보통 웹 페이지의 하단 부분의 배치된다. 이곳에는 페이지의 저작권 정보나 저작자 정보, 관련된 문서 또는, 주소나 전화번호 등을 나타낸다.

div vs. span

- div : 스타일을 지정하거나 이벤트를 수행하기 위한 컨테이너로 사용된다.

( 결과를 보면 div는 한줄을 끝까지 채운다. 이는 block 형식이라하며 가로(한줄)를 다 채운다.)

ㄴ 시맨틱 태그가 나오기 전에는 div의 id로 시맨틱 태그를 주어서 구분하였다.

- span : div와 마찬가지로 스타일을 지정하거나 이벤트를 수행하기 위한 컨테이너로 사용된다.

( 단, div와 달리 inline 형식으로 자신의 내용만큼 크기를 설정한다.)

[ 결 과 ]

기타 태그들

[ 코 드 ]

<!DOCTYPE html>
<html lang=kr>
  <head>
    <meta charset="utf-8">
    <title>제목</title>
  </head>
  <body>
    <a href="#" target="_blank">링크</a>
    <pre>
      aaaaaa
      bbbbb
      cccc
    </pre>
    <br>
    <img src="이미지 경로" alt="이미지 설명"/>
    <video src="비디오 경로">
      video 태그를 지원하지 않으면 출력됨
      속성 : width height controls autoplay loop poster
    </video>
    <audio>
      <source src="오디오 경로" type="audio/.mp3">
    </audio>
  </body>
</html>

- a : 하이퍼링크를 건다. href에 이동할 주소를 입력하고 #을 입력할 시 자신을 연다. target 속성으로 "_blank"를 주면 해 당 페이지를 새 창으로 연다.

- pre : 텍스트들을 나타내며 pre 태그 안 공백이나 개행들이 그대로 유지된다.

- img : 이미지를 보여준다. alt는 이미지 위에 포커스를 주었을 때 설명을 보여주거나 이미지를 보여주지 못할 때 대신할 설명을 작성한다.

- video : 비디오 형식의 파일을 보여준다. width 속성이나 height 속성이 있어서 크기를 지정하는 등 여러가지 속성을 사용할 수 있다.

- audio : 오디오 형식의 파일을 보여준다. type으로 해당 오디오 파일의 확장명을 지정해주어야 한다.

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

'Html' 카테고리의 다른 글

Html 폼(form) 요소(input) 종류 (2) (0)	2020.03.20
Html 폼(form) 요소(input) 종류 (1) (0)	2020.03.20
Html 특수 문자, 기호 사용 (0)	2020.02.14
html 테이블(table ) 표 만들기 (2)	2020.02.03
Html 기초 - 기본 구조, 텍스트 관련 태그들 (0)	2020.02.01

Html 기초 - 기본 틀, 텍스트 관련 태그들

[ 기본적인 구조 ]

<!DOCTYPE html>
<html lang=kr>
  <head>
    <meta charset="utf-8">
    <title>제목</title>
  </head>
  <body>
      본문
  </body>
</html>

- 4라인 : 언어 설정을 utf-8로 함으로써 대부분의 언어를 깨지는 현상 없이 나타낼 수 있다.

[ 텍스트 관련 태그들 ]

<!DOCTYPE html>
<html lang=kr>
  <head>
    <meta charset="utf-8">
    <title>제목</title>
  </head>
  <body>
      <p>텍스트</p>
      <u>텍스트</u>
      <i>텍스트</i>
      <b>텍스트</b>
      <br>
      <em>텍스트</em>
      <h1>텍스트</h1>
      <h6>텍스트</h6>
      <ruby>
        凸<rt>볼록할 철</rt>
        test<rt>연습</rt>
      </ruby>
  </body>
</html>

- p : 단락이라는 뜻을 가진 Paragraph를 뜻하며 개행을 포함한다.

- u : 밑줄을 그은다.

- i : 이탈릭체(약간 기울어진 모습)으로 나타낸다.

- b : 텍스트를 Bold(굵음)처리 한다.

- br : 단일 태그로서 개행을 할 때 사용한다.

- em : 겉보기에는 이탈릭체와 똑같지만 음성으로 읽어주는 경우 더욱 강조해서 읽어준다.

- h1 ~ h6 : Heading, 제목을 뜻하며 1이 가장 크며 6까지가면서 점점 작아진다.

-ruby : 결과에서 보이는 것처럼 한자와 음을 나타내며 사용할 수 있다.

[ 결 과 ]

ruby에는 한자뿐만 아니라 영어, 한국어 등 다 사용할 수 있다.

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

'Html' 카테고리의 다른 글

Html 폼(form) 요소(input) 종류 (2) (0)	2020.03.20
Html 폼(form) 요소(input) 종류 (1) (0)	2020.03.20
Html 특수 문자, 기호 사용 (0)	2020.02.14
html 테이블(table ) 표 만들기 (2)	2020.02.03
Html 태그 - 시맨틱 태그 및 기타 태그 (0)	2020.02.02

Html

Html 폼(form) 요소(input) 종류 (3)

결과

코드

'Html' 카테고리의 다른 글

Html 폼(form) 요소(input) 종류 (2)

결과

코드

'Html' 카테고리의 다른 글

Html 폼(form) 요소(input) 종류 (1)

결과

코드

'Html' 카테고리의 다른 글

Html 특수 문자, 기호 사용

자주 사용되는 특수 문자들

예시 코드

결과

'Html' 카테고리의 다른 글

html 테이블(table ) 표 만들기와 테이블 속성들

기본적인 테이블 만들기

[ 코 드 ]

[ 결 과 ]

테이블 속성들

[ 코 드 ]

[ 결 과 ]

'Html' 카테고리의 다른 글

Html 태그 - 시맨틱 태그 및 기타 태그

시맨틱 태그

[ 코 드 ]

div vs. span

[ 결 과 ]

기타 태그들

[ 코 드 ]

'Html' 카테고리의 다른 글

Html 기초 - 기본 틀, 텍스트 관련 태그들

[ 기본적인 구조 ]

[ 텍스트 관련 태그들 ]

[ 결 과 ]

'Html' 카테고리의 다른 글

티스토리툴바