리을

IT Study

HTML

riul 2023. 1. 27.
반응형

HTML은 하이퍼텍스트 마크업 언어(Hypertext Markup Language)의 약자

웹 페이지를 구성한 표준 마크업 언어이다. 

 

일반적인 HTML 태그는 다음과 같다:

  • <html>: HTML 문서의 루트 
  • <head>: 제목 및 메타데이터
  • <body>: 텍스트, 이미지, 링크 등 
  • <header>: 소개 콘텐츠 또는 탐색 링크 등
  • <nav>: 탐색 링크가 포함된 페이지의 섹션
  • <main>: 문서의 주요 내용
  • <article>: 문서에 포함된 자체 구성
  • <section>: 내용의 주제 그룹
  • <footer>: 문서 또는 섹션의 바닥글 컨테이너
  • <p>: 텍스트 단락
  • <a>: 하이퍼링크
  • <img>: 이미지
  • <ul>: 순서 없는 목록
  • <ol>: 순서 목록
  • <li>: 목록 항목 구성요소
  • <form>: 사용자 입력을 위한 폼
  • <input>: 사용자 입력에 대한 박스
  • <label>: 사용자 입력박스에 대한 캡션
  • <select>: 드롭다운 목록
  • <option>: 드롭다운 목록의 옵션
  • <textarea>: 다중 줄 일반 텍스트 편집박스

기본 구성

DOCTYPE 이 최상단에 선언되고

head 안쪽으로 title,  meta정보,  link,  script

body 밑에 header,  main, footer

등으로 구성된다.

 

<!DOCTYPE html> : 문서가 HTML5 문서임을 선언한다.

<base.href="도메인/경로/"> :  문서의 모든 상대 URL에 대한 기본 URL을 지정하는 데 사용된다.

공백 및 등호(=) 사용시 주의사항 :  "=" 양쪽으로 공백이 없는 것이 읽기 쉽고 엔티티를 더 잘 그룹화한다.
</link rel="stylesheet" href="styles.css">

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <base href="https://www.example.com/">
  <meta charset="UTF-8">
  <meta name="description" content="A website about my interests and hobbies">
  <meta name="keywords" content="html, css, javascript, web development">
  <link rel="stylesheet" href="css/styles.css">
  <script src="js/script.js"></script>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Welcome to my website!</h1>
    <p>Here you will find information about my interests and hobbies.</p>
  </main>
  <footer>
    <p>Copyright © 2021 My Website</p>
  </footer>
</body>
</html>

 

div 태그

HTML의 div 태그는 다른 block타입 컨트롤로 사용시 기본 줄바뀜이 된다.

다른 요소를 위한 컨테이너를 만들고 CSS를 사용하여 해당 요소에 스타일이나 레이아웃을 적용하는 데 사용한다.

<div id="container">
    <p>id 스타일</p>
    <img src="image.jpg" alt="An image">
    <a href="https://www.naver.com">A link</a>
</div>


#container{
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}


let div = document.getElementById("container");
console.log(div.innerHTML);

 

img 태그

HTML의 <img> 태그는 웹 페이지에 이미지를  표시하기위해 사용되며 src속성에 이미지 파일의 URL을 지정한다.

<img src="image.jpg" alt="A description of the image" width="200" height="100">

src 속성은 표시할 이미지 파일의 URL인 "image.jpg"로 설정됩니다. alt 속성은 이미지의 텍스트 설명을 제공하는 데 사용되며, 이는 접근성 및 SEO 목적에 중요하다.
또한 width 및 height 특성을 사용하여 이미지의 너비와 높이를 설정할 수 있다.

 

p , br 태그

 <p> 태그는 텍스트 단락을 만드는 데 사용되며 문단의 텍스트 내용은 여는 <p> 태그와 닫는 </p> 태그 사이에 배치한다.

<p class="paragraph">This is a paragraph of text.</p>
<p>This is the first line of text.<br><br>This is the second line of text.</p>

 

<link> 태그

 <link> 태그는 외부 CSS 스타일시트에 링크하는 데 사용된다. href 속성은 CSS 파일의 위치를 지정하는 데 사용되며, rel 속성은 HTML 문서와 링크된 파일(이 경우 "스타일시트") 사이의 관계를 정의하는 데 사용된다.

예를 들어, 다음 코드는 HTML 문서와 같은 디렉터리에 있는 "styles.css"라는 이름의 CSS 파일로 링크된다:

<link href="styles.css" rel="stylesheet">

 

<UL> <LI> 태그 - 리스팅

 <ul> 태그와 <li> 태그는 정렬되지 않은 목록을 만드는 데 사용된다.

<ul> 태그는 정렬되지 않은 목록 전체를 나타내며, <li> 태그는 각 개별 목록 항목을 나타낸다.

<ul class="list">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

.list{
  list-style-type: none; /* remove bullet points */
}
.item{
  font-size: 20px;
}

let items = document.getElementsByClassName("item")
console.log(items[0].innerHTML);
console.log(items[1].innerHTML);
console.log(items[2].innerHTML);

이 예에서는 <ul> 태그를 사용하여 정렬되지 않은 목록 컨테이너를 생성하고, <li> 태그를 사용하여 컨테이너 내의 각 목록 항목을 생성한다. 기본적으로 브라우저는 항목에 글머리 기호를 추가한다.

 

table 태그

<table> 태그는 테이블 전체를 나타낸다.
<tr> 태그는 테이블 행을 나타낸다.
<td> 태그는 테이블 셀을 나타낸다.

<table>
  <tr>
    <td>Header 1</td>
    <td>Header 2</td>
    <td>Header 3</td>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
    <td>Row 1, Column 3</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
    <td>Row 2, Column 3</td>
  </tr>
</table>

이렇게 하면 3개의 열과 2개의 행이 있는 테이블이 생성되고 각 셀에는 <td> 태그에 정의된 텍스트가 포함된다.

 


또한 <tr> 내부에서  <th> 태그를 사용하여 테이블 헤더를 만들 수 있다.

<table>
  <tr>
    <th style="width:30%">Header 1</th>
    <th style="width:30%">Header 2</th>
    <th style="width:40%">Header 3</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
    <td>Row 1, Column 3</td>
  </tr>
</table>

 

셀병합 :  rowspan colspan

HTML 테이블의 rowspan 및 colspan 속성을 사용하여 셀을 수평 또는 수직으로 병합할 수 있다.

<table width="600px">
  <tr>
    <td rowspan="2" style="background-color: red;">2 rows</td>
    <td>This is a normal cell</td>
    <td>This is a normal cell</td>
  </tr>
  <tr>
    <td colspan="2" style="background-color: brown;">This is a 2 columns</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
    <td>Row 2, Column 3</td>
  </tr>  
</table>


이렇게 하면 2개의 행과 2개의 열이 있는 테이블이 생성되고, 첫 번째 셀은 2개의 행에 걸쳐 확장되며, 첫 번째 행의 두 번째 셀과 두 번째 행의 첫 번째 셀은 함께 병합되고, 두 번째 행의 두 번째 셀은 2개의 열에 걸쳐 확장된다.

 

<h1>, <h2>, <h3> 태그

 <h1>, <h2>, <h3> 태그는 대중소 제목을 정의하는 데 사용된다.

<h1>Welcome to my website</h1>
<p>This is some text on my website.</p>

<h2>About Us</h2>
<p>Learn more about our company and mission.</p>

<h3>Our Team</h3>
<p>Meet the people behind our success.</p>

 

<a href="..."> 앵커태그

<a> 태그는 다른 웹 페이지 또는 동일한 웹 페이지의 특정 위치에 대한 하이퍼링크를 만드는 데 사용된다.

<a> 태그를 사용하려면 링크의 대상을 지정하는 데 사용되는 href 속성을 사용해야 한다.

<a href="https://www.naver.com">go naver.com</a>

 

<form> <input> <select> <textarea> 태그

<p>1. text박스</p>
<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</form>


<p>2. 라디오박스</p>
<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label>
  
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label>
</form>

<p>3. 패스워드</p>
<form>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password">
</form>

<p>4. readonly</p>
<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" readonly><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>


<p>5. disabled</p>
<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" disabled><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>


<p>6. size</p>
<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4">
</form>


<p>7. maxlength</p>
<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>

<p>8. date</p>
<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
 

<p>9. file</p>
<form>
  <label for="files">Select files:</label>
  <input type="file" id="files" name="files" multiple>
</form>
 
<p>10. pattern</p>
<form>
  <label for="country_code">Country code:</label>
  <input type="text" id="country_code" name="country_code"
  pattern="[A-Za-z]{3}" title="Three letter country code">
</form>

<p>11. phone pattern</p>
<form>
  <label for="phone">Enter a phone number:</label>
  <input type="tel" id="phone" name="phone"
  placeholder="123-45-678"
  pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
 
<p>12. required</p>
<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
</form>
 
<p>13. step</p>
<form>
  <label for="points">Points:</label>
  <input type="number" id="points" name="points" step="3">
</form>
 
<p>14. autofocus</p>
<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" autofocus><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

<p>15. 이미지버튼</p>
<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
 
<p>17. selectbox</p>
<form>
  <label for="color">Select a color:</label>
  <select id="color" name="color">
    <option value="red">Red</option>
    <option value="green" selected>Green</option>
    <option value="blue">Blue</option>
  </select>
</form>

 

selector 선택자 - id(#), class(.)

id 속성은 페이지의 특정 객체에 고유 식별자를 제공하는 데 사용됩니다. ID는 페이지에서 한 번만 사용할 수 있으며 전체 문서에서 고유해야 한다. 객체는 CSS에서 "#" (샾)기호를 사용하여 ID로 선택할 수 있다.

<div id="header"></div>


#header {
  background-color: blue;
}

 

반응형

'IT Study' 카테고리의 다른 글

jQuery 정리  (1) 2023.01.31
자바스크립트 정리  (0) 2023.01.27
CSS 정리  (0) 2023.01.27

댓글

티스토리툴바