본문 바로가기
카테고리 없음

HTML이란? HTML 문법과 예시 알아보기

자린고비 굴비부자 2023. 10. 26. 19:40
반응형

 

HTML이란?

HTML (HyperText Markup Language)은 웹 페이지를 만들기 위한 마크업 언어로, 웹 페이지의 구조와 콘텐츠를 정의합니다. HTML을 사용하여 웹 페이지의 구조와 콘텐츠를 정의하고, 텍스트, 이미지, 링크, 표, 폼 등을 배치할 수 있습니다. HTML로 웹 페이지를 만들려면 다음 단계를 따르세요:

  1. 텍스트 편집기 선택: HTML 코드를 작성할 수 있는 텍스트 편집기를 선택합니다. 예를 들면, Visual Studio Code, Sublime Text, Atom, 또는 기타 편집기를 사용할 수 있습니다.
  2. HTML 문서 구조 생성: HTML 문서의 기본 구조를 생성합니다. 다음 코드를 사용하여 시작할 수 있습니다: 
    
                    <!DOCTYPE html>
                    <html>
                    <head>
                      <title>웹 페이지 제목</title>
                    </head>
                    <body>
                      <h1>안녕하세요!</h1>
                      <p>첫 번째 웹 페이지입니다.</p>
                    </body>
                    </html>
  3. 요소 추가: <body> 태그 내에 웹 페이지의 콘텐츠를 추가합니다. 예를 들어, <h1> 태그는 제목을, <p> 태그는 단락을 나타냅니다.
  4. 태그와 속성 사용: 다양한 HTML 태그와 속성을 사용하여 콘텐츠를 마크업합니다. 예를 들어, <img> 태그를 사용하여 이미지를 삽입하거나, <a> 태그를 사용하여 링크를 추가할 수 있습니다. 각 태그는 특정 속성을 가지며, 속성은 값을 가집니다.
  5. CSS 적용 (선택 사항): 스타일을 지정하기 위해 CSS (Cascading Style Sheets)를 사용하여 웹 페이지를 디자인할 수 있습니다. CSS를 사용하여 텍스트 스타일, 배경색, 레이아웃 등을 정의할 수 있습니다.
  6. 웹 브라우저에서 확인: 작성한 HTML 파일을 웹 브라우저에서 열어 결과를 확인합니다. 파일을 'index.html'과 같은 이름으로 저장하고, 브라우저에서 파일을 열거나, 웹 서버에 업로드하여 확인할 수 있습니다.

이렇게 하면 간단한 HTML 웹 페이지를 생성할 수 있습니다. HTML에 대해 더 자세히 알고 싶다면, W3Schools (https://www.w3schools.com/html/)과 같은 온라인 자습서를 참고하는 것이 좋습니다.

 

 

HTML 요소와 문법

HTML은 웹 페이지를 만드는 데 사용되는 마크업 언어입니다. HTML을 사용하면 웹 페이지의 구조를 정의하고 콘텐츠를 구성할 수 있습니다. 여기에 몇 가지 HTML 요소와 문법에 대한 예시가 있습니다:

  1. HTML 문서의 시작과 끝: 
  2. <!DOCTYPE html> <html> <head> <title>웹 페이지 제목</title> </head> <body> <h1>제목</h1> <p>문단</p> </body> </html>
  3. 제목 요소: 
    
                    <h1>제목</h1>
                    <h2>부제목</h2>
                    <h3>소제목</h3>
  4. 문단 요소: 
    
                    <p>문단</p>
  5. 링크 요소: 
    
                    <a href="링크 주소">링크 텍스트</a>
  6. 이미지 요소: 
    
                    <img src="이미지 주소" alt="대체 텍스트">
  7. 목록 요소: 
    
                    <ul>
                      <li>항목 1</li>
                      <li>항목 2</li>
                      <li>항목 3</li>
                    </ul>
  8. 테이블 요소: 
    
                    <table>
                      <thead>
                        <tr>
                          <th>헤더 셀 1</th>
                          <th>헤더 셀 2</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>셀 1</td>
                          <td>셀 2</td>
                        </tr>
                        <tr>
                          <td>셀 3</td>
                          <td>셀 4</td>
                        </tr>
                      </tbody>
                    </table>

 

블로그에 자주 쓰는 HTML 코드

블로그에서 주로 사용되는 HTML 코드는 다양합니다. 다음은 일반적으로 블로그에서 사용되는 몇 가지 HTML 요소와 코드 예시입니다:

  1. 제목과 부제목: 
    
                    <h1>제목</h1>
                    <h2>부제목</h2>
  2. 문단: 
    
                    <p>문단 내용</p>
  3. 링크: 
    
                    <a href="링크 주소">링크 텍스트</a>
  4. 이미지: 
    
                    <img src="이미지 주소" alt="이미지 설명">
  5. 목록: 
    
                    <ul>
                      <li>항목 1</li>
                      <li>항목 2</li>
                      <li>항목 3</li>
                    </ul>
  6. 인용문: 
    
                    <blockquote>
                      인용문 내용
                    </blockquote>
  7. 코드 블록: 
    
                    <pre>
                      <code>
                        코드 내용
                      </code>
                    </pre>
  8. 강조: 
    
                    <strong>강조 텍스트</strong> 또는 <em>기울임 텍스트</em>
  9. 수평선: 
    
                    <hr>

이 외에도 블로그 디자인에 맞게 다양한 HTML 요소를 사용할 수 있습니다. 블로그 플랫폼에 따라 사용 가능한 요소와 스타일링 옵션이 다를 수 있으므로, 해당 플랫폼의 문서나 가이드라인을 참조하는 것이 좋습니다.

티스토리툴바