본문 바로가기
STUDY/HTML,CSS,JS

HTML

osy9907 2024. 2. 27. 17:21
728x90

HTML

  • Hyper Text Markup Language
  • 웹페이지를 작성하기 위한 언어
  • 웹페이지에 보일 텍스트나 이미지를 일종의 해석 기호인 태그로 감싸 사람,컴퓨터 모두 의미를 이해할 수 있도록 함
    • 마크업 언어
      • 태그 등을 이용해 문서, 데이터의 구조를 명기하는 언어

HTML버전

  • HTML의 사양은 W3C(The World Wide Web Consortium)이 규정
  • 현재는 2014년에 확정된 HTML5 사용
  • 특징
    • 태그 작성법이 간단해짐
    • 브라우저들간의 호환성이 높아짐
    • 플러그인의 추가설치 없이 멀티미디어 재생 가능
    • 실시간으로 서버와 양방향 통신(WebSocket 통신)
    • 오프라인에서도 작업 가능
    • 모바일 웹 지원 및 장치 접근 가능(카메라, GPS 등)

HTML 일반 형식

  • 무수히 많은 요소들로 이루어짐
  • 요소는 시작 태그와 종료 태그로 콘텐츠를 감싸는 양식

태그

  • < ,>로 태그명을 감싸서 표현
  • 시작태그는 <태그명 속성>, 종료태그는 </태그명> 형태

콘텐츠

  • 시작 태그와 종료 태그로 감싸진 부분을 지칭하는 표현
  • 브라우저에 표시되는 부

속성

  • 특정 태그에만 사용할 수 있는 속성
    • ex.) <a> 태그의 href 속성 
  • 태그종류에 상관없이 모두 사용할 수 있는 속성
    • ex.) class 속성, id 속성

공요소( = 단일 태그)

  • 시작 태그만 있는 요소
  • 화면에 표시할 콘텐츠가 없는 요소와 표시할 콘텐츠를 속성으로 지정하는 태그는 일반적으로 공요소
    • 예시
      • <br> : 줄바꿈 외에 표시한 콘텐츠 X
      • <img> : 표시할 콘텐츠는 src 속성에 지정

주의사항

  • 공요소의 > 앞에 /를 작성하는 경우가 있다
  • HTML의 문법이 엄격하지 않다는 요구에 따라 HTML5 이전에 정확한 문법을 지향하는 XHTML을 사용.
    • 예시
      1. 공요소의 ' > ' 앞에 ' / ' 를 반드시 사용해야함 ex.) <br/>
      2. 코드는 반드시 소문자로 작성해야함 ex.) <H1> X
      3. 속성태그를 사용했다면 반드시 값을 입력해야함 ex.) <input readonly = "readonly">

파일 기본 구조

<!DOCTYPE html>
<html lang="ko">
<head>
    문서의 각종 정보와 문서 자체에 대한 설명 내용
    <meta>, <title>, <link>, <style>, <script> 등 사용
</head>
<body>
    화면에서 출력해서 보여주는 모든 정보/내용
    head에 들어가느 태그를 제외하고 모두 사용
</body>
</html>

<html></html>

  • html문서 시작, 끝 표시
  • lang은 이 페이지가 어느 나라 언어로 되어있는지 의미
    • 속성
      • html 뒤에 붙는 lang을 속성이라고 함
      • ex.) <html lang="en">
    • 속성 값
      • 속성에 대한 값을 설정한 것이 속성 값
    • lang의 속성 값으로는 "설정 언어"가 올 수 있음
      • de : 독일어, en : 영어, ko : 한국어 ...

HTML5

  • 주의 사항
    • 태그는 대, 소문자를 구분하지 않으나 소문자 권장
    • 시작 태그로 시작하면 반드시 종료 태그로 종료
    • 파일 확장자느 반드시 html 또는 htm으로 설정
    • 문자의 공백은 몇개를 입력하든 한개만 인식하므로 공백을 추가하기 위해서 특수기호&nbsp; 를 이용

주석

  • 프로그램의 실행에 영향 X, 코드를 이해할 수 있는 설명을 추가
  • <!-- 로 시작하여 -->로 사용

<head>

<meta>

  • 헤더 내부에서 사용하는 태그
  • html 문서가 가지고 있는 유용한 정보를 담아두는 곳

<meta charset = "UTF-8">

  • charset 속성
    • 해당 HTML 문서의 문자 인코딩 방식
  • UTF-8
    • 유니코드를 인코딩하는 방법 중 하나.
      • 유니코드 : 전세계 언어를 모두 표시할 수 있는 표준코드
      • 인코딩 : 컴퓨터가 이해할 수 있는 형태로 변경하는 행위

그 외 <meta>

1. 검색 엔진을 위한 키워드 정의
<meta name="keyword" content="java, dev, html">

2. 웹페이지에 대한 설명을 정의
<meta name="description" content="Java Developer">

3. 웹페이지의 저자를 정의
<meta name="author" content="osy">

4. 5초 뒤에 다른 페이지로 이동
<meta http-equiv="refresh" content="5; url=https://java.developer.com">

5. 모든 기기에서 웹사이트가 잘 보이도록 뷰포트 설정
<meta name="viewport" content="width=device-width", initial-scale="1.0">

 

반응형 웹

  • 웹사이트로 접속할 때 사용하는 기기의 종류에따라 화면 크기가 자동으로 변하게 만들어진 웹
  • viewport
    • 웹페이지가 사용자에게 보여지는 영역
    • 예시
      • width = device-width
      • initial-scale = 1.0
        • 처음 페이지가 로딩될 때 확대나 축소하지 않은 기존 크기를 사용
        • 0에서 10 사이의 값을 가짐

<title></title>

  • 페이지 제목을 나타내는 태그
  • 웹 브라우저 탭에 표시되는 명칭
<title>Document</title>

<link>

  • 문서를 외부의 문서와 연결하기 위해 사용
  • css파일이나 웹 폰트 사용시 주로 연결
  • <link rel="가져올 문서와 관계" href="문서위치" type="MIME">
    • 속성
      • href : 연결한 파일의 경로지정
      • rel : 링크가 형성하는 관계 지정
      • type : MIME 타입지정
참고: MIME(Multipurpose Internet Mail Extensions: 문서, 파일의 성격과 형식을 표현

 

<style></style>

  • 태그의 스타일을 지정해주는 태그
  • CSS속성을 HTML내에 직접 사용할 때 사용

<body></body>

 

텍스트

Lorem ipsum dolor sit amet(Lipsum)

  • 실질적인 의미가 없는 단어를 조합해서 만든 글
  • 글의 내용에 주의를 빼앗기지 않고 디자인을 보여주고자 할 때 사용
  • ex.) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  • https://www.lipsum.com/
 

Lorem Ipsum - All the facts - Lipsum generator

What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type spec

www.lipsum.com

 

<hn></hn>

  • 제목을 입력할 때 사용하는 태그
  • 폰트의 크기가 태그마다 정해져 있다
  • h 뒤 숫자(n)으로 구분
  • h1~h6 까지 존재
<hn>제목 내용</hn>

 

<p></p>

  • 문단을 정의할 때 사용
  • 자동으로 위, 아래에 약간의 여백 추가
<p>문단 내용</p>

줄 바꿈과 구분줄

<br>

  • 문장을 줄 바꾸기(개행)할 때 사용
내용<br>

<hr>

  • 페이지에 가로로 밑줄을 만들어 줄 때 사용
내용
<hr>

강조

<strong></strong> or <b></b>

  • 문장에서 문자를 강조하여 굵게 표시할 경우 사용
<strong>강조 문구</strong>
<b>강조 문구</b>

 

<mark></mark>

  • 배경 부분을 노란색으로 하여 형광펜 표시가 된 듯하게 출력하는 태그
<mark>강조 문구</mark>

밑줄과 취소선

<u></u>

  • 밑줄(수평 줄) 긋는 태그
<u>내용</u>

<s></s>

  • 취소선 긋는 태그
<s>내용</s>

 

기울임과 작은 글씨

<em></em> or <i></i>

  • 문자에 기울임을 주는 태그
<em>내용</em>
<i>내용</i>

<small></small>

  • 원 문자보다 작은 글씨로 표시하며 부가 정보 표현시 자주 사용
<small>내용</small>

 

인용

<blockquote></blockquote>

  • 다른 블로그나 사이트의 글을 인용할 경우 사용
  • 자동 들여쓰기가 되어 다른 텍스트와 구별 가능, 개행을 내포
<blockquote>내용</blockquote>

<q></q>

  • 다른 블로그나 사이트으 ㅣ글을 인용할 경우 사용
  • 인용 문구에 ~ 개행 내포x
<q>내용</q>

첨자

<sup></sup>

  • 태그로 감싼 내용만 위 첨자로 되는 태그
<sup>내용</sup>

<sub></sub>

  • 태그로 감싼 내용만 아래 첨자로 되는 태그
<sub>내용</sub>

 

그 외 

<abbr></abbr>

  • 일반적으로 축약어를 나타낼때 사용
  • 태그 위에 마우스를 올려놓으면 툴팁 형태로 출력
  • title 속성 안에 툴팁으로 나올 값 지정
<abbr title="툴팁으로 나올 값">내용</abbr>

<code></code>

  • 컴퓨터 인식을 위한 소스코드를 담는 태그로 <pre>태그 내부에 작성
<pre><code>내용</code></pre>

목록

 

<ul></ul>

  • 순서가 필요하지 않은 목록 만들 때 사용
  • 리스트 앞에 특정 모양 출력(기본 값 :  ·)
  • 모양은 CSS 이용해 수정가능
<ul>
    <li>내용1</li>
    <li>내용</li>
</ul>

 

HTML 문서구조

  • 요소와 요소는 중첩구조를 이룸
  • 새롭게 HTML을 작성하거나, 기존 페이지 해석할 때 중첩 구조 파악하는 것 중요

종류

  • 1. 부모요소 와 자식
    • 부모 요소: 특정 요소의 관점에서 한 단계 상위에 있는 요소
    • 자식 요소 : 특정 요소의 관점에서 한 단계 아래에 있는 요소  
  • 예시 
<ul>
	<li>탕수육<li>
</ul>
  • 2. 자손 요소와 후손 요소
    • 자손 요소 : 특정 요소 관점에서 한 단계 아래에 있는 요소
    • 후손 요소 : 특정 요소 관점에서 아래에 있는 모든 요소
  • 예시
<div>
    <ul>
    	<li>짜장면</li>
    </ul>
</div>
  • 3. 형제 요소
    • 부모 요소가 같은 요소
    • 예시
<ul>
    <li>탕수육</li>
    <li>짜장면</li>
</ul>

 

<ol></ol>

  • 순서가 있는 목록 만들 때 사용
  • 속성으로 문자(A, B, C ... / a, b, c, ...), 숫자(1, 2, 3 ...), 로마자(i, ii, iii, ... / I, II, III ... ) 설정
  • CSS 로 순서 설정 가능
  • 예시
<ol type="순서형식(a,A,1,i,I)" start="시작순서">
    <li>내용1</li>
    <li>내용2</li>
</ol>

<dl></dl>

  • 용어나 문장에 대한 정의(definition) 리스트
  • 자동으로 들여쓰기가 됨
<dl>
    <dt>정의 제목</dt>
    <dd>정의 내용1</dd>
    <dd>정의 내용2</dd>
</dl>

테이블

<table></table>

  • 웹 문서에서 자료를 정리할 때 주로 사용
  • 행과 열로 구성, 행과 열이 만나는 지점 - 셀
  • 태그
    • <tr></tr> : 한개의 행(ROW)을 만드는 태그
    • <td></td> : 한개의 열을 만드는 태그
-- 1행 2열 테이블 작성 --
<table>
    <tr>
        <td>내용</td>
        <td>내용</td>
    </tr>
</table>

 

테이블 속성

  • border
    • <table> 태그의 속성으로 테두리 두께 설정(CSS 사용 권장)
    • 숫자가 커질 수록 두께도 커진다
<table border="두께(숫자)"></table>

 

추가 관련 태그

  • <caption></caption>
    • 테이블의 제목, 내용을 추가하는 태그
    • 다른 태그를 이용하여 텍스트를 꾸밀수있음
    • 기본위치는 테이블 위 중앙에 배치
    • <table></table> 태그 아래에 사용
  • <th></th>
    • 열에 대한 제목을 표시하는 태그
    • 중앙 정렬 및 굵게 표시
    • <tr></tr> 태그 아래에 사용
  • <figure>, <figcaption>
    • 테이블에 설명을 추가하는 태그
      • <figure> ~ <table> ~ <figcaption> : 테이블 뒤에 설명추가
      • <figure> ~ <figcaption> ~ <table> : 테이블 앞에 설명추가
<figure>
    <figcaption> 테이블 설명입니다. </figcaption>
    <table>
        <tr>
            <td>내용</td>
        </tr>
    </table>
    <figcaption> 테이블 설명입니다. </figcaption>
</figure>

 

rowspan과 colspan

  • <td>태그의 속성
  • rowspan은 지정한 수만큼 행 병합
  • colspan은 지정한 수만큼 열 병합
<td rowspan = "병합할 행 개수"></td>
<td colspan = "병합할 열 개수"></td>

 

테이블 구조 태그

  • 테이블 내의 영역을 명시하는 태그
  • 각 요소별로 스크롤을 부여하는 등 별도 스타일을 부여하기 위해 사용
    • <thead></thead> : 테이블 헤더 콘텐츠 그룹
    • <tbody></tbody> : 테이블 내용 콘텐츠 그룹
    • <tfoot></tfoot> : 테이블 푸터 콘텐츠 그룹

<colgroup></colgroup>

  • 테이블 내 요소들의 속성을 공통으로 지정해주기 위한 태그
  • <caption> 태그 뒤, <tr> , <td> 태그 전 위치
    • <col>
      • <colgroup>의 자식요소로 각 열의 속성을 정의
      • span 속성을 사용하여 열을 묶을 수 있음

레이아웃

div

  • 웹 페이지의 좌우 공간 모두 차지
  • 공간을 수직으로 분할
<div>내용1</div>
<div>내용2</div>

 

span

  • 콘텐츠의 크기만큼 영역 차지
  • 공간을 수평으로 분할
<span>내용1</span>
<span>내용2</span>

 

div vs span

  • 새로운 요소를 아래에 추가하고 싶다면 div
  • 새로운 요소를 수평으로 추가하고 싶다면 span

html4 페이지 구조

<div id="header"> ... </div>
<div id="content"> ... </div>
<div id="footer"> ... </div>

 

html4 한계

  1. <div>, <span>을 이용해 구역 설정
  2. 각 태그에 id 속성을 다르게 부여하여 구분
  3. 태그 명칭이 일치해 구조이해,  차후 유지보수 힘듬
  4. 검색 엔진이 웹소스 확인할 때도 영역 구별 어려움
  5. 다양한 기기에서 적용하기에 구조 복잡

html5 페이지 구조

  • 시맨틱 태그(semantic)
    • 페이지 구조를 특정 기능에 맞는 태그를 사용해 구분
    • 페이지 구조를 쉽게 파악 가능하고 좀 더 정확한 정보를 검색 가능
<header>
        <h1>제목</h1>
</header>
<nav><a></a></nav>
<section>
    <article>내용</article>
    <article>내용</article>
</section>
<footer>
	사업번호, 사업자 주소, 연락처, 저작권, 링크
</footer>
  • <header></header>
    • 웹페이지의 맨 윗부분, 로고, 로그인, 회원가입 
  • <nav></nav>
    • 다른 사이트나 페이지로 이동하는 태그를 모아놓은 태그
    • 특정 태그에 종속X, 어느곳에서나 사용 가능
    • 주로 메뉴, footer의 사이트 링크 모음에 많이 쓰임
  • <section></section>
    • 웹 문서에서 콘텐츠가 들어가는 영역
    • 컨텐츠를 주제별로 묶을 때 사용
    • <section> 태그 안에 <section> 태그 넣을 수있음
    • article을 통해 주제별로 묶을 수 있음
  • <article></article>
    • 웹페이지 내용이 들어가는 영역(게시판, 블로그 글, 뉴스 등)
    • 다른곳으로 배포하거나 재사용 가능한 콘텐츠를 의미
  • <aside></aside>
    • 사이드 바라고 불리며 본문 외의 기타 내용을 담고있는 영역
    • 주로 광고를 달거나 링크 모음 등을 표현
  • <footer></footer>
    • 웹 페이지의 맨 아래쪽에 위치
    • 회사 소개, 저작권, 연락처 등의 정보 표시
    • <footer>안에 <header>, <section>, <article>등 다른 레이아웃 사용 가능

웹 접근성

  • 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수  있도록 보장
  • 웹 접근성 체험
 

[네이버 온라인 장애 체험]

다양한 웹 상황에 공감하여 웹의 문턱을 낮춰주는 웹 접근성 체험

nax.naver.com

하이퍼링크

하이퍼 링크

  • HTML(Hyper Text Markup Language)의 핵심기능
  • 하이퍼텍스트 문서 안에서 다른 문서나 리소스로 이동
  • ex.) <a>태그, iframe 태그

<a>

  • 페이지에서 해당 부분을 클릭하면 지정된 페이지로 이동하는 태그
  • 외부 사이트 연결, 문서 내부에서 이동 가능
    • 속성
      • href : 링크한 페이지의 id값이나 사이트 주소 지정
      • target : 링크 페이지가 표시될 위치(새 창, 현재 창)지정

target 이용

  • 링크된 페이지가 보여지는 방식 지정
<a href="주소" target="_blank(새창)" 
    or "_self(현재)" 
    or "_parent(상위창)"
    or "_top(최상위창)">
</a>

 

기본 작성

문자

<a href="주소">
    링크 표시 문구
</a>

 

이미지

<a href="주소">
    <img src="이미지 경로">
</a>

 

경로 표현 방법

  1. 다른 사이트로 연결하기
  2. 내부 링크(사이트 내의 다른 페이지)로 연결하기
    • 하위 계층(폴더)의 파일에 연결하기
    • 상위 계층 (폴더)에 있는 파일에 연결하기
    • 동일 계층의 파일에 연결하기
    • 루트 상대 경로
  3. 페이지 내의 특정 위치로 이동하기

다른 사이트로 연결하기

  • 절대 경로 사용
  • 절대 경로
    • http://나 htttps:// 스킴으로 시작되는 url
    • 외부 사이트의 링크로 사용
<a href="https://www.tistory.com/">티스토리</a>

 

내부 링크로 연결하기

  • 상대 경로 주로 사용
    1. 하위 계층(폴더)의 파일에 연결하기
    2. 상위 계층 (폴더)에 있는 파일에 연결하기
    3. 동일 계층의 파일에 연결하기
    4. 루트 상대 경로

페이지 내의 특정 위치로 이동하기

  • 텍스트 분량이 많거나 많은 정보를 담아야 하는 광고 페이지
    1. 페이지 내 링크의 이동 대상 요소에 id 속성 추가
    2. a 태그 href 속성에 '#'과 함께 이동할 요소의 id명 기술
      • 주소에 '#'만 입력하면 항상 페이지 최상단으로 이동
<p id="test"></p>
<a href="#test">
    링크 표시 문구
</a>

 

<iframe>

  • 웹 문서 안에 다른 웹 페이지를 추가하느 내그
  • 속성
    • title : 마우스 커서 올렸을 때 툴팁
    • src : 웹페이지 경로(내부 html 파일 가능)
    • width : 가로 크기
    • height : 세로 크기

XSS

  • Cross Site Scripting 공격
  • iframe으로 가져온 웹 페이지의 코드에 직접 접근 가능
  • 게시판이나 웹 메일에 스크립트 코드를 추가하여 사용자의 개인정보를 탈취(쿠키 정보 유출)하거나 최초 개발자가 의도하지 않은 코드를 추가 할 수 있음

멀티미디어

이미지태그

  • <img>
    • 웹페이지에 사진이나 그림을 삽입할 때 사용하는 태그
    • 속성
      • src : 삽입할 이미지 경로를 지정하는 속성
      • alt : 이미지 설명해주는 텍스트 속성, 이미지가 출력이 안되면 표시됨
      • width, height : 이미지의크기를 설정하는 속성
<img src="경로" alt="설명 문구" width="너비" height="길이">

 

  • 웹 페이지 사용 가능한 확장자
형식 내용
JPG / JPEG 사진이거나 사용한 색이 많은 그림인 경우 사용
압축률을 자유롭게 변경할 수 있으나, 압축률을 높이면 화질이 떨어짐
PNG 그래프, 도표, 로고처럼 그래픽에 문자가 포함된 경우
픽토그램처럼 윤곽이 뚜렷하고 색상수가 적은 경우
GIF 여러장의 이미지를 조합해서 움직이는 그림
페이지를 불러오고 있음을 나타내는 로딩 사인
  • <figure></figure>
    • 문서의 전반적인 흐름과 독립적인 콘텐츠 표시
    • <caption>과 비슷한 기능
<figure>
    <img src="경로" alt="설명문구">
    <figcaption>이미지 설명</figcaption>
</figure>

 

  • <audio>
    • 웹 브라우저에서 별도의 플러그인 도움없이 음악을 재생할 수 있게 만들어주는 태그
<audio src="major.mp3" 
    controls="controls" or "" or -
    autoplay="autoplay" or "" or -
    loop="loop" or "" or -
</audio>

 

오디오 태그

  • 속성
    • src : 음악 파일의 경로 지정
    • controls : 재생 도구 출력 지정
    • autoplay : 자동 재생 여부 지정 - 모바일에서는 적용 X
    • loop : 반복 여부 지정
  • 브라우저 별 사용 가능 파일
형식 IE 크롬 파이어폭스 사파리 오페라
MP3 O O X O X
OGG X O O O O
WAV X O O X O

 

비디오 태그

  • <video></video>
    • 웹브라우저에서 플러그인의 도움 없이 미디어 재생을 할 수 있게 만들어 주는 태그
<video src="video/movie.ogv"
    controls="controls" or "" or -
    autoplay="autoplay" or "" or -
    loop="loop" or "" or -
    poster="이미지 경로"
    width="너비"
    height="높이" >
</video>

form(1)

form의 역할

<form method="get" or "post" name="이름" action="웹서버 주소" target="데이터 전달 결과 어떻게 나타낼지">
</form>
  • 사용자가 웹 브라우저에서 입력한 데이터를 보내는 방식과 데이터를 받아서 처리할 웹서버 프로그램을 정하는 태그
  • 속성
method get : url 창에 데이터를 보내는 방식 / data 크기에 제한이 있음 (256 ~ 4096byte) / data를 볼 수 있음
post : http request에 data를 넣어 보내는 방식 / data크기에 제한이 없음 / data를 볼 수 없음
NAME <form>태그의 고유 이름 지정
<form>을 구분하기 위해 사용
action 데이터를 처리 할 프로그램(페이지)을 지정
target action속성의 프로그램(페이지)를 어떻게 열지 지정
  • name
    • form의 데이터를 서버로 보낼 때 각 데이터를 구분짓기 위한 명칭
  • id
    • 화면에서 label로 input에 명칭을 붙이거나, css에서 스타일 혹은 js에서 기능을 부여하기 위한 식별자

<input>

  • 사용자로부터 data를 입력 받기 위한 태그
  • 속성
type 입력창의 타입을 결정하는 속성 (text, checkbox, radio 등)
name input을 구별할 수 있는 명칭
value input요소의 기본 값 표시
maxlength 사용자가 입력할 수 있는 글자수 제한
placeholder 사용자 입력 전 입력 창 표시 글
readonly 읽기 전용 필드
required 필수 입력 필드 지정
disabled 입력 비활성화

 

  • type 기본 속성값
text 한 줄 짜리 텍스트 입력 창이 생김
password 비밀 번호 입력 창, 입력 시 ***로 표시
email 이메일 입력 창, 자동으로 @를 확인해줌
hidden 사용자에게 보이지는 않지만 값을 넣을 수 있는 창 / 관리자에게 필요한 값을 넣을 때 사용
file 파일 입력 양식 출력
button 버튼 생성, 자체 별도 기능은 없고 스크립트에서 함수 연결하여 활용
submit 입력한 데이터를 다른 페이지로 넘기는 기능
reset 입력한 내용을 지우는 기능

 

  • text
    • 속성
    • name : text type 구분자, 명칭
    • value : text에 들어갈 값 설정, 설정하지 않으면 빈 값
    • minlength : 사용자가 최소한 입력해야하는 글자 수
    • maxlength : 사용자가 입력할 수 있는 최대 글자 수
    • placeholder : 사용자가 입력하기 전 미리보기 문구 설정

 

  • <label></label>
    • <form>요소에 레이블(명칭)을 붙이기 위한 태그
    • 레이블 : 입력 창 옆에 붙여 놓는 문구(예 : 비밀번호, 아이디 등)
    • 속성
      • for : label로 묶을 id
1. <label>명칭 <input ...></label>
2. <label for="id이름"></label>
  • password
    • 속성
      • name : 데이터 명칭
      • minlength : password에 들어갈 최소 문자 수
      • maxlength: password에 들어갈 최대 문자 수
      • placeholder : 사용자가 입력하기 전 미리보기 문구 설정
  • email
    • 속성
      • name : 데이터 명칭
      • minlength : email에 들어갈 최소 문자 수
      • maxlength : email에 들어갈 최대 문자 수
      • placeholder : 사용자가 입력하기전 미리보기 문구 
  • hidden
    • 속성
      • name : hidden type 구분자, 명칭
      • value : hidden에 들어갈 값 설정
<input type="hidden" name="명칭" value=값">
  • file
    • 속성
      • multiple : 파일 다중 선택 가능
      • accept : 파일 타입에 대해 사용자에게 알려주는 기능
<input type=file name="명칭" [multiple][accept]>
  • button
    • 속성
      • id : id type구분자, name 은 중복 가능, id는 중복 불가
      • value : button에 표시될 값 설정
      • event : 자바스크립트 불러올 행동(ex. oncllick)
<input type="button" id="명칭" value="값" onclick="스크립트함수">
  • submit / reset
    • 속성
      • value : button에 표시될 값
<input type="submit/reset" id="명칭" value="입력/취소">

 

  • <fieldset>
    • <form> 요소 내 그룹을 만들 수 있는 태그
    • <legend> 요소로 그룹의 설명을 제공할 수 있음.
<form>
    <fieldset>
        <legend>그룹 명칭</legend>
        <label for="name">명칭</label>
        <input type="name" type="text">
    </fieldset>
</form>

form(2)

color

  • 속성
    • value : 초기 색상 지정
<input type="color" name="userColor">
  • 색상 표현
구분 내용 표현 방법
영문 색 이름 영문으로 색 이름 작성 red, black, blue 등
16진수 표현(hex) rgb값을 기준으로 16진수로 작성 #16진수 3자리
ex. #ff0000 (빨간색)
rgb / rgba rgb값을 0~255로 입력
rgba는 투명도 표현 가능		 rgb(0~255, 0~255, 0~255)
ex. rgb(255, 0, 0)

rgb(0~255, 0~255, 0~255, 0~1)
투명도 : 1 = 불투명 / 0 = 투명

 

number / range

<input type="number / range" id="명칭" min="숫자" max="숫자" step="숫자" value="숫자">
  • 속성
min 최소 표시 숫자 지정
max 최대 표시 숫자 지정
step 숫자 간격 지정
value  초기 표현 

 

date / datetime-local / month / week

<input type="date" value="2024-02-29">
<input type="datetime-local" value="2024-02-29T00:00">
<input type="month" value="2024-02">
<input type="week" value="2024-W25">
  • 속성
min 최소 표시 날짜 지정(ex. 1988-01-01)
max 최소 표시 날짜 지정(ex. 2020-12-31)
step 날짜 표현 간격, 달력에서 선택시 선택 안됨
value 초기 색상 지정

 

time

  • 속성
value 초기 시간 지정
   

 

checkbox / radio

<input type="checkbox" id="stock" name="invest" [checked]>
<input type="radio" name="addr" id="seoul" [checked]>

 

name  구분자, 명칭, 같은 그룹은 값이 같아야 함
value  전송 시 전달할 값
checked  처음에 선택될 값 지정(default : 지정 안됨)

 

여러 값 표현 태그

<select></select>와 <option></option>

  • select 속성
size  화면에 표시될 항목 개수 지정
multiple  여러 항목 선택 지정, ctrl 누른 상태에서 선택
  • option 속성
value  옵션 선택 시 넘겨질 값
selected  기본으로 선택된 값 
<select name="userSelect" id="userSelect">
    <option value="0">메뉴선택</option>
    <option value="1">짜장면</option>
    <option value="2">짬뽕</option>
    <option value="3">볶음밥</option>
</select>

 

textarea

<textarea cols="20" rows="5">안녕하세요</textarea>
  • 속성
cols 텍스트 입력 영역의 너비
rows 텍스트 입력 영역의 라인수

 

button

<button type="submit">표시될 값</button>
<button type="reset">표시될 값</button>
  • 표현법
    • input type button이 value 값으로 button에 표시될 값을 설정했다면, button은 시작태그와 종료태그 사이의 텍스트 속성으로 button에 표시될 값을 설정
  • type
    • button 요소는 type을 작성하지 않으면 기본값이 submit이므로, button을 단순 클릭용으로만 사용하기 위해서는type="button" 속성을 추가해야 함.
728x90

'STUDY > HTML,CSS,JS' 카테고리의 다른 글

css기초연습  (0) 2024.03.19
CSS  (0) 2024.02.29

'STUDY/HTML,CSS,JS' Related Articles

티스토리툴바