코딩이란 무엇일까

[38일차]프론트엔드(2)-HTML태그(<h1>,<p>,<br>,<hr>,<ul>,<ol>,<li>,<a>) 본문

국비지원수업

[38일차]프론트엔드(2)-HTML태그(<h1>,<p>,<br>,<hr>,<ul>,<ol>,<li>,<a>)

둥구는 지굴다 2022. 12. 15. 18:33

<H1>

<h1>안녕</h1>
<h2>안녕</h2>
<h3>안녕</h3>
<h4>안녕</h4>
<h5>안녕</h5>

<H1> 태그는 제목을 나타내는 태그이다.

숫자가 작아질수록 글자의 크기가 줄어든다.

실행 결과



<p>

<p>안녕</p>

<p>태그는 단락 태그이다.


<br>

<p>html, head, body  태그로 구성되며 head 태그는 문서의 설정 정보,<br> body 태그는 문서의 컨텐츠(내용)을 포함하는 요소들로 구성됨.
    html은 HyperText<br> Markup Language 의 약자.프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 
    하는 마크업 언어입니다.<br> 이는 개발자로 하여금 복잡하게도<br> 간단하게도 프로그래밍 할 수 있습니다.
     HTML은 elements(요소)로 구성되어 있으며,<br> 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 합니다.
     tags(태그)<br> 는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 합니다. </p>

<br> 은 줄 바꿈 태그입니다.

닫는 태그는 없어도 됩니다.

실행 결과


<ul>

<ul>은 순서가 없는 리스트 태그입니다.

<ul> 태그 안에 내용은 <li> 태그를 사용해서 작성합니다.

<ul> 태그는 ●불릿으로 표기됩니다

<ul> 태그의 type값의 종류

  • circle 
  • square
  • disc
<ul>
	<li>HTTP 프로토콜</li><!--  -->
	<li>HTML</li>
	<li>웹 서버</li>
</ul>

실행 결과


<ol>

<ol>은 순서가 있는 리스트 태그입니다.

<ol> 태그 안에 내용은 <ol>과 마찬가지로 <li> 태그를 사용해주어야 합니다.

<ol>의 속성 중 type속성은 기호를 설정합니다.

<ol> 태그 type값의 종류

  • 1
  • a
  • A
  • i
  • ii

총 5가지 중 선택할 수 있습니다.

<ol>
	<li>HTTP 프로토콜</li><!--  -->
	<li>HTML</li>
	<li>웹 서버</li>
</ol>

<hr>

<hr> 태그는 라인을 생성합니다.

<hr>태그는 닫는 태그가 없어도 됩니다.

실행 결과

<a>

<a> 태그는 링크를 해당 태그에 링크를 걸 수 있습니다. 클릭을 할 시 해당 링크로 이동합니다.

<a> 속성

  • href =”링크”
    • 해당 태그에 링크를 걸 수 있습니다.
  • target=”_blank”
    • 해당 링크를 새 창에서 띄울 수 있습니다.
<a href="https://www.naver.com/">네이버</a>
<a href="https://www.youtube.com/premium">유튜브</a>
<a href="https://nangnyamnyomnyomnyom.tistory.com/">내 블로그</a>

Comments