HTML이란?
HyperText Markup Language의 약자이다
여기서 하이퍼텍스트는 단순 텍스트 이상,링크를 포함한 개념이고 마크업이란 태그를 사용하는 개념이다 두개의 개념을 합쳐서 태그들을 이용해서 텍스트 이상의 요소를 정의하는 언어이다.
웹 브라우징
- 사용자가 주소 입력
- 어떤 ip에 접속해야 하는지 알아내야한다 (DNS)
- 브라우저가 해당서버에 입력한 주소로 요청
- 서버에서 브라우저에 요청을 해석하고 실행하여 결과 데이터 전송(HTML,CSS,JS)
- 브라우저가 서버에서 받은 값을 해석하여 화면으로 출력
- 웹 브라우징
태그
태그는 태그 이름을 꺽쇠괄호로 감싸서 표현한다.
<태그이름> <!-- 시작 태그 -->
</태그이름> <!--종료 태그-->
태그는 값과 속성을 부여할 수 있다
HTML의 기본 구조
<!DOCTYPE html> <!--현재 문서가 html5 문서임을 선언한다 -->
<html> <!-- html 문서의 루트 요소를 정의합니다 -->
<head> <!-- html문서의 메타 데이터를 정의한다-->
<title></title> <!-- html문서의 제목을 정의한다 -->
</head>
<body> <!-- 웹브라우저를 통해 보이는 내용이다-->
</body>
</html>
메타 데이터란 html 문서에 대한 정보로 웹브라우저에는 직접적으로 표현되지 않는 정보를 의미한다
태그의 속성
태그의 속성은 <태그 속성="값">
<font color="yellow">Hello</font>
태그 종류
제목 태그
<h1>제목</h1>
<h2>제목</h2>
<h3>제목</h3>
<h4>제목</h4>
<h5>제목</h5>
<h6>제목</h6>
h의 숫자가 커질수록 제목의 크기는 작아진다
제목을 h태그로 작성해야만 검색엔진에 의해 제대로 된 검색 확률을 높일 수 있다.
단락 태그
<p>단락입니다</p>
<p>단락입니다</p>
두개의 문단으로 나누어진다
br태그
p태그를 사용하고 띄어쓰기나 줄바꿈을 해도 한번의 띄어쓰기만 적용되는 것을 알 수 있다.
그럴때 br태그를 사용하면 줄바꿈을 할 수 있다.
<p>
줄
바
꿈
</p>
<p>
줄<br>
바<br>
꿈
</p>
pre태그
pre태그는 자기가 작성한 글 그대로 띄어쓰기나 줄바꿈을 사용하고 싶을때 사용한다
<pre>
줄
바
꿈
</pre>
pre태그는 사용하면 글꼴이 고정폭 글꼴로 자동변환된다.
hr태그
hr태그는 단락을 좀 더 명확하게 나누기 위해서 hr태그를 사용한다
<p>
단락
</p>
<hr>
<p>단락
</p>
초보 개발자