티스토리 뷰

Web/HTML & CSS

2강 : HTML 기본1

개발을해보자 2020. 2. 27. 02:38

2-1. 태그란?

태그는 HTML문서를 구성하고 있는 요소이다. 

태그에는 이름과 속성이 있다.

 

다음은 다양한 태그의 예시이다.

<div id="content">
      <div id="html">
        <h1>1. HTML</h1>
        <p>1주차에는 HTML을 배웁니다.</p>
        <img class="img1" src="html.jpg">
      </div>
      <div id="css">
        <h1>2. CSS</h1>
        <p>HTML과 더불어 CSS도 1주차에 배웁니다.</p>
        <img class="img2" src="css.jpg">
      </div>
      <div id="python">
        <h1>3. PYTHON</h1>
        <p>2주차에는 PYTHON을 배웁니다.</p>
        <img class="img3" src="python.jpg">
      </div>
      <div id="django">
        <h1>4. DJANGO</h1>
        <p>3주차에는 DJANGO을 배웁니다.</p>
        <img class="img4" src="django.jpg">
      </div>
      <div id="team">
        <h1>5. TEAM PROJECT</h1>
        <p>4주차부터는 TEAM PROJECT를 합니다.</p>
        <img class="img5" src="team.jpg">
      </div>
    </div>

 

 

2-2. HTML 태그

HTML 태그는 크게 head 태그와 body태그로 나누어져 있다.

head 태그에는 설정값들이 들어가고, body 태그에는 정보전달이 들어간다.

다음은 1강 게시물에 예시로 올렸던 코드이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  안녕하세요. 처음 입니다.<br />
  Hello World!
</body>
</html>

 

 

2-3. 기본적인 태그들

예외가 있지만 기본적으로 태그는

<태그></태그>

위와 같이 사용한다.

 

  •  h 태그 

h태그에는 h1, h2, h3, h4, h5, h6 태그가 있고 제목처럼 굵게 표시하고 싶을 때 사용한다.

<br />와 같은 별다른 개행을 필요로 하지 않는다.

 

<h1>가장 큰 제목</h1>

<h2>다음으로 큰 제목</h2>

.

.

<h6>가장 작은 제목</h6>

 

  • p 태그

p 태그는 주로 본문에 쓰이고 단락을 나눌 때 사용한다.

 

<p>본문</p>

 

  • br, b, i, sup, ins, del 태그

- br 태그 : 행바꿈 태그이고 한 번 사용할 때마다 개행을 한번씩 해준다.

 

<br />

 

- b 태그 : 특정 텍스트를 강조할 때 사용하고 태그 안의 텍스트를 진하게 표시해준다.

 

<b>강조할 텍스트</b>

 

- i 태그 : 특정 텍스트에 이탤릭체(기울임)를 적용하고 싶을 때 사용한다.

 

<i>기울어진 텍스트</i>

 

- sup 태그 : 특정 텍스트를 윗첨자로 넣고 싶을 때 사용한다. 아랫첨자는 sub 태그이다.

 

<sup>윗첨자인 텍스트</sup>

 

- ins 태그 : 특정 텍스트에 밑줄을 치고 싶을 때 사용한다.

 

<ins>밑줄 친 텍스트</ins>

 

- del 태그 : 특정 텍스트가 삭제됐음을 나타날 때 사용한다. 텍스트 가운데에 실선이 그어진다.

 

<del>삭제된 텍스트</del>

 

  • a 태그

a 태그는 특정 텍스트에 하이퍼링크를 걸어줄 때 사용한다.

기본적인 속성은 다음과 같다.

  • href : 클릭시 이동 할 링크
  • target : _blank 일 경우 새로운 페이지가 열리고, _self 일 경우 그 창에서 그대로 페이지가 열린다.

<a href="이동할 링크">하이퍼링크</a>

 

다음은 위에서 설명한 태그들을 모두 사용한 HTML코드와 결과물이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <h1>h1태그 입니다.</h1>
  <h2>h2태그 입니다.</h2>
  <h3>h3태그 입니다.</h3>
  <h4>h4태그 입니다.</h4>
  <h5>h5태그 입니다.</h5>
  <h6>h6태그 입니다.</h6>

  <p>주로 본문에 사용되는 태그로 단락을 구분해준다.</p>
  <p>주로 본문에 사용되는 태그로 단락을 구분해준다.</p>
  <p>주로 <b>본문</b>에 사용되는 태그로 단락을 구분해준다.<br /> 행바꿈 태그입니다.</p>

  <p><a href="http://www.google.com">클릭 시 구글 홈페이지로 이동</a></p>
  <p><i>KOREA</i></p>
  <p>KOREA<sup>seoul</sup></p>
  <p><ins>KOREA</ins></p>
  <p><del>delete</del></p>
</body>
</html>

 

 

 

출처

https://www.inflearn.com/course/html-css-%EA%B0%95%EC%A2%8C#

인프런 실전 HTML & CSS 강좌

'Web > HTML & CSS' 카테고리의 다른 글

5강 : HTML 기본4  (0) 2020.02.28
4강 : HTML 기본3  (0) 2020.02.27
3강 : HTML 기본2  (0) 2020.02.27
1강 : Web과 HTML  (0) 2020.02.27
인프런 - 실전 HTML & CSS 강좌 정리 및 리뷰  (0) 2019.12.31
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함