HTML은 태그와 속성으로 문법을 구성 / 문법은 크게 콘텐츠가 있는 문법 or 콘텐츠가 없는 문법으로 구성되어져 있음
콘텐츠가 있는 문법
<태그>내용</태그> <= {태그 + 내용} 이 하나의 요소
- <태그> : 시작(열린) 태그
- </태그> : 종료(닫힌) 태그
- 내용 : 요소의 내용(Contents)
<태그명 속성명="속성값">
이때, 속성값이 여러 개인 경우에 하나의 큰 타옴표 안에 ,(쉼표)로 구분하여 값을 나열하면 됩니다.
HTML 기본 구조
1. DTD (Document Type Definition) - 문서형 정의 : 웹 브라우저가 처리할 HTML 문서가 어떤 문서 형식을 따라야 하는지 알려주는 것, HTML 문서를 작성할 때 항상 처음에 넣어야 됩니다.
<!DOCTYPE html>
-> HTML문서를 최신 형식인 HTML5 문서 형식으로 해석한다는 의미
2. <html> 태그 : html 태그는 HTML 문서의 시작과 끝을 의미 / 모든 태그는 html 태그 내부에 작성되어야 합니다.
3. <head> 태그 : HTML 문서의 메타데이터를 정의하는 영역, 메타데이터는 문서에 대한 정보로 웹 브라우저에 직접 노출되지 않습니다. meta, title, link, style, script 등의 태그를 사용하여 HTML 문서의 여러 정보를 정의합니다.
-- meta 태그 -- 최신의 업데이트 형식만 반영
<meta charset="UTF-8" /> : 더 많은 언어를 사용하기 위해 UTF-8을 사용합니다.
<meta http-euiv="X-UA-Compatible" content="IE-edge"> : 인터넷 익스플로러의 렌더링 엔진을 강제로 최신 렌더링 엔진으로 지정하는 메타데이터 / 구 버전 렌더링 엔진을 사용하는 것이 아니면 해당 태그를 정의하는 편이 좋습니다.
뷰포트 : 웹 페이지에 접속하였을 때, 사용자에게 보이는 화면 영역
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
4. <title> 태그 : HTML 문서의 제목을 지정하는 데 사용합니다.
※ 모든 HTML 문서는 반드시 1개의 title 태그를 사용하여 문서의 제목을 지정해야 하고 이때, 제목은 HTML 문서마다 중복이 되면 안됩니다.
5. <body> 태그 : 웹 브라우저에 출력되는 내용을 작성하는 영역 / 웹 브라우저에서 표시되는 모든 내용은 body 태그 영역 안에 작성합니다.
부모와 자식, 형제 관계
<태그><태그>내용</태그></태그> : 전체 블록을 부모 요소 / 2번째 태그(가운데) 부분을 자식 요소
<태그> -> 부모 요소
<태그>내용</태그> -> 자식 요소
<태그>
형제 관계 : 같은 부모를 두는 부모 요소 내부의 자식 요소들 간의 관계
조상 관계 : 부모의 부모 태그
자손(후손) 관계 : 자식의 자식 태그
Tab : 들여쓰기 => 부모 요소에 포함된 자식 요소를 들여쓰기로 시각적으로 표현하는 것(가독성 측면)
Shift + Tab : 내어쓰기
<태그>
<태그>
<태그>내용</태그>
</태그>
</태그>
빨간색 <태그> 입장 : 검은색 <태그>는 부모 요소
파란색 <태그> 입장 : 검은색 <태그> & 빨간색 <태그>는 상위(조상) 요소{부모 요소 포함, 자신을 감싸고 있는 위 태그 모두}
검은색 <태그> 입장 : 빨간색 <태그> & 파란색 <태그> 모두 하위(후손)요소 / 바로 아래 단계인빨간색 <태그> 전체는 자식 요소
콘텐츠가 없는 문법
빈 태그 - </태그> (x) / <태그/> (o) / 빈 태그 자체가 하나의 요소
<태그> , 종료(닫힌) 태그가 존재 x
<태그> - HTML 1/2/3/4/5 버전에서 사용 가능
<태그/> - XHTML/ HTML5 버전에서 사용 가능
=> 결론, <태그> or <태그/> : 둘 다 가능함!
<태그 속성="값">내용</태그>
- 열린(앞쪽) 태그에 속성과 값을 부여할 수 있음
예시, <img/>
<img src="이미지의 경로" alt="대체 텍스트(이미지의 이름)"/>
<br/> : 줄바꿈 하는 태그
<input/> : 사용자가 데이터를 입력하는 요소(태그)
<input type="text"/> 이처럼 input 요소를 빈 태그로 작성할 시에는 type을 지정하여 종류별 입력 가능 창을 생성합니다.
<input type(데이터의 타입) =”text(입력한 데이터 값)” value="HEROPY!"/>
<input> 태그의 type 속성
text : 한 줄 짜리 텍스트를 입력할 수 있는 텍스트 박스
password : 비밀번호를 입력할 수 있는 필드
search : 검색할 때 입력하는 필드
url : url 주소를 입력하는 필드
email : 이메일 주소를 입력하는 필드
tel : 전화번호를 입력하는 필드
checkbox : 주어진 여러 항목에서 2개 이상 선택가능한 체크 박스
radio : 주어진 여러 항목에서 1개만 선택가능한 라디오 버튼
number : 숫자 조절가능한 스핀 박스
range : 숫자 조절가능한 슬라이드 막
date : 사용자 지역 기준 날짜(연,월,일)
month : 사용자 지역 기준 날짜(연,월)
week : 사용자 지역 기준 날짜(연,주)
time : 사용자 지역 기준 시간(시,분,초,분할 초)
datetime : 국제표준시(UTC)로 설정된 날짜와 시간(연,월,일,시,분,초,분할 초)
submit : 전송 버튼
reset : 리셋 버튼
image : submit 버튼 대신 사용할 이미지
button : 일반 버튼
file : 파일을 첨부할 수 있는 버튼
hidden : 사용자에게 보이지 않지만 서버로 넘겨주는 값이 있는 필<input type =”checkbox” placeholder ="이름을 입력하세요!"/> : 사용자에게 체크 여부를 입력 받음
블록 요소와 인라인 요소
body 태그 내부에서 사용되는 2가지 특징
블록 요소 - 줄 바꿈 태그 추가 없이 태그를 사용하면 자동으로 줄 바꿈 처리가 됨
인라인 요소 - 공간이 부족할 때만 줄 바꿈 처리가 됨
- 인라인 요소 : 글자를 만들기 위한 요소들 (왼쪽 -> 오른쪽) [수평]
인라인 요소를 붙여쓰면 띄어쓰기가 없지만 줄바꿈처리를 하여 작성하면 띄어쓰기가 들어갑니다. [인라인 요소 특징]
<span>Hello</span>
<span>World</span>-> Hello World (가운데 띄어쓰기가 들어감)
<span>Hello</span><span>World</span>-> HelloWorld ( 가운데 띄어쓰기가 들어가지 않음)
{인라인 요소(글자 요소) 의 대표적인 특징}
1. 콘텐츠의 크기가 글자의 크기만큼 자동으로 줄어듦
2. 콘텐츠의 가로 및 세로 너비를 지정할 수 없음 / 지정하여도 반응이 없음
또한 요소의 외부 및 내부 여백을 지정할 수 없음 / 지정하여도 반응이 없음
<span style="width: 100px;">Hello</span> : 요소의 가로 너비를 지정하는 css 속성
<span style="height: 100px;">World<?span> : 요소의 세로 너비를 지정하는 css 속성
<span style="margin: 20px 20px;">Hello</span> : 요소의 외부 여백을 지정하는 css 속성
<span style="padding: 20px 20px;">World</span> : 요소의 내부 여백을 지정하는 css 속성
3. 인라인 요소 내부에 자식 요소로 블록 요소를 삽입할 수 없음
<span></span> : 대표적인 인라인 요소 / 아무것도 나타내지 않고 오로지 콘텐츠 영역을 설정하는 용도
- 블록 요소 : 상자(레이아웃)를 만들기 위한 요소들 (위쪽 -> 아래쪽) [수직]
<div></div> : 대표적인 블록 요소 / 아무것도 나타내지 않고 오로지 콘텐츠 영역을 설정하는 용도
{블록 요소(상자 요소)의 대표적인 특징}
1. 포함한 콘텐츠의 크기만큼 자동으로 가로는 늘어나고 세로는 줄어듦
2. 요소의 가로 및 세로 너비를 지정할 수 있음 / 요소의 외부 및 내부 여백을 지정할 수 있음
<div style="width: 100px;">Hello</div> : 요소의 가로 너비를 지정하는 css 속성
<div style="height: 40px;">World</div> : 요소의 세로 너비를 지정하는 css 속성
<div style="margin: 10px;">Hello</div> : 요소의 외부 여백을 지정하는 css 속성
<div style="padding: 10px;">World</div> : 요소의 내부 여백을 지정하는 css 속성
3. 블록 요소는 내부 요소로 인라인 요소 및 블록 요소 모두 포함이 가능함
'프론트엔드(Web) > HTML' 카테고리의 다른 글
| HTML 필수 태그 (0) | 2024.07.09 |
|---|---|
| HTML 핵심 요소 정리, 주석, 전역 속성 (0) | 2024.07.07 |