HTML 정리

<속성>

- class : 요소의 클래스 이름 

- id : 요소의 아이디

- style : 요소에 대한 인라인 CSS 스타일

- title : 요소에 대한 추가 정보 (툴팁으로 표시)

 

+ 공백요소 (종료태그가 없음) : <br>, <img>, <hr>, <>,/ <p>의 경우 종료태그는 선택사항으로 간주 

+ 특수문자

&nbsp; = 공백 문자 1개

&lt; = <

&gt; = >

&quot; = "

&amp; = &

<Tag 정리> - 대소문자 구별 X (BUT 소문자 사용 권고) / 속성 값에 큰 따옴표 포함할 경우 작은 따옴표를 사용해야함

텍스트 서식

<b> : 볼드체 - 볼드 텍스트 만을 의미

<strong> : 볼드체 - 단지 강하게 표시하라는 것

<i> : 이탤릭체

<em> : 이탤릭체 - 텍스트를 강조하라는 것

<code> : 텍스트가 코드임을 표시

<sup> : 위첨자

<sub> : 아래첨자

 

<pre> : 개발자가 입력한 그대로 화면에 나타날 수 있게 하는 태그

<hr /> : 수평선

<br /> : 줄바꿈

<base> : 모든 링크에 대한 기본 디렉토리 저장

 

리스트

<ul> : 번호 없는 리스트

<ol> : 번호 있는 리스트

          <li> : 리스트 항목 

<dl> : 정의 리스트 

          <dt> : 항목

          <dd> : 항목에 대한 설명

 

<img> : 이미지

             src 속성 : 이피미 파일 이름 지정

             alt 속성 : 이미지가 표시되지 못하는 경우 화면에 표시되는 텍스트

<a> : 링크

          href 속성 : 링크의 목적지

          target 속성 : 새로운 페이지가 어디에 열리는 지

                               _blank : 새로운 윈도우에서 새로운 페이지 열기

                               _self : 현재 윈도우에 새로운 페이지 적재

                               _parent : 부모 프레임에 새로운 페이지 적재

                               _top : 현재 윈도우에 새로운 페이지 적재하고 모든 프레임 취소

           id 속성 : 북마크 생성

           email 링크 : "mailto:_________"

           다운로드 링크 : "_______/data.zip"

<table> : 테이블

               <thead> : 테이블의 머릿글

               <tbody> : 테이블의 본문

               <tfoot> : 테이블의 바닥글

               <caption> : 테이블의 제목

               <tr> : 하나의 행

               <th> : 각 열의 제목 (볼드체, 중앙정렬)

               <td> : table data

               <rowspan> : 행병합 (상하 셀의 병합)

               <colspan> : 열병합 (좌우 셀의 병합)

<video> : 비디오 태그

                autoplay : 자동재생

                controls : 재생 제어 컨트롤들 표시

                loop : 반복 재생

                poster : 다운로드 중일 때 표시하는 이미지

                preload : 전체 오디오 다운

                muted : 비디오 오디오 출력 중지

                src : 재생할 오디오가 존재하는 URL 지정

                width, height : 비디오 재생기의 너비와 높이

<audio> : 오디오 태그

                autoplay : 자동재생

                controls : 오디오 재생 제어기

                loop : 반복 재생

                preload : 다운로드

                src : 재생할 오디오가 존재하는 URL 지정

                volume : 오디오의 재생볼륨 설정 (0.0 ~ 1.0)

<iframe> : iframe 태그 (링크의 타켓 프레임으로도 사용가능 - 링크의 타겟속성 = iframe name 참조)

<textarea> : HTML 소스 표시 (맨 앞으로 빼야함 - pre태그랑 비슷)

<div> : 페이지를 논리적인 구역으로 분리하는 데 사용하는 태그 - 블록요소

<span> : 텍스트를 위한 컨테이너 - 인라인 요소

 

시맨틱요소

<header> : 문서의 머리말

<hgroup> : <h1>에서 <h6>요소들의 그룹

<nav> : 내비게이션 링크

<article> : 문서의 내용이나 블로그의 포스트

<section> : 문서의 섹션

<aside> : 옆에 위치하는 내용

<footer> : 문서의 꼬리말

<figure> : 그림이나 도표

<time> : 날짜와 시간을 표시

 

입력양식

<form> : 입력 요소를 담는 컨테이너의 역할

               action : 입력을 처리하는 서버 스크립트의 주소

               method : 클라이언트 컴퓨터가 서버 컴퓨터로 데이터를 전달하는 방식

               - > get 방식 / post 방식

입력요소

1. <label> - 입력 요소에 대한 레이블 정의
2. <select> - 드롭다운 리스트 정의
3. <textarea> - 다중라인 입력필드
4. <fieldset> - 데이터 그룹핑 ('legend 속성' 사용 = 그룹에 제목을 붙일 수 있음)
5. <datalist> - 미리정의된 옵션 목록 (직접 입력도 가능)
6. <option> - 선택될 수 있는 항목 정의
7. <input> - type 속성에 따라 입력의 형태 dif (accept  속성 = 업로드시킬 파일의 MIME 타입 브라우저에 알려줌)
8. <button> - 버튼생성 (onclick 속성 : 실행되는 자바스크립트 지정가능 - '버튼이 클릭이 되면')

button은 button 태그로도 정의가능

+가급적 <form>태그 안에서는 <input>을 사용하여 버튼 생성 - 아니면 반드시type="button" 지정해서 사용 

<button type="button"><img src="     "></button>

<input type="image" src="       " alt="버튼">

 

type 속성값

text - 텍스트 입력 한줄짜리 필드 ('size 속성'으로 필드의 크기 변경 가능)

password - 비밀번호 입력가능 한줄짜리 필드

radio - 단일 선택 (checkbox와 마찬가지로 name 속성이 동일해야 동일그룹 취급)

checkbox - 다중선택 체크박스

file - 파일 업로드버튼 (method="post"일때 <form enctype="multi-part/form-data">추가가 좋음- 파일 올바르게 업로드)

reset - 초기화버튼

image - 이미지를 전송버튼으로 만듬

hidden - 사용자한테는 보이지 않지만 서버로 전송

submit - 제출버튼

date : ' ___-__-__ '형태

datetime : UTC 날짜/시간 형식을 이용한 날짜와 시간 표시 컨트롤 (ex - 2022/03/01)

datetime-local : '연도-월-일 -- -- : -- '형태

month

time

week

color

email (required 속성 설정하면 브라우저가 유효한 이메일 주소인지 검사가능)

tel (ex - ###-####-#### 패턴의 전화번호라면 : pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}" )

search

range (min, max, step 속성 지정 / 어떤 범위에 속하는 '정수')

number

url (multiple 속성 = 하나 이상의 url 입력가능 / 검증작업 = required 속성)

 

input 속성들

autocomplete : 자동완성

autofocus : 페이지로드되면서 자동으로 입력포커스 가짐

placeholder : 흐리게 힌트

readonly : 읽기 전용 필드

required : 입력양식 제출 전 반드시 채워져있어야함

pattern : 허용하는 입력의 형태 정규식으로 지정

 

정규식 : 특정한 규칙을 가지고 있는 문자열들을 표현한 수식 (/와 / 사이에 위치)

.         문자                            한개의 어떤 문자와도 일치

\d      숫자                             한개의 어떤 숫자와도 일치

\w     문자와 숫자                 한개의 문자나 숫자와 일치

\s     공백문자                      공백, 탭, 줄바꿈, 캐리지리턴 문자와 일치

^      시작                             패턴의 시작을 표시

$      끝                                패턴의 끝을 표시

[ ]     문자종류, 문자범위     [abc]는 a 또는 b 또는 c를 나타냄. [a-z]는 a부터 z까지 중의 하나, [1-9]는 1부터 9까지 중 하나

 

수량 한정자 : 문자가 몇번 반복되는가

( )    문자들을 그룹핑          "abc:abc"와 "a(b:d)c"는 같은 의미    

*      0회 이상 반복              "a*b"는 "b", "ab", "aab", "aaab"를 나타냄

+     1회 이상                       "a+b"는 "ab", "aab", "aaab"를 나타내지만, "b"는 포함하지 않음

?     0또는 1회                     "a?b"는 "b", "ab"를 나타냄 

{m}  m회                              "a{3}b"는 "aaab"와 매칭됨