HTML

HTML 기본 요소, 기본 태그

zzheng 2024. 5. 28. 21:05

클라이언트와 서버

  • 2가지의 기본 프로토콜
    • 특정한 파일을 요청하는 HTTP Request
    • 찾은 파일을 돌려주는 HTTP Response

 

HTML이란

  • HTML(Hyper Text Markup Language) 은 웹 페이지를 기술하기 위한 마크업 언어
  • 마크업 언어는 텍스트에 태그를 붙여서 텍스트가 문서의 어디에 해당하는지를 기술한것

HTML5 + CSS3+Javascript

  • 웹 페이지의 내용은 HTML5로 작성
  • 웹 페이지의 스타일은 CSS3로 지정
  • 웹 페이지의 상호작용은 Javascript로 작성

 

HTML 기본구조

<!DOCTYPE html>
<html>
<head>
  <title>제목</title>
  <meta charset="utf-8" />
</head>
<body>
  <h1>Hello</h1>
  <div>
    <p>Hello world!</p>
  </div>
</body>
</html>

body태그

  • 웹 문서의 본문 내용을 보여주는 태그로 웹 문서의 배경색상 또는 배경 이미지를 지정할 수 있으며 웹 브라우저와 웹 문서 사이의 여백을 설정할 수 있음. 

헤딩(Heading)

  • 웹 페이지의 머리기사(headline)
  • 숫자가 낮을수록 높은 단계(중요한)의 제목.
h1, h2, h3, h4, h5, h6 { display: block; }

<!DOCTYPE html>
<html>
<head>
  <title>제목</title>
  <meta charset="utf-8" />
</head>
<body>
  <h1>Hello</h1>
  <h2>Hello</h2>
  <h3>Hello</h3>
  <div>
    <p>Hello world!</p>
  </div>
</body>
</html>

 

<p>태그

  • 단락(Paragraphs):하나하나의 짧은 이야기 토막
  • 단락의 전후에 빈 줄이 추가됨

<br>태그

  • 강제로 줄바꿈 태그

<pre>태그

  • 프로그래머가 입력한 그대로 화면에 표시되는 태그

텍스트 서식

<hr>태그

  • 수평선을 그릴 수 있음.

특수문자

&npsp; non-breaking space의 약자로 공백 문자 한개
&lt; <
&gt; >
&quot; "
&amp; &

리스트

항목들을 나열하는데 사용

  • 번호있는 리스트:<ol>
  • 번호없는 리스트:<ul>

 

 

연습할 수 있는곳 : https://www.w3schools.com/html/html_examples.asp

 

HTML Examples

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com