YYYEJI

[HTML] 간단한 HTML Tag 정리 본문

HTML(or XML) & CSS & JavaScript

[HTML] 간단한 HTML Tag 정리

YEJI ⍢ 2022. 10. 14. 01:36
728x90

HTML 은

웹페이지를 위한 표준 마크업 언어입니다.

 

 

간단한 구조는 아래와 같이 생겼습니다.

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

 

 

디자인은 <style> tag를 사용하고,

다이나믹한 웹페이지를 만들기 위해서는 <script> tag를 사용합니다.

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

 

 

 

웹페이지 타이틀을 바꾸기 위해서는 <title> tag 안에 있는 value를 바꿔줍니다.

자주 사용되는 Tag들을 더 정리해 보겠습니다.

<!DOCTYPE html>
<html>
    <head>
    	<style></style>
    	<title>HTML</title>
    </head>
    
    <body>
    	<script></script>
    </body>
</html>

페이지의 title이 html로 바뀐 것을 확인할 수 있습니다.

 

 

① <p> tag - 문단 구분

 

 

<style> tag 에서 font를 바꿔줄 수 있습니다.

<!DOCTYPE html>
<html>
    <head>
    	<style>
            p{
                font-family:Verdana, Geneva, Tahoma, sans-serif;
            }
        </style>
    	<title>HTML</title>
    </head>
    
    <body>
        <p>Block 성질이 있어서 자동으로 줄바꿈을 시켜줍니다.</p>
        <p>⍢</p>
    	<script></script>
    </body>
</html>

 

 

② <div> tag - 레이아웃을 나누고 그룹핑

<!DOCTYPE html>
<html>
    <head>
    	<style>
            div {
                font-family:Verdana, Geneva, Tahoma, sans-serif;
            }
            #left {
                float: left;
            }
            #right {
                float: right;
            }
        </style>
    	<title>HTML</title>
    </head>
    
    <body>
        <div id="left">
            <p>Left side</p>
        </div>
        <div id="right">
            <p>Right side</p>
        </div>
    	<script></script>
    </body>
</html>

③ <span> tag - 텍스트를 꾸미기 위한 용도

<!DOCTYPE html>
<html>
    <head>
    	<style>
            span {
                font-family:Verdana, Geneva, Tahoma, sans-serif;
            }
        </style>
    	<title>HTML</title>
    </head>
    
    <body>
        <span>hi</span>
    	<script></script>
    </body>
</html>

④ <a> tag - 다른 웹사이트로 이동

<!DOCTYPE html>
<html>
    <head>
    	<style>
        </style>
    	<title>HTML</title>
    </head>
    
    <body>
        <a href="https://www.naver.com/">naver</a>
    	<script></script>
    </body>
</html>

naver를 클릭하면 Naver page로 이동합니다.

 

 

 

⚠️ 알 아 두 기 ⚠️

html의 특정 요소에만 다른 효과를 주고 싶을 때, 해당 요소에 클래스명 또는 아이디값을 할당하여 처리가 가능합니다.

Class와 id를 사용할 수 있는데 둘은 확실한 차이점이 존재합니다.

 

차이점 - 1

class를 불러올 때는 앞에 .(점)을 찍어주고,

id를 불러올 때는 #(샾)을 찍어줍니다.

 

차이점 - 2

class는 중복 사용이 가능하지만,

id는 불가능합니다.

 

차이점 - 3

class는 여러 개의 value가 정의될 수 있지만,

id는 한 요소에 한 value만 적용할 수 있습니다.

 

여러 tag에 적용하고 싶을 땐, class

한 tag에 적용하고 싶을 땐, id

를 사용하세요.

 

 

 

 

◡̈

 

 

'HTML(or XML) & CSS & JavaScript' 카테고리의 다른 글

[JavaScript] id를 통해 element 찾는 방법  (0) 2022.10.25
[CSS] 적용 방법 3가지 (Inline, Embedded, External CSS)  (0) 2022.10.18
[JavaScript] DOM이란?  (0) 2022.10.10
[XML] XSD restriction의 pattern  (0) 2022.10.09
[XML] XSD restriction의 whiteSpace  (0) 2022.10.09
'HTML(or XML) & CSS & JavaScript' Related Articles more