Html의 기본 구성 요소
태그, 속성, 문법, 주석
Html의 기본 구조 📖
DTD - HTML5 문서 형식으로 해석한다.
<!DOCTYPE html>
head 태그
head 태그 - 메타데이터를 정의하는 영역입니다. HTML 문서에 대한 정보로 , 웹 브라우저에는 직접 노출되지 않습니다.
meta 태그- 다음은 HTML 문서에 허용하는 문서 집합을 정의하는 메타데이터 태그힙니다.
<meta charset="UTF-8">
다음 태그는 인터넷 익스플로러의 렌더링 엔진을 강제로 최신 렌더링 엔진으로 지정하는 메타데이터를 나타냅니다.
구 버전의 렌더링 엔진을 사용하는 실험적 프로젝트가 아니라면 해당 태그를 정의하는 편이 좋습니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
마지막으로 기기의 화면 너비에 맞추기 위해 사용하는 메타데이터 태그입니다. 뷰포트는 웹 페이지에 접속했을 떄 사용자에게 접속했을 때 사용자에게 보이는 화면 영역을 의미하는데, 이에 관한 내용은 7.3.2 뷰포트 자세히 설명합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
title 태그
title 태그는 HTML 문서의 제목을 지정하는 데 사용합니다.
모든 HTML 문서는 반드시 1개의 title 태그를 사용해 HTML 문서의 제목을 지정해야 합니다.
이때 제목은 HTML 문서마다 중복되지 않도록 주의합니다.
구글이나 네이버 같은 검색 엔진 사이트에서 HTML 문서를 찾을 때는 title 태그에 작성된 제목으로 찾습니다.
만약 한 웹 사이트에서 제목이 중복된 문서가 여러 개 발견되다면 검색 엔진은 해당 웹 사이트가 신뢰성이 떨어진다고 판단해서 검색 엔진 노출 시에 불이익을 줍니다.
body 태그
바디 태그는 웹 브라우저에 노출되는 내용을 작성하는 영역입니다. 따라서 웹 브라우저에서 표시되는 모든 내용은 body 태그 영역 안에 작성합니다.
HTML의 특징 파악하기
블록 요소 - 웹 브라우저의 공간 유무와 상관없이 hn태그나 p태그처럼 사용할 떄마다 줄 바꿈되는 태그가 있습니다.
인라인 요소 - a태그나 span태그처럼 공간이 부족할 때만 줄 바꿈이 시작되는 태그가 있는데
이런 태그로 작성한 코드를 인라인 요소라고 합니다.
실무에서 자주 사용하는 HTML필수 태그 다루기 🙆🏼♂️
hn 태그
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
검색엔진은 hn태그를 검색할 때 h1태그부터 단계적으로 검색합니다. 만약 h4태그를 사용하지 않고 h1, h2, h3, h5, h6 태그를 사용한다면 검색 엔진은 h1 태그부터 단계적으로 태그를 검색하다가 h4 태그가 없으면 h5, h6 태그를 검색하지 않습니다.
그래서 hn 태그는 중간에 숫자를 건너뛰지 말고 h1 태그부터 단계적으로 사용해야 합니다.
p 태그
<p>내용</p>
br 태그
줄바꿈 태그
blockquote 태그
<blockquote cite="출처 URL">문단 단위 인용문</blockquote>
q 태그
q 태그는 문단 안에 테스트 단위의 짧은 인용문을 작성할 때 사용할 수 있는 태그입니다. q태그를 사용한 콘텐츠는 큰따옴표로 묶입니다.
ins와 del 태그
ins 태그는 새로 추가된 텍스트임을 나태낼 때 사용하고, del 태그는 기존에 있떤 텍스트가 삭제된 텍스트임을 나타낼 때 사용합니다.
ins 태그를 사용한 콘텐츠에는 밑줄이, del 태그를 사용한 콘텐츠에는 취소선이 됩니다.
sub와 sup 태그
<sub>아래 첨자</sub>
<sup></sup>
그룹짓기 🏙️
div 태그
body태그 안에 영역 구분 없이 표시하려는 텍스트만 작성하면 코드가 복잡해질수록 텍스트를 구분하기 어려워집니다.
이 코드를 div 태그를 사용해 영역별로 구분을 짓습니다.
span 태그
span태그는 인라인 요소를 그룹으로 묶을 때 사용합니다.
span태그를 사용하면 그 부분을 분할하여 분할된 요소에 CSS로 스타일을 적용할 수 있습니다.
목록 만들기👨👩👧👦
ul 태그
ul태그는 순서가 없는 비순서형 목록을 생성할 때 사용합니다. 이 때 목록 내용은 li태그로 구성합니다.
ol 태그
ol태그는 순서형 목록을 생성할 때 사용ㅎ바니다. ul태그와 마찬가지로 li태그로 목록 내용을 구성합니다.
dl 태그
dl태그는 정의형 목록을 만들 때 사용합니다. 정의형 목록은 용어와 용어 설명을 나열한 형태의 목록이라고 보면 됩니다. dl태그로 목록을 생성할 때는 li태그 대신에 dt태그로 용어를, dd태그로 용어 설명을 작성합니다.
링크와 이미지 넣기🏞️
a 태그
<a href = "대상 경로" target = "링크 연결 방식" title = "링크 설명"></a>
href 속성은 a태그로 생성하는 링크의 경로를 입력할 때 사용합니다.
target 속성은 a 태그로 링크를 생성할 떄 대상이 연결되는 방식을 지정합니다.
여러 속성이 있지만 새 창으로 열리는 방식인 _blank를 제외하고 거의 사용하지 않습니다.
title 속성
title 속성에는 링크를 설명할 수 있는 텍스트를 작성합니다. a태그의 콘텐츠만으로 표현하지 못한 설명을 적으면 됩니다.
img 태그
src속성 : 파일 경로
alt 속성에는 삽입한 이미지 객체를 설명할 수 있는 텍스트를 넣습니다.
이미지링크
a태그 안에는 텍스트뿐만 아니라 여러 요소가 올 수 있습니다. 그중 img 태그를 a 태그 안에 사용하면 이미지를 클릭했을 떄
특정 링크로 이동하게 할 수 있습니다. 이를 HTML에서는 이미지 링크라고 합니다.
텍스트 강조하기🔥
strong 태그
스트롱 태그는 텍스트의 의미를 강조하고 싶을 때 사용합니다. 스트롱 태그는 스타일에서 차이를 두기 위해 시각적으로 텍스트를 굵게 표시하는 것뿐 아니라 웹 브라우저에 중요한 부분임을 알려 주는 역활을 합니다. (중첩가능!)
em 태그
em태그 역시 텍스트의 의미를 강조하고 싶을 때 사용합니다. em태그를 사용하면 텍스트가 기울어져 보이면서 강조 효과를 낼 수 있습니다.
폼 구성하기📝
form 태그
action 속성 : action 속성에는 폼 요소에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 URL주소를 적습니다.
method 속성: method 속성에는 입력받은 값을 서버에 전송할 떄 송신 방식을 적습니다. 속성값으로 get 또는 post를 사용할 수 있습니다.
input 태그
로그인 페이지의 아이디와 비밀번호처럼 입력받은 요소를 생성할 떄는 input태그를 사용합니다.
type속성은 필수로 사용해야 하고, name과 value 속성은 선택해서 사용할 수 있습니다.
type 속성
text : 한 줄 텍스트를 입력할 수 있는 요소를 생성합니다.
password : 비밀번호를 입력할 수 있는 요소를 생성합니다.
tel : 전화번호 형식을 입력할 수 있는 요소를 생성합니다.
number : 숫자만 입력할 수 있는 요소를 생성합니다.
url : URL 주소 형식을 입력할 수 있는 요소를 생성합니다.
search : 검색용 텍스트를 입력할 수 있는 요소를 생성합니다.
email : 이메일 형식을 입력할 수 있는 요소를 생성합니다.
checkbox : 체크박스 요소를 생성합니다.
radio : 라디오버튼 요소를 생성합니다.
file 파일 업로드 요소를 생성합니다.
button : 버튼 요소를 생성합니다.
image : 이미지로 버튼 요소를 생성합니다. 따라서 img 태그처럼 src 속성을 사용해야 합니다. 단 alt 속성은 사용하지 않습니다.
hidden : 사용자 눈에 보이지 않는 입력 요소를 생성합니다.
date : 날짜(연, 월, 일)를 선택할 수 있는 입력 요소를 생성합니다.
datetime-local : 사용자 시간대에 맞는 날짜(연, 월, 일, 시, 분)를 선택할 수 있는 입력 요소를 생성합니다.
month : 날짜(연, 월)을 선택할 수 있는 입력 요소를 생성합니다.
time : 시간을 선택할 수 있는 입력 요소를 생성합니다.
range 숫자 범위를 선택할 수 있는 슬라이드 요소를 생성합니다.
color : 색상을 선택할 수 있는 요소를 생성합니다.
submit : 폼ㅅ전송 역활을 하는 버튼 요소를 생성합니다.
reset: 폼 요소에 사용자가 입력한 값을 초기화하는 버튼 요소를 생성합니다.
name 속성
입력 요소의 이름을 작성합니다. 입력 요소가 form 태그에 의해 서버로 전송될 때, name 속성에 적힌 값이 이름으로 지정
value 속성
value 속성에는 입력 요소의 초깃값을 작성합니다. 입력 요소는 보통 사용자에게서 수동으로 값을 입력받지만 상황에 따라 초깃값을 설정해야 하는 경우가 있습니다.
label태그 클릭하면 상호작용 요소를 선택할 수 있다.
fieldset와 legend 태그
form 태그 안에 사용된 다양한 상호작용 요소도 filedset 태그를 사용해 그룹 지을 수 있습니다.
fieldset 태그로 그룹을 지으면 그룹별로 박스 모양 테두리가 생깁니다. 이렇게 그룹 지은 요소들은 legend태그로 이름을 붙일 수 있습니다.
<form action="#">
<fieldset>
<legend>그룹이름</legend>
</fieldset>
</form>
textarea 태그
여러 중의 입력 요소를 생성할 떄는 input 태그가 아닌 textarea 태그를 사용합니다.
웹 사이트에서 글을 작성할 떄 사용하는 입력 요소는 대부분 textarea 태그로 생성합니다.
select, option, optgroup 태그
<select name="city" id="city" size="3"> //사이즈를 3개를 지정하면 화면에 항목 3개가 표시된다.
<optgroup label="그룹 이름">. //태그로 관련 있는 항목으 그룹 지으면 된다.
<option value="서버에 전송할 값">웹 브라우저에 표시할 값</option>
</optgroup>
</select>
multiple 속성
select 태그로 생성하는 콤보박스는 기본 1개만 선택이 가능하다.
그러나 multiple 속성을 사용하면 여러 항목을 동시에 선택할 수 있습니다.
selected 속성
콤보박스는 첫 번째 option 태그의 값이 기본 선택된 상태로 표시되는데, selected 속성을 사용하면 기본 선택 항목을 변경할 수 있습니다. 다음 예제 코드에서는 서초구의 option 태그에 selected 속성을 사용해서 콤보박스의 기본값을 서초구가 표시됩니다.
button 태그
버튼 요소는 앞에서 살펴봤듯이 input 태그에서 type속성값을 submit, reset, button으로 지정해 생성할 수 있습니다.
또한, 별도의 button 탸구로 생성할 수도 있습니다. button 태그도 마찬가지로 type 속성을 가집니다.
<button type="submit">
<img src="facebookt.png" alt="페이스북 버튼> 페이스북에 등록하기 </button>
폼 관련 태그에서 사용할 수 있는 속성
readonly, disabled, maxlength, checked, placeholder
표 만들기 🗓️🗓️🗓️
table 태그 : 표 만드는 태그
caption 태그 : 표를 생성할때 웹 접근성을 향상하는 방법의 하나로 표 제목을 지정.
tr 태그 : tr태그는 표에서 행을 생성
th, td 태그 : th, td태그는 표에서 열을 생성할 때 사용합니다.
th태그는 표에서 제목을 나타내는 열을 생성할 때
td태그는 표에서 일반적인 데이터를 나타내는 열을 생성할 때 사용합니다.
rowspan과 colspan태그 : 행과 행을 병합할 때 rowspan 열과 열을 병합할 때 colspan
thead, tfoot, tbody태그
col과 colgroup태그
scope 속성 : 표를 생성할 떄 사용할 수 있는 속성 중에서 순전히 웹 접근성 향상을 목적으로 사용하는 scope 속성이 있습니다.
scope 속성은 제목을 나타내는 셀의 범위를 지정합니다. 그래서 표에서 제목을 나타내는 th태그에서만 사용할 수 있습니다.
멀티미디어 태그 🎥 🎥 🎥
audio, video태그
태그의 종류에 상관없이 사용하는 글로벌 속성 🌎🌎🌎
class : class속성은 요소에 클래스명을 지정할 때 사용합니다. 클래스명은 CSS에서 클래스 선택자로 활용하고, 같은 클래스명은 여러 요소가 중복해서 가질 수 있습니다.
id: id 속성은 요소에 아이디를 지정할 때 사용합니다. 아이디는 CSS에서 아이디 선택자로 활용하며, 중복될 수 없습니다.
style : style 속성은 CSS코드를 인라인으로 작성할 때 사용합니다. 4.2.3 인라인 스타일 사용하기에서 자세히 다룹니다.
title: title 속성은 요소에 추가 정보를 넣을 때 사용하는데, a 태그를 설명할 때도 언급했습니다.
title 속성에 넣은 값은 요소에 마우스를 올리면 툴팁으로 표시됩니다.
lang : lang 속성은 요소에 사용한 텍스트의 언어 코드를 지정할 때 사용합니다.
일반적으로 HTML문서의 언어 코드는 html 태그의 lang 속성에 작성합니다.
data-* 속성: data-* 속성은 사용자 커스텀 속성을 만듭니다.
태그에서 사용할 수 있는 속성은 HTML 문법에 정해져 있어서 정해진 속성이 아니면 사용할 수 없었습니다.
그러나 HTML5에서는 이러한 점이 개선되어 data-* 속성으로 사용자가 원하는 속성을 만들 수 있습니다.
'코딩 > 코딩 기초' 카테고리의 다른 글
| 자바스크립트 끝말잇기 예제 (0) | 2023.12.12 |
|---|---|
| CSS정리 (2) | 2023.12.08 |
| cs50 강의 본문 1 (2) | 2023.06.17 |
| 생활코딩 CSS (0) | 2023.06.12 |
| 생활코딩 HTML (0) | 2023.06.12 |