HTML | CSS | Javascript

[HTML|CSS] 2장 기본 태그

반응형

 

기본 태그

 

: h 태그, br 태그, p 태그 등등이 있다.

자세한 사용 방법은 하단에 기입한다.

 

 

 

h 태그

 

h1부터 h6까지 총 6개가 있으며 숫자가 클수록 가장 작게 표현된다.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- heading -->
    <!-- 가장큰 head -->
    <h1>개발자가 알아야 할 기본 태그</h1>
    <!-- 가장작은 head -->
    <h6>개발자가 알아야 할 기본 태그</h6>
    <h7>존재하지 않은 태그는 브라우저가 마음대로 해석</h7>
</body>
</html>

 

결과 화면1

 

 

 

br 태그 & &lt;br&gt; : 줄바꿈 태그

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- line break -->
    <!-- 줄바꿈 -->
    줄바꿈을
    <br>
    하는 방법    
</body>
</html>

 

결과 화면2 : <br>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- line break -->
    <!-- 줄바꿈 -->
    줄바꿈
    <br>
    태그 사용
    <!-- html특수문자표현: 꺽쇠는 태그로 인식되므로 특수문자표현시긍로 문자 그대로 처리 -->
    &lt;br&gt;이라는 태그는 줄넘김처리를 해줌
</body>
</html>

 

결과 화면3

 

 

 

p 태그 : 하나의 문단

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        p{
            background-color: gold;
        }
    </style>
<body>
    <!-- paragraph : 문단을 나타내는 태그, 자동을 ㅗ줄이 바꾸며 줄사이 여백이 생김 -->
    <p>문단을</p>
    나눠주는 태그
</body>
</html>

 

결과 화면4

 

 

 

pre 태그

 

: 미리 정의된 형식(preformatted)의 텍스트를 정의할 때 사용

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- preformatted: 미리 정의된 형식, 여백과 줄바꿈도 그대로 드러남 -->
    <pre>
        여기는              내가        작      성  하는
        그  대      로      표현됨
    </pre>
</body>
</html>

 

결과 화면5

 

 

 

hr 태그 : 수평선

 

: 수평선을 생성해줌

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- horizontal : 수평선 생성 -->
    수평선
    <hr>
    생성
</body>
</html>

 

결과 화면6

 

 

반응형

'HTML | CSS | Javascript' 카테고리의 다른 글

[HTML|CSS] 3장 HTML 구성과 list  (0) 2024.02.08
[HTML|CSS] 1장 하이퍼링크  (0) 2024.02.08
[HTML/CSS/Script] 12장 함수  (0) 2024.02.01
[HTML/CSS] 10.5장 Test  (0) 2024.01.29
[HTML/CSS/Script] 9장 Script  (0) 2024.01.26

티스토리툴바