본문 바로가기
프로그래밍/HTML + CSS

[HTML/기본] TAG

JK공부방 2023. 10. 20. 10:08
728x90
반응형
SMALL

HTML 이란?

 

HTML 기본 - Web 개발 학습하기 | MDN

HTML (Hypertext Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다. 예를 들면, 콘텐츠는 여러 개의 문단, 글 머리 목록이 구조화된 것이거나 사진이나 데이터 테이블일 수

developer.mozilla.org

  • HTML은 마크업 언어로 정보를 태크로 감싸서 보여준다.

HTML 태그

  • HTML 태그(tag)는 HTML 요소 (element)라고 부르며, HTML 문서를 구성하는 기본 단위
  • 여는 태그 (opening tag) : 정보나 구조, 혹은 효과가 시작되는 곳을 나타낸다
  • 닫는 태그 (Closing tag): 여는 태그의 이름 앞에 역슬래쉬'/'가 포함되며 여는 태크가 끝나는 곳을 나타낸다.
  • https://www.advancedwebranking.com/seo/html-study/#overview 태그 관련 

웹페이지는 평균적으로 32개의 태그를 사용한다.

시작

  • <!DCOTYPE> : 모든 HTML 문서는 반드시 문서타입이라는 것을 선언해주어야 한다.
    • 기존에는(4.01) 다양한 방식으로 DOCTYPE임을 선언하는 방법들이 있었지만  현재는(HTML5) 위의 태그 하나로 선언 가능
  • <html> : HTML 문서의 Root Element(루트 요소)를 정의함
  • <head> : 해당 문서에 대한 정보인 메타데이터(metadata)의 집합을 정의함
  • <meta> : 해당 문서에 대한 정보인 메타데이터(metadata)를 정의함
  • <title> : 문서의 제목을 나타냄 (웹 브라우저의 제목 표시줄에 나타남)
  • <body> : 각종 컨텐츠 태그들을 하나의 그룹으로 묶을 떄 사용함
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>
  • IDE (Intellij or WebStorm or VScode) 에서 HTML:5 혹은 ! 를 통해 해당 HTML 파일을 만들 수 있음 (Emmet) 

제목과 단락

  • Heading 태그 (h1 ~ h6) : heading을 줄여서 h, 제목의 레벨에 따라서 1 ~ 6까지가 있다.
  • 예시
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
 	<h1>heading 1</h1>
    <h2>heading 2</h2>
    <h3>heading 3</h3>
    <h4>heading 4</h4>
    <h5>heading 5</h5>
    <h6>heading 6</h6>

</body>
</html>

예시 화면

 

  • Paragraph 태그 (p) : paragraph를 줄여거 p 로 표현, 자연스럽게 개행(엔터)가 된다.
  • Linebreak 태그 (br) : linebreak를 줄여서 br, p 내부에서 <br> 을 선언 해서 임의로(원하는 곳에) 개행(띄어쓰기)를 시킴
  • 예시
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
 	<p>html 안에서 아무리 Enter 를 쳐도
        Space(공&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;백) 을 여러번 입력해도
        <br><br><br><br>
        1칸 띄기로 밖에 그려지지 않는다.
    </p>
</body>
</html>

예시 화면

  • Horizontal rule 태그 (hr) : HTML 태그로 Closing태그 없이 사용 되며, 수평으로 줄을 긋는 태그
  • 예시
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>웹개발</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>안녕하세요 HTML</h1>
        <p>이것이 웹이다.</p>
        <hr>
        <p>라이브서버당!</p>
    </body>
</html>

예시 화면

STYLE

Inline

  • HTML에서 STYLE 속성의 속성값에는 CSS스타일 구문이 들어감
  • inline (태그안에서) 선언해 주는 것도 가능함.
  • 예시
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Style</title>
</head>
<body>
    <h1 style="font-family: Gulimche;">굴림체</h1>
    <h1 style="font-family: Gungsuh; background-color: cyan; text-align: right;">궁서체</h1>
    <h1 style="font-family: Batang; background-color: yellow; text-align: center;">바탕체</h1>
    <br>
    <p style="font-size: 200%;">200% P 태그</p>
    <p style="font-size: 300%;">300% P 태그</p>
    <p style="font-size: 200px;">200px P 태그</p>
</body>
</html>

 

예시화면, 밑에 더있지만 자름

Internal

  • <head>태그 안에 <style>태그를 선언 하고 사용하는 것도 가능 (Internal)
  • 지정할 HTML 태그를 선언부에 선언하고 {} 안에 "속성(PROPERTY) : 값" 의 형태로 보는 것이 가능
  • 지정할 HTML태그를 선언부에 선언하는 것을 우리는 css Selector 라고 합니다
  • 예시

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        p {
            color: red;
        }
        body {
            background-color: powderblue;
        }
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>This is a heading1</h1>
    <p>This is a paragraph1</p>
    <h1>This is a heading2</h1>
    <p style="color:yellow;">This is a paragraph2</p>
    <hr>
    <h1>This is a heading3</h1>
    <p>This is a paragraph3</p>
    <p>I am different1</p>
    <hr>
    <p>This is a paragraph4</p>
    <p>This is a paragraph5</p>
    <p>I am different2.</p>
    <p>This is a paragraph6</p>
    <p>I am different too3.</p>
</body>

</html>

예시화면

External

  • <link rel="stylesheet" href = "css파일이 있는 경로">
  • 위 태그를 head태그 안에 넣어줌으로써 외부에 있는 css적용 가능
  • rel =  "속성값" : relationship 의 약자로 약속되어있는 속성값들을 통해 어떤 관계인지를 알려준다.
 

HTML attribute: rel - HTML: HyperText Markup Language | MDN

The rel attribute defines the relationship between a linked resource and the current document. Valid on <link>, <a>, <area>, and <form>, the supported values depend on the element on which the attribute is found.

developer.mozilla.org

  • herf = "경로" : 경로에 절대 혹은 상대 경로로 표현이 되고 대게 외부의 자원을 받아올때 사용됨

 

컨테이너

  • 다른 요소를 담는 용도로 주로 사용되는 태그들이며 화면 레이아웃 상의 구역별로 나누는 용도로 많이 사용
  • <div> : display : block의 속성을 가짐
  • <span> : display : inline의 속성을 가짐
  • 예시
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div, span</title>
</head>
<body>
    <h2>div, span</h2>
    <div>div</div>
    <div>div</div>
    <div>div</div>

    <hr>

    <div style="background: yellow; padding: 5px;">
        div2
        <div style="background: green; padding: 5px;">
            div21
        </div>
        div2
        <div style="background: cyan; padding: 5px;">
            div22
            <div style="background-color: violet; padding: 5px;">
                div221
            </div>
            <div style="background-color: lightgray; padding: 5px;">
                div222
            </div>
        </div>
    </div>

    <hr>
    <span>span</span>
    <span>span</span>
    <span>span</span>

    <hr>

    <span style="background: yellow; padding: 5px;">
        span2
        <span style="background: green; padding: 5px;">
            span21
        </span>
        span2
        <span style="background: cyan; padding: 5px;">
            span22
            <span style="background-color: violet; padding: 5px;">
                span221
            </span>
            <span style="background-color: lightgray; padding: 5px;">
                span222
            </span>
        </span>
    </span>
</body>
</html>

 

예시 화면

 

728x90
반응형
LIST
저작자표시

'프로그래밍 > HTML + CSS' 카테고리의 다른 글

[HTML/기본] FORM  (1) 2023.10.28
[HTML/기본] TAG3  (0) 2023.10.24
[HTML/기본] TABLE  (1) 2023.10.23
[HTML/기본] TAG2  (0) 2023.10.22

'프로그래밍/HTML + CSS' Related Articles

티스토리툴바