웹 시스템 개발 #HTML 초보편

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다.

 

부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다.

 

HTML 배우기 시작~!


HTML5란?

HTML5는 웹 페이지를 만들기 위한 가장 최신의 웹 기술입니다.

HTML5 문서의 기본 구조는 다음과 같습니다.

 

HTML 구조

<!DOCTYPE>

먼저, 문서의 첫 줄에는 <!DOCTYPE> 선언이 와야 합니다.

이 선언은 HTML5 문서임을 선언해주는 역할입니다.


 <html> 

<!DOCTYPE> 다음에는 최상위 요소인 <html> 태그가 와야 합니다.

이 태그는 <head> <body>를 포함해야 합니다.

 


<head> 

<head> 태그는 문서 자체의 정보(meta)를 담습니다.

<head> 태그 안에는 문서 제목, JavaScript, Style Sheet 등이 포함됩니다.

 


<body>

<body> 태그는 문서의 내용을 담습니다. <body> 태그안에는 구조화를 위한 다양한 태그를 사용할 수 있습니다.

예를 들어 <h1>, <img>, <a>, <ul>, <ol>, <li>, <table>, <tr>, <td>, <form>, <input>, <button> 등의 태그가 존재합니다. 이 태그들은 웹 페이지를 만드는 데 거의 필수적인 요소라고 할 수 있습니다.

 


메타정보

메타 정보는 검색 엔진에서 웹 페이지를 검색할 때 사용됩니다.

<meta> 태그를 사용하여 메타 정보를 추가할 수 있습니다.

 


태그란?

태그(Tag)는 HTML 문서에서 사용되는 특별한 키워드입니다. 태그는 웹 페이지의 구조와 내용을 정의하는 데 사용됩니다. HTML 문서에는 여러 가지 태그를 사용할 수 있으며, 각 태그는 특정한 의미를 가지고 있습니다.

 

예를 들어, <h1> 태그는 제목을 나타내는 데 사용되고, <p> 태그는 단락을 나타내는 데 사용됩니다.

태그는 꺾쇠 괄호(<>)로 묶여 있으며, 시작 태그와 종료 태그로 구성됩니다. 

 


Attribute

Attribute 예시

 

Attribute(속성)은 HTML 태그에 추가 정보를 부여하는 데 사용됩니다. 예를 들어, <img> 태그에는 이미지 파일의 경로를 지정하는 src 속성이 있습니다.

속성은 태그의 시작 태그에 추가됩니다. 속성은 이름과 값으로 구성되며, 이름과 값은 등호(=)로 구분됩니다.

예를 들어, <img src="image.jpg">에서 src는 속성 이름이고, "image.jpg"는 속성 값입니다.

 


Comment(주석)

Comment 예시

Comment는 HTML 문서에서 코드를 설명하거나, 코드를 임시로 비활성화할 때 사용됩니다.

주석은 <!--와 --> 사이에 작성됩니다.

 


줄 바꿈

줄 바꿈, 수평줄

줄 바꿈은 HTML에서 공백 문자(스페이스, 탭 등)이 연속해서 나타날 때, 브라우저에서는 하나의 공백 문자로 처리됩니다.

 

따라서 줄 바꿈을 하려면 <br> 태그를 사용해야 합니다.

 

문자열  그대로 사용하려면 <pre>태그를 사용하면 됩니다. 


<div> 과 <span>

<div> : Block element 

  • 특성:
    • 화면의 전체 폭을 차지함
    • 항상 새로운 줄에서 시작됨
  • 대표 요소들
    • <div>
    • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
    • <p>
    • <ul>
    • <ol>
    • <li>
    • <table>
    • <form>

<span> : InLine element 

  • 특성:
    • 텍스트와 같은 콘텐츠를 감싸는 역할
    • 새로운 줄에서 시작되지 않음
  • 대표 요소들
    • <span>
    • <a>
    • <img>
    • <input>
    • <button>
    • <label>
    • <select>
    • <textarea>

중첩 규칙

  • 블록 요소와 인라인 요소는 서로 중첩될 수 있습니다.
    • 예시: <p> 태그 안에 <a> 태그를 넣을 수 있습니다.
  • 인라인 요소는 블록 요소 내부에만 배치될 수 있습니다.
    • 주의사항: <p> 태그 안에 <div> 태그를 넣을 수 없습니다.

 

(위) <span> / (아래) <div>

정리를 하자면, 

 

<div>는 HTML 문서에서 "블록 레벨 요소"를 만드는 데 사용됩니다. 전체 너비를 차지 하며 새로운 줄에서 시작합니다.

컨텐츠를 그룹화하거나, 스타일을 적용하는 데 사용됩니다.

 

<span>은 HTML 문서에서 "인라인 요소"를 만드 는 데 사용됩니다. 필요한 만큼의 너비만 차지하며 새로운 줄에서 시작하지 않습니다.

텍스트나 이미지 등의 인라인 요소를 그룹화하거나, 스타일을 적용하는 데 사용됩니다.

 

+ Divitus : 모든 것에 div를 사용하는 사람을 놀리는 단어라고 합니다. 

 


Image

  • Tag: <img>
  • Description: 이미지를 웹 페이지에 삽입하기 위해 사용합니다.
  • Example: <img src="image.jpg" alt="Example Image">

alt="Example Image"

이미지가 모종의 이유로 업로드 되지 않았을 경우 Text로 알려주는 방식이 alt입니다.


List

  • Tag:
    • Unordered List: <ul>
    • Ordered List: <ol>
    • List Item: <li>
  • Description: 목록을 만듭니다. <ul>은 순서가 없는 목록을, <ol>은 순서가 있는 목록을 생성합니다. <li>는 목록의 각 항목을 나타냅니다.
  • Example:
    • Unordered List: <ul><li>Apple</li><li>Banana</li></ul>
    • Ordered List: <ol><li>First</li><li>Second</li></ol>

ul, ol, li


Table

  • Tag:
    • Table: <table>
    • Table Row: <tr>
    • Table Data: <td>
    • Table Header: <th>
  • Description: 표를 만들기 위해 사용됩니다. <table>은 표를 시작하며, <tr>은 행, <td>는 데이터 셀, <th>는 헤더 셀을 나타냅니다.
  • Example: gpt 도움빌려서 무지개맛 나는 표를 만들어봤습니다. @keyframes이 뭔지 모르겠네요 ㅎㅎ(html에 애니메이션을 적용할 수 있다는게 신기했습니다!)
<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border-collapse: collapse;
            width: 50%;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
        #rainbow-table {
            background: linear-gradient(45deg, #f06, #f90, #ff0, #0f6, #06f, #60f, #f06);
            background-size: 400% 400%;
            animation: rainbow 5s linear infinite;
            color: white;
        }
        
        @keyframes rainbow {
            0% {
                background-position: 0% 50%;
            }
            100% {
                background-position: 100% 50%;
            }
        }
    </style>
</head>
<body>
    <table id="rainbow-table">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
            <th>Header 5</th>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </table>
</body>
</html>

무지개맛 표


HyperLink

  • Tag: <a>
  • Description: 하이퍼링크를 생성하기 위해 사용됩니다. 사용자가 클릭하면 다른 웹 페이지나 문서, 이메일 등으로 이동합니다."href" 속성은 앵커(a) 요소 내에서 하이퍼링크 참조 또는 사용자가 링크를 클릭할 때 연결되는 URL을 지정하는 데 사용됩니다. 
  • "Example: <a href="https://www.example.com">Visit Example</a>"

하이퍼링크 / 눌러도 아무 동작하지 않습니다