본문 바로가기
[언어]/Web

[HTML] HTML 기초 문법 및 실습 : 태그 < > 사용법, head와 body, 타이틀 설정, 단락 나누기, 줄바꿈, 수평선 긋기, 개발자 포맷대로 작성, 글 강조

by seom-j 2023. 7. 10.

📌 태그 < >

태그들을 사용하여 원하고자 하는 바 표시

태그는 열고(<>) 닫으며(</>), 그 사이에 태그가 적용될 상세 내용을 작성

 

 

📌 ! + enter

! + enter시 기본적인 head와 body 작성 가능

 

<!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>

</body>
</html>

<head> : 각종 사이트에 대한 정의

<body> : 실제 창에 띄울 세부 내용

 

 

📌 HTML 코드 작성 결과 확인법

앞서 포스팅한 글에서 확인할 수 있듯, Live Server를 사용하여 브라우저에서 확인 가능

 

 

📌 타이틀바에 보이는 글 작성

<title> : 브라우저 타이틀바에 보이는 글 설정

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>helloworld web</title> 
		<!--title 설정 예제-->
</head>
<body>

</body>

➡️ Live Server를 사용하여 브라우저 타이틀바에서 helloworld web을 확인할 수 있음

 

 

📌 다양한 제목글 작성 

<h1> : 제목 형태 (h1~6 존재)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>helloworld web</title>
</head>
<body>
    <h1>hello world!!!</h1>
    <h1>hello world!!!</h1>
    <h2>hello world!!!</h2>
    <h3>hello world!!!</h3>
    <h4>hello world!!!</h4>
    <h5>hello world!!!</h5>
    <h6>hello world!!!</h6>
    <!--문단 제목 달기 예제-->

</body>

⬇️ Live Server를 사용하여 실행한 결과

 

 

 

📌 단락 나누기 

<p> : 문단 형태(단락 나누기)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>helloworld web</title>
</head>
<body>
    <h1>hello world!!!</h1>
    <p>
        안녕하세요 안녕하세요 안녕하세요
    </p>
    <p>
        안녕하세요 안녕하세요 안녕하세요
    </p>
    <!--단락 나누기 예제-->
</body>

 

⬇️ Live Server를 사용하여 실행한 결과

 

⬇️ 단락을 나누지 않고, 코드 내에서만 줄바꿈을 한 경우 단락이 나누어지지 않음 

 

 

📌 줄바꿈

<br> : 다음 줄로

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>helloworld web</title>
</head>
<body>
    <h1>hello world!!!</h1>
    <p>
        안녕하세요 <br> 안녕하세요 안녕하세요
    </p>
    <p>
        안녕하세요 안녕하세요 <br> 안녕하세요
    </p>
    <!--새로운 줄로 넘어가기 예제-->
</body>

 

⬇️ Live Server를 사용하여 실행한 결과

 

 

📌 수평선 긋기 (종료태그 미사용)

<hr> : 수평선 긋기

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>helloworld web</title>
</head>
<body>
    <h1>hello world!!!</h1>
    <p>
        안녕하세요 <br> 안녕하세요 안녕하세요
    </p>
    <hr>
    <p>
        안녕하세요 안녕하세요 <br> 안녕하세요
    </p>
    <!--수평선 긋기 예제-->
</body>

⬇️ Live Server를 사용하여 실행한 결과

 

 

 

📌 개발자 포맷대로 작성 

<pre> : 내가 입력한 모양 그대로 출력하기

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>helloworld web</title>
</head>
<body>
    <h1>hello world!!!</h1>
    <pre>
        안녕하세요 안녕하세요
        안녕하세요
        안녕하세요 안녕하세요 안녕하세요
    </pre>
    <!--개발자 포맷대로 출력하기 예제-->
</body>

⬇️ Live Server를 사용하여 실행한 결과

 

 

📌 각종 글 강조 방법 

<b> : 진하게

<em> : 강조

<i> : 이테릭

<b> <i> : 진하게 이태릭

<small> : 작게

<del> : 삭제

<ins> : 추가

<sup> : 윗첨자

<sub> : 아래첨자

<mark> : 하이라이팅

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>helloworld web</title>
</head>
<body>
    <h1>hello world!!!</h1>
    <b>안녕하세요</b><hr>
    <em>안녕하세요</em><hr>
    <i>안녕하세요</i><hr>
    <b><i>안녕하세요</i></b><hr>
    <small>안녕하세요</small><hr>
    <del>안녕하세요</del><hr>
    <ins>안녕하세요</ins><hr>
    <sup>안녕하세요</sup><hr>
    <sub>안녕하세요</sub><hr>
    <mark>안녕하세요</mark><hr>
    <!--각종 글 강조 예제-->
</body>

⬇️ Live Server를 사용하여 실행한 결과

 

 

📌 블록태그와 인라인태그

블록태그 : 그 다음 내용이 아래로(하나의 블록을 차지하여 다음 내용이 옆으로 오지 못함)

인라인 태그 : 다음 내용이 옆으로 옴

 

// 블록 테그
<div>
        <b>hello</b>
</div>
<div>
        <i>hello</i>
</div>

// 인라인 태그
<b>hello</b>
<i>hello</i>

 

 

📌 전체 활용 코드, 결과

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>helloworld web</title>
</head>
<body>
    <h1>hello world!!!</h1>
    <hr>
    <h1>hello world!!!</h1>
    <h2>hello world!!!</h2>
    <h3>hello world!!!</h3>
    <h4>hello world!!!</h4>
    <hr>
    <h5>hello world!!!</h5>
    <hr>
    <p>
        <b>How are you? </b><i>nice to meet you.</i>
    </p>
    <p>
        How are you? nice to meet you.
        How are you? nice to meet you.
    </p>
    <pre>
        How are you? nice to meet you.
            How are you? nice to meet you.
    </pre>
    <hr>
    <div style = "background-color:skyblue">
        <br>
        <b>hello</b>
        <br>
        <br>
    </div>
    <div>
        <i>hello</i>
    </div>
    <hr>
    <b>hello</b><i>hello</i>
</body>
</html>

⬇️ Live Server를 사용하여 실행한 결과

'[언어] > Web' 카테고리의 다른 글

[Flask] Flask 기본 사용법 : VScode Flask 실습 코드, URL에 웹페이지 연결, 동적 URL, HTML 파일 렌더링  (0) 2023.07.20
[Flask] Flask 설치 및 웹 실행 방법 : Flask란?, VScode Flask 설치, Flask 실습 코드, Flask를 활용한 웹의 실행  (0) 2023.07.20
[개발 환경 구축] 웹 개발 환경 구축 : VScode 설치, HTML 파일 생성, Live Server 확장자 설치 및 사용법  (0) 2023.07.10
[WEB] 웹이란 무엇인가? : HTML, CSS, JavaScript의 역할  (0) 2023.07.10

관련글

티스토리툴바