HTML

코딩다시시작·2025년 1월 27일

DXschool Web Programming html

LG DX SCHOOL

목록 보기

1/33

HTML/CSS/JS

HTML: 문장의 구조를 만드는 것
CSS: HTML 요소의 스타일을 선택적으로 지정하는데 사용
JS(JavaScript): 웹 브라우저 내 동적 요소 구현

HTML 태그

HTML은 태그들로 이루어짐
태그에 정보가 들어가 있음
태그는 계층적인 구조
태그 = <시작태그> + 하위태그(or Text) + </끝태그>
시작태그 = 이름 + 속성
태그의 속성 = 태그의 세부 정보

HTML 기본 구조

<!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>
    <a href = "https://www.naver.com" alt= "Naver">Naver
    <img src="naver.png"></a>
    <br><!-- <br> is short for "break," and it is simply used to create line breaks in HTML.-->
    <a href="https://www.google.com" alt= "google">Google
    <img src="google.png"></a>
</body>
</html>

out put:

Document Naver

Google

html tag: html 시작과 끝을 알리는 태그
head 태그: 문서의 머리말로 title, meta, script, style 태그 들어감
body 태그: 실제로 원하는 내용이 담김
img src="이미지 경로" alt="대체용 텍스트"
a herf="링크할 주소"> 텍스트 또는 이미지

html 글꼴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Html</title>
</head>
<body>
  <h1> Hello, HTML!</h1>
  <p> this is p tag.</p>
  <h2> this is h2 tag</h2>
  <p>em is <em>emphasize</em> using em tag</p>
  <p>i tage is <i>italic</i> using i tag</p>
</body>
</html>

out put:

Simple Html

Hello, HTML!

this is p tag.

this is h2 tag

em is emphasize using em tag

i tage is italic using i tag

h tag: 문서 제목 표시
p tag: 문단
em tag: 강조하고 싶은 텍스트
i tag: 기울임 적용

html 리스트

<!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>
  <h1> ordered list ex</h1>
  <h2>1. Basic ordered lists</h2>
  <ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ol>
  <h2>2. Nested ordered lists</h2>
  <ol>
    <li>Programming Language
      <ol>
        <li>Python</li>
        <li>JavaScript</li>
        <li>JAVA</li>
      </ol>
    </li>
    <li>DB
      <ol>
        <li>MYSQL</li>
        <li>MongoDB</li>
      </ol>
    </li>
  </ol>
  
  <h2>3. changing ordered style</h2>
  <ol type = "A">
    <li>first object</li>
    <li>second object</li>
    <li>third object</li>
  </ol>
  <h1> DL, DT, DD TAG</h1>
  <h2>1. Default description list</h2>
  <dl>
    <dt>HTML</dt>
    <dd>HTML is a markup language that defines the structure of a web page.</dd>
    <dt>CSS</dt>
    <dd>CSS is styling HTML elements</dd>
    <dt>JavaScript</dt>
    <dd>JavaScript is a programming language that adds dynamic functionality to web pages.</dd>
  </dl>
  <h2>2. Nested Description lists</h2>
  <dl>
    <dt>Programming Language</dt>
    <dd>
      <dl>
        <dt>Python</dt>
        <dd>Python is good</dd>
        <dt>JavaScript</dt>
        <dd>JAVAScript also is good</dd>
      </dl>
    </dd>
    <dt>DB</dt>
    <dd>
      <dl>
        <dt>MYSQL</dt>
        <dd>DBMS system</dd>
        <dt>MongoDB</dt>
        <dd>NoSql</dd>
      </dl>
    </dd>
  </dl>
</body>
</html>

out put:

Document

ordered list ex

1. Basic ordered lists

HTML
CSS
JavaScript

2. Nested ordered lists

Programming Language
1. Python
2. JavaScript
3. JAVA
DB
1. MYSQL
2. MongoDB

3. changing ordered style

first object
second object
third object

DL, DT, DD TAG

1. Default description list

HTML HTML is a markup language that defines the structure of a web page. CSS CSS is styling HTML elements JavaScript JavaScript is a programming language that adds dynamic functionality to web pages.

2. Nested Description lists

Programming Language Python Python is good JavaScript JAVAScript also is good DB MYSQL DBMS system MongoDB NoSql

ol: 순서가 있는 목록을 만들때
li 순서가 있는 목록의 항목
dl: Description List로 설명 목록 정의
dt: Description Term로 정의할 용어나 제목
dd: Description Details로 설명

HTML 표

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table</title>
  <style>
    table{
    	width: 50%;
    	border-collapse: collapse;
    	margin: 20px;
    }
    th, td {
    	border: 1px solid #ddd;
    	padding: 10px;
    	text-align: center;
    }
    th{
    	background-color: #f4f4f4;
    }
    caption {
    	font-weight: bold;
    	margin-bottom: 10px;
    }
    tfoot{
    	background-color: #f9f9f9;
    	font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>Table and Caption</h1>
  <table>
    <caption>2024 IT education curriculum</caption>
    <tr>
      <th>Course name</th>
      <th>Duration</th>
      <th>Enrollment</th>
    </tr>
    <tr>
      <td>HTML/CSS</td>
      <td>4week</td>
      <td>30</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>8week</td>
      <td>20</td>
    </tr>
  </table>
  </body>
  </html>

  
  <h1>thead, tbody, tfoot</h1>
  <table>
    <caption>Q1 2024 sales report</caption>
    <thead>
      <tr>
        <th>name</th>
        <th>volume</th>
        <th>price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>smartphone</td>
        <td>500</td>
        <td>800,000</td>
      </tr>
      <tr>
        <td>tablet</td>
        <td>200</td>
        <td>500,000</td>
      </tr>
      <tr>
        <td>labtop</td>
        <td>150</td>
        <td>1,200,000</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>sum</td>
        <td>850</td>
        <td>-</td>
      </tr>
    </tfoot>
  </table>
   <h1>Rowaspan</h1>
  <table>
    <caption>List of employees by department</caption>
    <thead>
      <tr>
        <th>department</th>
        <th>employees</th>
        <th>role</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="3">strategy</td>
        <td>kim</td>
        <td>manager</td>
      </tr>
      <tr>
        <td>Lee</td>
        <td>staff</td>
      </tr>
      <tr>
        <td>Park</td>
        <td>intern</td>
      </tr>
      <tr>
        <td rowspan="2">Development</td>
        <td>choi</td>
        <td>manager</td>
      </tr>
      <tr>
        <td>Yoo</td>
        <td>staff</td>
      </tr>
    </tbody>
  </table>
      
  <br>
  <br>
  <h1>Colspan</h1>
  <table>
    <caption>Q1 2024 Sales report</caption>
    <thead>
      <tr>
        <th>region</th>
        <th colspan="3">information</th>
      </tr>
      <tr>
        <th></th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Seoul</td>
        <td>1,000</td>
        <td>800</td>
        <td>600</td>
      </tr>
      <tr>
        <td>Busan</td>
        <td>700</td>
        <td>500</td>
        <td>400</td>
      </tr>
      <tr>
        <td>Daegu</td>
        <td>500</td>
        <td>400</td>
        <td>300</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>sum</td>
        <td colspan="3">6,200</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

out:

Table

Table and Caption

2024 IT education curriculum
Course name	Duration	Enrollment
HTML/CSS	4week	30
JavaScript	8week	20

thead, tbody, tfoot

Q1 2024 sales report
name	volume	price
smartphone	500	800,000
tablet	200	500,000
labtop	150	1,200,000
sum	850	-

Rowaspan

List of employees by department
department	employees	role
strategy	kim	manager
Lee	staff
Park	intern
Development	choi	manager
Yoo	staff

Colspan

Q1 2024 Sales report
region	information
	A	B	C
Seoul	1,000	800	600
Busan	700	500	400
Daegu	500	400	300
sum	6,200

table: 표 정의
caption: 표의 제목 정의, table의 첫번째 태그
tr 표의 행 정의
th 표의 헤더 셀 정의
td 표의 데이터 정의
thead: 표의 헤더 부분 정의
tbody: 표의 본문 데이터
tfoot: 표의 마지막 정의, 총합이나 요약 정보
rowspan: 행 병합
colspan: 열 병합

HTML 데이터 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input Data</title>
</head>
<body>
  <h1>user information(Form)</h1>
  <form action="/submit" method="post">
    <label for="name">name: </label>
    <input type="text" id="name" name="name" placeholder = "iinput your name" required><br><br>
    
    <label for="email">email:</label>
    <input type="email" id="email" name="email" placeholder="example@domain.com"  required><br><br>
    <label for="password">password</label>
    <input type="password" id="password" name="password" required><br><br>
    
    <input type="submit" value="submit">
  </form>
  <br><br>
  
  <h1>checkBox and Radio Box</h1>
  <form action="/submit" method="post">
    <label>check the hobby</label><br>
    <input type="checkbox" id="hobby1" name="habby" value="reading">
    <label for="hobby1">reading</label><br>
    <input type="checkbox" id="hobby2" name="habby" value="Traveling">
    <label for="hobby1">Traveling</label><br><br>
    
    <label>check the Gender</label><br>
    <input type="radio" id="male" name="gender" value="male">
    <label for="hobby1">male</label><br>
    <input type="radio" id="female" name="gender" value="female">
    <label for="hobby1">female</label><br><br>
    
    <input type="submit" value="submit">
  </form><br><br>
  <h1> option</h1>
  <form>
    <label for="options">input or check the option: "</label>
    <input list="option" id="optionInput" name="optionInput" placeholder="input your option">
    <datalist id="options">
      <option value="option 1">
      <option value="option 2">
      <option value="option 3">
    </datalist>
  </form>
</body>
</html>

output:

Input Data

user information(Form)

name:

email:

password

checkBox and Radio Box

check the hobby
reading
Traveling

check the Gender
male
female

option

input or check the option: "

<form[속성="속성값"]> 여러 폼 요소 </>
<input type = "submit"|"reset" value = "서버로넘길값">:
- type="submit": 사용자가 폼을 제출할 때 사용됨
- type="reset": 사용자가 폼에 입력한 모든 데이터 초기화
<input type="hidden" name="이름" value="서버로 넘길값":
사용자에게 표시되지 않게 값을 서버로 전송
<input type="text" placeholder=..:
..이 입력 필드 안에 회색으로 나타남
datalist의 option value를 통해 서버로 넘길값 설정

코딩다시시작

gpt로 다시 배우는 개발

다음 포스트

HTML

LG DX SCHOOL

HTML/CSS/JS

HTML 태그

HTML 기본 구조

html 글꼴

Hello, HTML!

this is h2 tag

html 리스트

ordered list ex

1. Basic ordered lists

2. Nested ordered lists

3. changing ordered style

DL, DT, DD TAG

1. Default description list

2. Nested Description lists

HTML 표

Table and Caption

thead, tbody, tfoot

Rowaspan

Colspan

HTML 데이터 입력

user information(Form)

checkBox and Radio Box

option

CSS

0개의 댓글