[HTML] HTML 기본과 특성

17989 단어 html웹프로그래밍html

- 간단한 HTML 문서

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
<!DOCTYPE html> : 문서형식 선언
<html> </html> : html 문서의 시작과 끝을 나타냄
<head> </html>: html 페이지가 어던 정보를 담고 있는지 알려줌
<title> </title>: html 페이지의 제목 지정(브라우저의 제목 표시줄 또는 페이지 탭에 표시됨)
<body> </body> : 문서의 본문 정의
<h1> </h1>: 큰 제목 정의
<p> </p>: 단락 정의

- HTML 요소란 무엇인가?

: html 문서를 이루는 모든 것!
<태그네임>콘텐츠 작성</태그네임>

- HTML 제목

  • <h1>~<h6> 태그로 정의
  • h 뒤의 숫자가 작아질수록 제목의 크기가 커진다
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

- HTML 단락

  • <p> 태그로 정의
  • <hr>로 콘텐츠 분리 가능
<p>This is a paragraph.</p>
<hr>
<p>This is another paragraph.</p>
  • <br> 태그를 이용해 줄나누기 가능
<p>This is<br>a paragraph<br>with line breaks.</p>
  • pre 태그를 이용해 입력된 내용 그대로 정의
<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>

- HTML 링크

  • a 태그로 정의
  • href특성으로 하이퍼링크 정의
<a href="https://www.w3schools.com">This is a link</a>

- HTML 이미지

  • <img> 태그로 정의
  • src 특성으로 이미지 입력 가능
  • alt특성으로 대체 텍스트 입력 가능
  • width height특성으로 너비, 높이 설정 가능
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

- HTML 스타일

  • style 특성을 이용해 색상, 글꼴, 크기 등 요소에 스타일 추가 가능
  • background-color : 요소의 배경색 정의
<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
  • color : 텍스트 색상 정의
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
  • font-family : 글꼴 정의
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
  • font-size : 글꼴 크기 정의
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
  • text-align : 가로 텍스트 정렬 정의
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
전시 통신 플랫폼 uboot 시작 프로세스
브라우저의 HARQ를 통해 암호화된 HLS 스트림 저장

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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