HTML 기초

Joojoo·2023년 4월 13일

기초 공부

목록 보기

7/12

HTML

"웹브라우저를 통한 콘텐츠를 정의하기 위해 사용하는 언어이다."

HT(HyperText) 하이퍼링크를 통해 다른 문서로 접근할 수 있는 텍스트로
M(Markup) 표시하는
L(Language) 언어이다.

"하이퍼 텍스트와 콘텐츠를 표시해 주는 언어"

HTML 확장자

"html 또는 htm"

파일 수정 : 텍스트 편집기로 열기 (기본메모장, Brackets, VSCode등)
결과(웹페이지) 확인 : 웹브라우저로 열기 (크롬, 파이어폭스, 사파리 등)

개발자 도구

"홈페이지의 html코드를 확인할 수 있다."

개발자 도구 여는 방법

F12버튼
우측 상단 설정 -> 도구 더보기 -> 개발자 도구

코드 에디터

"프로그램 소스 코드를 편집하기 위해 사용하는 소프트웨어이다."

코드는 텍스트 이므로 더욱 빠르고 편하게 작성하기 위해서는
코드에디터를 사용하는 것이 좋다.

텍스트 자동 완성 + 하이라이팅 같은 기능

HTML은 언어이다.

html의 언어에 맞게 문법을 지키며 사용하여야 한다.
html의 문법은 태그(tag)이다.

태그란?

html코드에서 정보(콘텐츠)를 정의하는 형식

<>과 </>를 사용한다.

단일 태그란?

시작과 끝을 구분할 필요가 없는 태그
단일 태그는 콘텐츠를 감쌀 필요가 없으므로 시작과 끝을 구분하지 않는다.

예시)

<태그명/>

<태그명>

HTML의 속성

부가적인 기능을 정의하는 것으로 선택사항이다.
속성은 시작 태그의 내부에서 사용하며 개수에는 제한이 없다.

예시)

<태그명 속성명="속성값">내용<태그명/>

<태그명 속성명="속성값"/>
태그명과 속성정의는 공백(space)으로 구분하며, 큰따옴표(")를 사용한다.

HTML의 주석

주석은 사람에게는 보이지만, 컴퓨터(웹브라우저)에게는 보이지 않는 코드이다.
주로 메모 용으로 사용한다.

예시)

<!--이 사이에 작성한 내용은 주석으로 처리된다.-->

HTML문서 구조

기본 문서 구조

<!DOCTYPE html>

-> html의 최신표준 문법으로 작성된 문서이다.

<!DOCTYPE html> 
<html></html>

-> html문서의 시작과 끝이다.

<!DOCTYPE html> 
<html>
  <head></head>
  <body></body>
</html>

포함된 태그(태그사이에 있는 태그)는 보기 편리하도록 들여쓰기(띄어쓰기)를 하는 것이 좋다.
head태그 : 웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보들은 모두 이 태그에 들어간다.

<!DOCTYPE html> 
<html>
  <head>
    <meta charset="utf-8">
    <title>문서의 제목을 쓰는 곳</title>
  </head>
  <body>
  브라우저 화면에 표시할 내용을 작성하는 곳
  </body>
</html>

meta는 단일 태그이므로 닫는 태그가 없다.
meta charset은 meta의 charset속성으로 속성값은 "utf-8"이다.
"utf-8"은 영문과 한글을 모두 사용하기 위해 사용하는 방식이다.
title은 문서의 제목을 설정할 수 있으며 브라우저 탭에 표시된다.
body태그 : 실제 브라우저 화면에 표시될 내용을 입력하는 태그이다.
그 예시로는 텍스트, 이미지, 인터페이스(버튼, 입력란 등)를 나타내는 태그를 사용한다.

<p> : 문단
<h> : 제목
<hr> : 영역 구분 줄 / <hr>또는<hr/>로 사용된다.
<br> : 줄바꿈
&nbsp; : 공백
<strong> : 텍스트 굵게
<em> : 강조(기울임)
<mark> : 형광팬으로 칠한 글자
<img> : 이미지 / <img src="이미지 파일" alt="이미지 설명"/>
<div> : 
<span> :

<a> : 링크 연결
<a href="링크 연결" target="_self">현재탭에서 열기</a>
<a href="링크 연결" target="_blank">새 탭에서 열기</a>
<a href="tel:010-0000-0000">전화 연결</a>
<a href="mailto:메일주소">메일보내기</a>

<li> : 목록 (항목들을 나열)
<ul>
 <li>토끼</li>
 <li>호랑이</li>
 <li>강아지</li>
</ul>
ul은 순서가 없는 항목으로 나열된다.
<ol>
 <li>포메</li>
 <li>시츄</li>
 <li>말티즈</li>
</ol>
ol은 순서가 있는 항목으로 1,2,3등 숫자로 나열된다.

<input> : 입력창
<input type="text" /> : 텍스트, 문자입력
<input type="text" placeholder="메세지 입력"/> : 문자입력 창에 "메세지 입력"이 적혀 나온다.
<input type="text" maxlength="5"/> : 텍스트 입력 창에 최대 5글자까지 입력가능하다.
<input type="button" /> : 버튼
<input type="button" value="push"/> : 버튼에 push값이 입력된다.
<input type="color" /> : 컬러 선택
<input type="range" /> : 바를 움직여 선택
<input type="range" max="100" min="0" step="10"/> 
: 최저(min)는 0부터 시작하여 최대(max)는 100까지 선택가능하며 단위는(step) 10단위로만 선택가능하다.
<input type="date" /> :날짜 선택
-이때 각각의 input에다 name을 추가하여 각 항목의 식별자를 추가해 주어야 한다.
<input name="name" type="text" />
<input name="birthday" type="date" />

<select> : 옵션
<select name="pet" multiple> : multiple을 사용시 여러 선택지가 펼쳐진 상태로 선택 가능하다.
 <option value="dog" selected>강아지</option> : selected사용시 강아지가 선택된 상태로 나타난다.
 <option value="cat">고양이</option>
 <option value="hamster">햄스터</option>
 <option value="parrot">앵무새</option>
</select>

<textarea> : 여러줄 작성가능한 텍스트 창
<textarea>기본적으로 쓰여 있는 텍스트</textarea> : 가운데에 글씨를 적으면 글씨가 창에 표시되어 나온다.
<textarea name="contant" row="10" cols="10"></textarea> 
: row:밑으로10줄까지 작성가능 / cols:10글자정도 작성가능(글씨마다 크기가 다르기 때문에 정확하지 않음)

<form> :

p 태그

p는 블록요소이다.

h 태그

h는 제목으로 1~6까지 사용가능하다.
1에서 6으로 갈수록 점점 크기가 작아진다.

hr태그

단일 태그로 하나만 사용한다.

br태그

줄바꿈 태그로 띄어쓰기와는 다르다.
br을 앞에 사용한 후 뒤에 줄바꿈을 원하는 것을 입력해준다.

img

단일 태그
width, height로 이미지의 너비와 높이값을 설정가능하다.
src: 표시할 이미지 파일
alt: 이미지 설명

a

href속성을 통해 페이지, 번호(tel), 이메일(mailto), url등에 연결할 수 있는 링크 태그이다.
인라인 요소
target 속성을 통해서 새탭에서 열거나 현재 페이지에서 열지 결정할 수 있다.
이미지를 눌렀을 때에도 이동이 가능하다.

li

블록 요소
li은 순서가 없는 목록과 순거가 있는 목록으로 구분된다.
ul : Unordered List 순서 없는 목록 / ● 기호로 표시된다.
ol : Ordered List 순서 있는 목록 / 1.2.3.4.의 기호로 표시된다.

<ul>
 <li>토끼</li>
 <li>호랑이</li>
 <li>강아지</li>
</ul>

<ol>
 <li>포메</li>
 <li>시츄</li>
 <li>말티즈</li>
</ol>

예시대로 입력하면
ul 사용시

토끼
호랑이
강아지
식으로 표시가 된다.
ol 사용시

포메
시츄
말티즈
식으로 표시가 된다.

input

단일 태그
인라인 요소
사용자로 부터 값을 입력받을 수 있는 대화형 컨트롤(필드,입력창)을 나타낸다.
type에 따라 유형이 달라지는데 20여가지가 있다. 기본값은 text이다.
문자, 체크, 날자, 버튼, 색상, 숫자입력등이 있다.
name 식별자를 추가하여 각 항목에 대한 이름을 지정할 수 있다. (나중에 자바등을 사용할 때 유용)

select

다수의 옵션(선택지)를 포함할 수 있는 선택 메뉴
메뉴 안의 옵션은 option태그를 사용
name으로 식별자를 지정하고 value를 통해 실제 처리될 값을 나타낸다.

form

사용자가 입력한 데이터를 서버로 보내기 위해 사용하는 태그
입력요소(input, select, textarea등)들을 감싸고 데이터를 제출(submit)한다.
form의 action은 서버 측 주소를 지정하는 속성이다.
form의 method는 데이터 전송 방식을 지정하는 속성이다.

mata태그

mata태그는 검색최적화에 사용되어 검색 결과에도 반영된다.
charset : 문자세트
http-equiv : 콘텐츠 속성 정보에 대한 http 헤더
name : 문서정보
content : 메타데이터 내용

charset

문자 인코딩에 대한 요약 정보를 기입하는 속성
문자 인코딩이란 한글을 표시하기 위해 문자세트를 지정하는 작업
영문과 한글을 모두 사용하기 위해 utf-8 방식을 사용하는 것이 좋다.

<meta charset="utf-8">

인코딩을 명확하게 기입하지 않으면 문자가 깨질 상황이 생긴다.

http-equiv

콘텐츠 속성의 정보/값에 대한 http헤더를 제공한다.
http란 인터넷에서 데이터를 주고 받을 수 있는 프로토콜이다.

<meta htttp-equiv="x-ua-compatible" contant="IE=edge">
IE 브라우저의 최신 버전의 엔진을 사용하라는 뜻이다.
<meta http-equiv="refresh" content="10">
10초마다 페이지를 새로고침하라는 뜻이다.

name

name 속성을 이름으로, content속성을 값으로 하여 문서 정보를 이름+값 쌍의 형태로 제공할 때 사용된다.

<meta name="author" content="제작자 이름">
<meta name="description" content="페이지에 대한 짧고 명확한 요약">
<meta name="keyword" content="예를 들면, 강아지, 고양이, 정보, 등등">
<meta name="viewport" content="width=device-width, initial-scale=1.0 ">
name="viewport"는 뷰포트에 따른 스케일 조정

태그의 종류

블록 레벨 요소

자신이 속한 영역의 너비를 모두 차지

인라인 요소

자기에게 필요한 만큼의 공간만 차지

strong
em
mark
a

컨테이너 태그

콘텐츠나 레이아웃에 아무런 영향을 주지 않고, 단지 요소를 묶어 관리하기 편하게 하는 역할
콘텐츠 내용을 구분할 때, 공통적인 스타일을 적용시키고자 할 때 사용된다.
div : 블록요소
span : 인라인요소

전역속성

모든 html태그에서 사용가능하다.
태그의 부가적인 기능을 정의하는 것이다.
속성은 시작태그의 내부에 사용된다.
속성의 개수에는 제한이 없다.
<태그명 속성명="속성값' 속성명="속성값">콘텐츠</태그명>의 방식으로 사용된다.
id : 요소에 고유한 이름을 부여한다.
class : 요소를 그룹별로 묶는다.
style : 요소에 적용할 css스타일을 선언한다.
title : 요소의 추가 정보를 제공하여 사용자에게 툴팁을 제공한다.

Joojoo

이전 포스트

overwatch

다음 포스트