FrontEnd - HTML(1)

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>

Author And Source

이 문제에 관하여(FrontEnd - HTML(1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jinwoo2025/FrontEnd-HTML1

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다