FE/Web(HTML5, CSS, JS)

[HTML 실습 01] 기본 문서 작성, 표 생성, 셀 병합, th, td

yeahzzz 2022. 3. 19. 20:55

1. 첫번째 실습

*코드 블럭에는 visual Code에서 image 파일 생성 후 image 파일을 넣은 뒤 상대 경로를 사용.

- <head> 사용한 제목

- 텍스트 단락에 줄 바꿈

- <b>,<i> 사용하여 볼드체, 이탈릭체 사용

- 리스트 형식 맞춤(ul, ol)


quiz1

국원 모집

방송에 관심있는 새내기 여러분들 환영합니다

교내 방송국에서 신입생을 대상으로 수습 국원을 모집합니다. 학부나 전공에 상관없습니다.
평소 방송에 관심 있었던 여러 학우들의 지원 바랍니다.

  • 모집 기간 : 3월 2일 ~ 3월 11일
  • 모집 분야 : 아나운서, PD, 엔지니어
  • 지원서 양식은 교내 방송국 홈페이지 공지 게시판에 있습니다.

혜택

  1. 수습기자 활동 중 소정의 활동비 지금
  2. 현장실습 과목 학점 인정
  3. 정기자로 진급하면 장학금 지급
mic
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<head>
    <html lang = "ko"></html>
    <meta charset="UTF-8">
    <title>quiz1</title>
</head>
<body>
    <h1><b>국원 모집</b></h1>
    <h2><b>방송에 관심있는 새내기 여러분들 환영합니다</b></h2>
    <p>
        교내 방송국에서 신입생을 대상으로 수습 국원을 모집합니다. 
        학부나 전공에 상관없습니다. <br>
        평소 방송에 관심 있었던 여러 학우들의 지원 바랍니다.
    </p>
    <ul>
        <li><b>모집 기간 : </b> 3월 2일 ~ 3월 11일 <br></li>
        <li><b>모집 분야 : </b> 아나운서, PD, 엔지니어 <br></li>
        <i>지원서 양식은 교내 방송국 홈페이지 공지 게시판에 있습니다.</i>
    </ul>
    <h3>혜택</h3>
    <ol type="a">
        <li>수습기자 활동 중 소정의 활동비 지금</li>
        <li>현장실습 과목 학점 인정</li>
        <li>정기자로 진급하면 장학금 지급</li>
    </ol>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTbYNqy0HN63Q_Zq7cuN4ZIeVaWqQ8f5VtAKA&usqp=CAU" alt = "mic" >
</body>
</html>
cs

 

2. 두번째 실습

https://www.tablesgenerator.com/html_tables

 

HTML Tables generator – TablesGenerator.com

You can import table data by uploading file in CSV format (Comma Separated Value). Most spreadsheet software, both desktop and online, allows to save tabular data in CSV format — it is usually available in the File menu under the name "Save As..." or "Ex

www.tablesgenerator.com

- 5행 3열 표 생성

- 1~4행 첫 열 합치기

- 5행 2~3열 합치기

- 양식에 해당하는 셀 제목 셀인 <th>로 지정, <b>태그 필요 없이 자동으로 볼드처리 됨.

- 개인 정보에 해당하는 부분 데이터 셀 <td>로 지정, 정보 입력


quiz2

국원 지원서

개인정보 이름 이예지
학과 컴퓨터공학과
학번 202112801
이메일 yyjj0421@kangwon.ac.kr
지원 분야 비디오 디렉터

 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<html lang="ko"><head>
    <meta charset="UTF-8">
    <title>quiz2</title>
    <style>
      table, td, th {
        border:1px solid #ccc;
      }
      td, th {
        padding:10px 20px;
      }
      td:last-child{
        width:200px;
      }
    </style>
  </head>
  <body>
    <h1>국원 지원서</h1>
    <table border="1">
        <thead>
            <tr>
                <th rowspan="4"> <b>개인정보</b></th>
                <th>이름</th>
                <td>이예지</td>
            </tr>
            <tr>
                <th>학과</th>
                <td>컴퓨터공학과</td>
            </tr>
            <tr>
                <th>학번</th>
                <td>202112801</td>
            </tr>
            <tr>
                <th>이메일</th>
                <td>llllyj0421@naver.com</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>지원 분야</th>
                <td colspan="2">비디오 디렉터</td>
            </tr>
        </tbody>
        </table>
  
  </body></html>
cs