Multi Developer SuHo

HTML 제목, 문단, 서식 태그 본문

html5+CSS3

HTML 제목, 문단, 서식 태그

Dreaming Developer Student 2024. 1. 29. 17:25
SMALL

안녕하세요 ~ 오늘은 HTML 제목, 문단, 서식 태그에 대해 알아보겠습니다.

글을 작성하기전 모든 내용은 다음과 같은 강의플랫폼을 활용하여 작성하였습니다.
https://www.inflearn.com/course/html-css-%EA%B8%B0%EC%B4%88-%EB%AC%B8%EB%B2%95-%EC%98%AC%EC%9D%B8%EC%9B%90

 

[지금 무료] HTML5 & CSS3 기초 문법 올인원 강의 - 인프런

도서 HTML5 독학백서 & CSS3 독학백서 저자 직강! 이론은 짧게 핵심만! 모던 HTML과 CSS에 입문하기 위해 꼭 알아야 하는 핵심 문법 엑기스만 정리했습니다., 핵심을 컴팩트하게! 빠르게 해치우는 HTML/

www.inflearn.com


먼저 소개할 태그는 제목 태그 입니다. 

제목 태그 - 웹 페이지의 섹션이나 문단의 제목을 나타내는 블록 태그를 의미

제목 태그는 가장 큰 대제목을 표현하는 h1 ~ h6 태그까지 이루어져 있습니다. 태그명에 붙은 숫자들이 작을수 글자의 크기가 커지고, 반대로 태그들의 숫자들이 클수록 글자의 크기가 작아집니다.

소스코드를 보면서 실습해주셨으면 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
</head>
<body>
    <h1> HTML 처음 접합니다.</h1>
    <h2> 오늘도 활기찬 분위기!</h2>
    <h3> 내일도 화이팅~</h3>
    <h4> 모레도 화이팅~</h4>
    <h5> 즐거운 분위기~</h5>
    <h6> 긍정적으로</h6>
</body>
</html>


이렇게 <h1>  </h1> 태그로 작성되어 있는 것을 볼 수 있습니다.  태그 안에 텍스트를 입력하여 웹 페이지 화면에 나타납니다.


 중요한 점은 HTML의 제목 태그는 단순히 글자 크기를 조절하는 것 이상의 중요한 역할을 합니다. 이들은 웹페이지의 구조를 명확하게 하며, 사용자와 검색 엔진에게 해당 페이지의 주요 주제와 하위 주제를 명확히 전달하는 역할을 합니다.

다음은 문단을 나타낼 때 사용되는 블록 태그인 p 태그 입니다.  다음과 같이 소스를 작성하면

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
</head>
<body>
    <p> 
        2024년 값진년 해에도 행복한 일들만 가득하길 바랍니다
        오늘도 이렇게 코드를 작성해봅니다. HTML 실습을 통해 실력을 향상시키고 싶습니다
        내일도 노력하는 사람이 되겠습니다. 나를 표현할 수 있는 사람이 되겠습니다.
    </p>
    <p>
        옛날 어느 마을에 귀여운 토끼 한 마리가 살았습니다. 이 토끼는 언제나 마을 사람들에게 웃음과 행복을 주었지만, 어느 날 갑자기 사라져버립니다. 마을 사람들은 토끼를 찾기 위해 모두 함께 노력하지만, 결국 토끼를 찾지 못하고 슬픔에 잠기게 됩니다.
        그러던 어느 날, 작은 소년이 우연히 숲 속에서 토끼를 발견합니다. 토끼는 소년에게 자신이 숲 속에서 새로운 친구들을 만나 행복하게 지내고 있다고 말합니다. 소년은 이를 듣고 마을 사람들에게 토끼의 소식을 전해줍니다
        마을 사람들은 토끼가 행복하게 지내고 있다는 소식을 듣고 기뻐하며, 다시 한 번 웃음이 가득한 마을이 됩니다. 그 후로도 마을 사람들은 토끼를 그리워하며, 그의 이야기를 후세에 전해 나가게 되었습니다
    </p>
</body>
</html>

 

실행결과

 

실행해보면 첫 번째 문단과 두 번째 문단이 서로 다른 블록으로 분리되어 있는 것을 확인할 수 있습니다. Visual Studio Code 에서 보면 각 문단의 줄 바꿈이 실행한 웹 브라우저에선 적용되지 않는 것을 볼 수 있습니다. HTML 에서 줄 바꿈은 <br></br> 태그를 사용하여야 합니다.  다음 소스코드는 <br> 태그를 추가한 코드입니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
</head>
<body>
    <p> 
        2024년 값진년 해에도 행복한 일들만 가득하길 바랍니다.</br>
        오늘도 이렇게 코드를 작성해봅니다. HTML 실습을 통해 실력을 향상시키고 싶습니다</br>
        내일도 노력하는 사람이 되겠습니다. 나를 표현할 수 있는 사람이 되겠습니다.</br>
    </p>
    <p>
        옛날 어느 마을에 귀여운 토끼 한 마리가 살았습니다. 이 토끼는 언제나 마을 사람들에게 웃음과 행복을 주었지만, 어느 날 갑자기 사라져버립니다. 마을 사람들은 토끼를 찾기 위해 모두 함께 노력하지만,</br> 결국 토끼를 찾지 못하고 슬픔에 잠기게 됩니다.
        그러던 어느 날, 작은 소년이 우연히 숲 속에서 토끼를 발견합니다. 토끼는 소년에게 자신이 숲 속에서 새로운 친구들을 만나 행복하게 지내고 있다고 말합니다. 소년은 이를 듣고 마을 사람들에게 토끼의 소식을 전해줍니다</br>
        마을 사람들은 토끼가 행복하게 지내고 있다는 소식을 듣고 기뻐하며, 다시 한 번 웃음이 가득한 마을이 됩니다. 그 후로도 마을 사람들은 토끼를 그리워하며, 그의 이야기를 후세에 전해 나가게 되었습니다
    </p>
</body>
</html>

 

실행결과

이렇게 <br> 태그를 사용하여 줄 바꿈을 적용하였습니다.

다음은 텍스트를 굵게 표현하고 싶을 때 사용되는 태그인 <b> 태그와 , <strong> 태그입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
</head>
<body>
  <p>
    <b>안녕하세요 </br></b> 
    <strong>감사합니다 </br></strong>
  </p>
</body>
</html>

실행결과


실행하면 이렇게 텍스트가 굵게 표현되는 것을 볼 수 있습니다.  두 개의 태그 모두 웹 페이지에서 텍스트를 굵게 표시하는 역할을 하지만 의미론적인 차이가 있습니다. 

1. <b> 태그: 이 태그는 텍스트를 굵게 표시하기 위한 태그입니다. 그러나 이 태그는 텍스트에 강조의 의미를 부여하지 않습니다. 즉, 시각적으로만 텍스트를 굵게 만들며, 검색 엔진이나 스크린 리더 등은 이를 특별히 중요하게 해석하지 않습니다.
2. <strong> 태그: 이 태그는 텍스트를 굵게 표시하는 동시에 강조의 의미를 부여합니다. 이는 검색 엔진이나 스크린 리더 등이 해당 텍스트를 중요하게 해석하도록 돕습니다. 즉, <strong> 태그는 단순히 시각적인 표현 뿐 아니라 의미론적인 강조를 부여하는 역할도 합니다.

다음은 텍스트의 기울임 효과를 주는 <i> 태그, <em> 태그 입니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
</head>
<body>
  <p>
     <i>안녕하세요</i></br>
     <em>반갑습니다</em></br>
  </p>
</body>
</html>

 

실행결과


두 개의 태그 모두 같은 결과를 가져오지만 의미론적인 차이가 있습니다. 

1. <i> 태그: 이 태그는 텍스트를 기울임체로 표시하기 위한 태그입니다. 하지만 이 태그는 텍스트에 강조의 의에 강조의 의미를 부여하지 않으며, 단순히 글자의 형태를 변경하는 역할만 합니다.
2. <em> 태그: 이 태그는 텍스트를 기울임체로 표시하면서 동시에 강조의 의미를 부여합니다. 즉, <em> 태그는 텍스트에 강조를 나타내는 의미론적인 역할을 합니다.
이렇게 태그둘중  같은 결과를 가져오지만 각각의 차이점이 있다는 것을 알 수 있습니다.
이 외에도 텍스트 안에 밑줄을 표현할 때는 <ins> 태그를 사용하고, 텍스트 중앙에 취소선을 표현할 때는 <del> 태그를 사용합니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
</head>
<body>
  <p>
     <ins>안녕하세요</ins></br>
     <del>반갑습니다</del></br>
  </p>
</body>
</html>

 

실행결과



다음은 인용문을 사용할때 사용되는 <q> 태그와 <blockquote> 태그입니다.  두 개의 태그도 마찬가지로 같은 결과를 가져오지만  사용 방식과 표현방식에는 차이점이 있습니다.

1. <q> 태그: <q> 태그는 짧은 인용문을 나타냅니다. 이 태그는 주로 문장 내에서 인용문을 표현할 때 사용되며, 대부분의 브라우저에서는 이 태그를 사용한 인용문을 자동으로 쌍따옴표(" ")로 감싸 표현합니다.
2. <blockquote> 태그: <blockquote> 태그는 긴 인용문을 나타냅니다. 이 태그는 주로 여러 문장이나 단락으로 이루어진 인용문을 표현할 때 사용되며, 이 경우 인용문은 본문과 구분되어 표현됩니다. 일반적으로 브라우저는 <blockquote> 태그로 감싼 내용을 들여쓰기하여 표현합니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
</head>
<body>
  <p>
     <q>안녕하세요, 오늘 날씨가 많이 춥네요</q></br>
     <blockquote>반갑습니다. 다들 감기 조심하시고 행복한 날만 가득하시길 바랍니다. 내일도 다시 찾아 뵙겠습니다. </blockquote></br>
  </p>
</body>
</html>

 


이렇게 태그를 사용하여 웹 페이지에 적용해봤습니다. 감사합니다.

LIST
저작자표시

'html5+CSS3' 카테고리의 다른 글

HTML 링크 태그, 리스트 태그  (0) 2024.02.01
HTML 주석 처리, 인라인 태그, 블록 태그  (0) 2024.01.29
HTML 기본 구조  (0) 2024.01.26
HTML5 실습  (0) 2024.01.26
HTML5+CSS3 소개  (0) 2024.01.25
'html5+CSS3' Related Articles more