위와 같은 결과를 만들어보자. 사용된 주요 태그와 속성은 다음과 같다.

태그 설명 비고
<form> 정보를 제출하기 위한 태그들을 포함 autocomplete 속성: 자동완성 여부(기본: on)
<input> 입력을 받는 요소 type 속성을 통해 다양화
<label> input 요소마다의 라벨 for 속성값을 id와 연결. 인풋의 클릭 영역 확장
<button> 버튼 type 속성에 submit(제출), reset(초기화), button(기본 동작 없음)

 

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>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML & CSS 01-08-01</title>
</head>
<body>
 
  <form></form>
    <label for="name">이름</label>
    <input id="name" name="my-name" type="text">
 
    <br><br>
 
    <label for="age">나이</label>
    <input id="age" name="my-age" type="number">
 
    <br><br>
 
    <button type="submit">제출</button>
    <button type="reset">초기화</button>
  </form>
  
</body>
</html>
 cs

 

<form 안의 요소들을 그룹으로 묶기>

태그 설명 비고
<fieldset> 폼 태그 내 입력요소와 라벨들을 그룹화 disabled 속성: 포함된 입력요소 비활성화
<legend> 필드셋 요소의 제목 또는 설명  

 

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
47
48
49
50
51
 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML & CSS 01-08-01</title>
</head>
<body>
  <form>
    <fieldset>
      <legend>반장</legend>
 
      <label for="name">이름</label>
      <input id="name_1" name="name_1" type="text">
      <br><br>
 
      <label for="age">나이</label>
      <input id="age_1" name="age_1" type="number">
 
    </fieldset>
    <br>
 
    <fieldset>
      <legend>부반장</legend>
 
      <label for="name">이름</label>
      <input id="name_2" name="name_2" type="text">
      <br><br>
 
      <label for="age">나이</label>
      <input id="age_2" name="age_2" type="number">
 
    </fieldset>
    <br>
 
    <fieldset form="classForm" disabled>
      <legend>서기</legend>
 
      <label for="name">이름</label>
      <input id="name_3" name="name_3" type="text">
      <br><br>
 
      <label for="age">나이</label>
      <input id="age_3" name="age_3" type="number">
    </fieldset>
  </form>
 
</body>
</html>
 cs

 

Theme. 텍스트 관련 인풋 타입

 

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
 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML & CSS 01-08-01</title>
</head>
<body>
   
  <h1>텍스트 관련 인풋 타입</h1>
 
  <form action="#">
    <label for="txtIp">text</label> <br>
    <input 
      id="txtIp"
      type="text"
      placeholder="5자 이하"
      maxlength="5"
    >
    <br><br>
 
    <label for="pwdIp">password</label> <br>
    <input
      id="pwdIp"
      type="password"
      placeholder="4자 이상"
      minlength="4"
    >
    <br><br>
 
    <label for="srchIp">search</label> <br>
    <input id="srchIp" type="search">
    <br><br>
 
    <label for="tlIp">tel</label> <br>
    <input id="tlIp" type="tel">
    <br><br>
    <button type="submit">제출</button>
  </form>
 
 
</body>
</html>
 cs

< 텍스트 관련 인풋 속성들 >

속성 설명 비고
placeholder 빈 칸에 보이는 안내문  
maxlength 최대 길이  
minlength 최소 길이 위반 시 submit이 거부 됨

 

Theme. 숫자 관련 인풋 타입

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
 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML & CSS 01-08-01</title>
</head>
<body>
  <h1>숫자 관련 인풋 타입</h1>
 
  <form action="#">
    <label for="numIp">number</label> <br>
    <input 
      id="numIp"
      type="number"
      min="0"
      max="10"
    >
    <br><br>
 
    <label for="rgIp">range</label> <br>
    <input
      id="rgIp"
      type="range"
      min="0"
      max="100"
      step="20"
    >
    <br><br>
 
    <label for="dtIp">date</label> <br>
    <input
      id="dtIp"
      type="date"
      min="2020-01-01"
      max="2030-12-31"
    >
    <br><br>
 
  </form>
 
</body>
</html>
 cs

< 숫자 관련 인풋 속성들 >

속성 설명 비고
min 최솟값 date 등 타입마다 형식 다름
max 최댓값 date 등 타입마다 형식 다름
step 간격  

Theme. 체크 관련 인풋 타입

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML & CSS 01-08-01</title>
</head>
<body>
  <h1>체크 관련 인풋 타입</h1>
 
  <form action="#">
    <h2>checkbox</h2>
    <input 
      id="cbIp"
      type="checkbox"
      checked
    >
    <label for="cbIp">유기농</label> <br>
 
    <h2>radio</h2>
    <input
      type="radio"
      name="fruit"
      id="f_apple"
      value="apple"
      checked
    >
    <label for="f_apple">사과</label>
    <input
      type="radio"
      name="fruit"
      id="f_grape"
      value="grape"
    >
    <label for="f_grape">포도</label>
    <input
      type="radio"
      name="fruit"
      id="f_orange"
      value="orange"
    >
    <label for="f_orange">오렌지</label>
    <br>
 
    <input
      type="radio"
      name="vege"
      id="v_carrot"
      value="carrot"
      checked
    >
    <label for="v_carrot">당근</label>
    <input
      type="radio"
      name="vege"
      id="v_tomato"
      value="tomato"
    >
    <label for="v_tomato">토마토</label>
    <input
      type="radio"
      name="vege"
      id="v_eggplant"
      value="eggplant"
    >
    <label for="v_eggplant">가지</label>
 
  </form>
 
</body>
</html>
 cs

 

< 체크 관련 인풋 속성들 >

속성 타입 설명
checked 체크박스 & 라디오 체크됨 여
name 라디오(다른 타입들에서도 사용된다) 옵션들의 그룹으로 사용됨
value 라디오(다른 타입들에서도 사용된다) 각 옵션마다 실제로 넘겨질 값

 

Theme. 기타 인풋 타입

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
 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML & CSS 01-08-01</title>
</head>
<body>
  <h1>기타 인풋 타입</h1>
 
  <form action="#">
    <label for="fileIp">file</label> <br>
    <input 
      id="fileIp"
      type="file"
      accept="image/png, image/jpeg"
      multiple
    >
    <br><br>
 
    <label for="hdnIp">hidden</label> <br>
    <input
      id="hdnIp"
      type="hidden"
    >
  </form>
 
  <br><hr><br>
 
  <form action="#">
    <label for="emlIp">email</label> <br>
    <input 
      id="emlIp"
      type="email"
    >
    <br><br>
 
    <button type="submit">제출</button>
  </form>
 
</body>
</html>
 cs

 

< 파일 인풋 속성들 >

속성 설명
accept 받아들일 수 있는 파일 형식
multiple 여러 파일 업로드 가능 여부

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML & CSS 01-08-01</title>
</head>
<body>
   
  <h1>인풋 요소 공통(대부분) 속성</h1>
 
  <form action="#">
    <label for="valIp">value</label> <br>
    <input 
      id="valIp"
      type="text"
      value="지정됨"
    >
    <br><br>
 
    <label for="afIp">autofocus</label> <br>
    <input 
      id="afIp"
      type="text"
      placeholder="자동 포커스됨"
      autofocus
    >
    <br><br>
 
    <label for="roIp">readonly</label> <br>
    <input 
      id="roIp"
      type="text"
      value="읽기만 가능, 전송됨"
      readonly
    >
    <br><br>
 
    <label for="rqIp">required</label> <br>
    <input 
      id="rqIp"
      type="text"
      placeholder="필수입력!"
      required
    >
    <br><br>
 
    <label for="daIp">disabled</label> <br>
    <input 
      id="daIp"
      type="text"
      placeholder="입력불가, 전송 안됨"
      disabled
    >
    <br><br>
    <input
      type="radio"
      name="fruit"
      id="f_apple"
      value="apple"
      checked
    >
    <label for="f_apple">사과</label>
    <input
      type="radio"
      name="fruit"
      id="f_grape"
      value="grape"
    >
    <label for="f_grape">포도</label>
    <input
      type="radio"
      name="fruit"
      id="f_orange"
      value="orange"
      disabled
    >
    <label for="f_orange">오렌지(품절)</label>
    <br>
 
    <br><br>
 
    <button type="submit">제출</button>
  </form>
</body>
</html>
 cs

Theme.textarea 태그

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML & CSS 01-08-01</title>
</head>
<body>
    <h1>textarea 태그</h1>
 
  <label for="message">메시지를 입력하세요.</label> <br>
  <textarea id="message" cols="64" rows="5"></textarea>
 
</body>
</html>
 cs

< textarea 전용 속성들 >

속성 설명 비고
cols 글자수 단위의 너비 기본값 20
rows 표시되는 줄 수  

cf) <textarea>는 기본값을 value 속성이 아닌 컨텐츠로 입력

 

Theme. 옵션들을 사용하는 태그

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML & CSS 01-08-01</title>
</head>
<body>
  <h1>옵션들을 사용하는 태그</h1>
 
  <h2>select, option 태그</h2>
 
  <label for="lang">언어</label> <br>
  <select id="lang">
    <option value="">-- 언어 선택 --</option>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">자바스크립트</option>
    <option value="ts">타입스크립트</option>
  </select>
 
  <br><br>
 
  <h2>optgroup 태그</h2>
 
  <label for="shopping">쇼핑 목록</label> <br>
  <select id="shopping">
    <optgroup label="과일">
      <option value="f_apl">사과</option>
      <option value="f_grp">포도</option>
      <option value="f_org">오렌지</option>
    </optgroup>
    <optgroup label="채소">
      <option value="v_crt">당근</option>
      <option value="v_tmt">토마토</option>
      <option value="v_ept">가지</option>
    </optgroup>
    <optgroup label="육류">
      <option value="m_bef">소고기</option>
      <option value="m_prk">돼지고기</option>
      <option value="m_ckn">닭고기</option>
    </optgroup>
  </select>
 
  <br><br>
 
  <h2>datalist 태그</h2>
 
  <label for="job">현재 직업</label> <br>
  <input id="job" list="jobs">
  <datalist id="jobs">
    <option value="학생">
    <option value="디자이너">
    <option value="퍼블리셔">
    <option value="개발자">
  </datalist>
 
</body>
</html>
 cs

 

 

출처: 얄팍한 코딩사전 유튜브 및 https://www.yalco.kr/

 

얄코 홈

어려운 프로그래밍 개념들을 쉽게 설명해주는 유튜브 채널 '얄팍한 코딩사전'. 영상에서 다 알려주지 못한 정보들이나 자주 묻는 질문들의 답변들, 예제 코드들을 얄코에서 확인하세요!

www.yalco.kr

 

'HTML, CSS' 카테고리의 다른 글

HTML 기본 정리(1)  (0) 2023.01.29
CSS 기초  (0) 2023.01.27
HTML 기초  (0) 2023.01.26
WEB - HTML & Internet  (0) 2023.01.25

Theme. 제목 및 본문 태그(tag)

태그 or 구문 설명 비고
<h1> ~ <h6> 제목 숫자가 낮을수록 높은 단계
<p> 문단 문단별 줄바꿈이 됨
<br> 줄바꿈(개행) 닫는 태그 필요 없음
<hr> 가로줄 닫는 태그 필요 없음
&nbsp; 공백(스페이스) 스페이스 강제

cf) 주석 처리는 <!-- 주석 처리 -->

 

Theme. 종류와 중요도에 따른 태그

HTML 태그는 정보의 종류를 구분하는 데에만 사용된다. 디자인(스타일) 정보는 CSS로 분리되었다.

1. strong 태그와 b 태그

<b>: 글자를 굵게

<strong>: 글자를 굵게 + 태그로 감싼 부분이 중요하다는 의미를 내포

 

2. i 태그와 em 태그

<i>: 글자를 기울임

<em>: 글자를 기울임 + 강조할 내용임을 명시

 

3. 첨자 태그

<sup>: 위 첨자(지수나 서수에 사용)

<sub>: 아래 첨자(각주, 변수, 화학식에 사용)

 

4. 밑줄 및 취소선 태그

<u>: 이전에는 밑줄을 긋는 용도로 사용됐으나 현재는 철자 오류 등을 강조하는 용도로 사용된다.

<s>: 더 이상 유효하지 않는 정보를 취소선과 함께 나타냄

 

Theme. 인용된 콘텐츠

cf) <,> 입력하기(태그로 인식하지 않도록): &lt;(<), &gt;(>)

 

< 인용문 관련 태그 >

태그 설명 비고
<blockquote> 비교적 긴 인용문에 사용 cite 속성으로 출처 표시
<cite> 저작물의 출처 표기 제목을 반드시 포함
<q> 비교적 짧은 인용문에 사용 cite 속성으로 출처 표시
<mark> 인용문 중 하이라이트 또는 사용자 행동과 연관된 곳 표시  

 

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
47
48
49
50
51
52
53
54
 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../pretty.css">
  <style>
    i { 
      color: lightseagreen;
      font-style: normal;
      font-weight: bold;
      font-size: 0.9em;
    }
  </style>
  <title>HTML & CSS 01-03-02</title>
</head>
<body>
  <h1>인용문 관련 태그</h1>
  <h2>blockquote와 cite 태그</h2>
  <blockquote cite="https://developer.mozilla.org/ko/docs/Web/HTML/Element/blockquote">
    <p>
      HTML &lt;blockquote&gt; 요소는 안쪽의 텍스트가 긴 <mark>인용문</mark>임을 나타냅니다. <br>
      주로 들여쓰기를 한 것으로 그려집니다. (외형을 바꾸는 법은 사용 일람을 참고하세요) <br>
      인용문의 출처 URL은 cite 특성으로, 출처 텍스트는 &lt;cite&gt; 요소로 제공할 수 있습니다.
    </p>
  </blockquote>
  <cite>&lt;blockquote&gt;: 인용 블록 요소</cite> from MDN
 
  <br><br>
 
  <h2>짧은 인용문을 위한 q 태그</h2>
  <p>
    <strong>q</strong> 태그에 대해 MDN 문서는
    <q cite="https://developer.mozilla.org/ko/docs/Web/HTML/Element/q"
    >HTML &lt;q&gt;요소는 둘러싼 텍스트가 짧은 <br> 인라인 <mark>인용문</mark>이라는것을 나타냅니다.</q>
    라고 설명하고 있습니다.
  </p>
 
  <br>
 
  <h2>mark 태그</h2>
  <p>
    본 페이지는 "<mark>인용문</mark>"이란 키워드로 검색한 결과입니다. <br>
    <strong>mark</strong> 태그는 사용자의 행동과 관련 있는 부분<i>(예: 검색 결과)</i>, <br>
    또는 인용문에서 주시해야 할 부분들을 표시합니다.
  </p>
  <p>
    mark 태그 역시 CSS와 병행하여 사용해야 합니다.
  </p>
  
</body>
</html>
 cs

<abbr>: 준말/머릿글자 표시(title 속성으로 원래 형태 표시)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../pretty.css">
  <title>HTML & CSS 01-03-03</title>
</head>
<body>
 
  <h1>abbr 태그로 머리글자 표현하기</h1>
  <p>
    <strong>abbr</strong> 태그를 사용하여
    <abbr title="HyperText Markup Language">HTML</abbr>
    을 표기한 문단입니다. 소스 보기로 코드를 확인해보세요!
  </p>
  
</body>
</html>
 cs

Theme. 나열되는 요소들

<목록을 표현하는 태그들>

태그 설명 비고
<ul> (unordered list) 순서가 없는 목록  
<ol> (ordered list) 순서가 있는 목록 type, start 속성 사용 가능
<li> (list) 목록 아이템 ul,ol 태그의 1촌 자식으로 이 태그만 가능

 

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>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../pretty.css">
  <title>HTML & CSS 01-04-02</title>
</head>
<body>
 
  <h1>수련회 준비물</h1>
  <ul>
    <li>이틀치 옷</li>
    <li>세면도구</li>
    <li>수건</li>
    <li>학습도구
      <ul>
        <li>노트북</li>
        <li>필기구</li>
        <li>교재</li>
      </ul>
    </li>
  </ul>
 
</body>
</html>
 cs

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
 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
 
  <title>HTML & CSS 01-04-03</title>
</head>
<body>
 
  <main>
    <section class="result">
 
      <h1>계란볶음밥 만들기</h1>
      <ol type="1" start="0">
        <li>재료 준비
          <ul>
            <li>밥</li>
            <li>계란</li>
            <li>파</li>
            <li>간장</li>
          </ul>
        </li>
        <li>파를 기름에 볶기</li>
        <li>밥 넣고 볶기</li>
        <li>계란을 넣고 스크램블</li>
        <li>간장을 넣고 마저 볶아 완성</li>
      </ol>
 
 
</body>
</html>
 cs

 

<용어의 정의 나열하기>

 

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
 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML & CSS 01-04-05</title>
</head>
<body>
 
  <dl>
    
    <dt>프로그래밍</dt>
    <dd>컴퓨터 프로그램을 작성하는 일</dd>
 
    <dt>넓이</dt>
    <dt>광</dt>
    <dt>면적</dt>
    <dd>일정한 평면에 걸쳐 있는 공간이나 범위의 크기</dd>
 
    <dt>사과</dt>
    <dd>사과나무의 열매</dd>
    <dd>자기의 잘못을 인정하고 용서를 빎</dd>
 
  </dl>
  
</body>
</html>
 cs

 

 

Theme. 이미지 넣기

먼저, 형식은 다음과 같다.

<img src="(이미지 파일 경로)" alt="(대체 텍스트)" title="(툴팁 텍스트)">

속성 설명 비고
src 원본파일 경로 절대경로 또는 상대경로
alt 대체 텍스트 스크린 리더, 원본파일 무효
title 툴팁 alt의 대체제나 반복이 되어서는 안됨
width 너비 픽셀 단위의 정수
height 높이 픽셀 단위의 정수

절대 경로: 경로(주소 등)를 자세히 모두 적는 것

상대 경로: ./ 사용(같은 폴더에 있는 경우), ../ 사용(다른 폴더에 있는 경우)

 

Theme. 표 사용하기

태그 설명 비고
<table> 테이블  
<caption> 표 설명 또는 제목 선택 사항
<tr> 테이블의 행  
<td> 테이블의 데이터 셀  

 

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
 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://showcases.yalco.kr/html-css/01-06/table.css">
  <title>HTML & CSS 01-06-02</title>
</head>
<body>
 
  <table>
    <caption>1에서 9까지의 숫자들</caption>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </table>
  
</body>
</html>
 cs

태그 설명 비고
<thead> 테이블의 헤더 부분 <tbody>앞에 와야 함
<tbody> 테이블의 본문 본 내용을 담음
<tfoot> 테이블의 푸터 부분 <tbody> 뒤에 와야 함
<th> 열 또는 행의 헤더 scope 속성으로 row, col 중 선택

 

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
47
48
49
50
51
52
53
 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://showcases.yalco.kr/html-css/01-06/table.css">
  <title>HTML & CSS 01-06-02</title>
</head>
<body>
  <table>
        <caption>웹개발 공부 기록</caption>
        <thead>
            <tr>
                <th scope="col">과목</th>
                <th scope="col">월</th>
                <th scope="col">화</th>
                <th scope="col">수</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">HTML</th>
                <td>60분</td>
                <td>60분</td>
                <td>0분</td>
            </tr>
            <tr>
                <th scope="row">CSS</th>
                <td>0분</td>
                <td>30분</td>
                <td>60분</td>
            </tr>
            <tr>
                <th scope="row">JS</th>
                <td>0분</td>
                <td>0분</td>
                <td>60분</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th scope="row">총 시간</th>
                <td>60분</td>
                <td>90분</td>
                <td>120분</td>
            </tr>
        </tfoot>
    </table>
  
</body>
</html>
 cs

 

 

추가적으로 속성으로써,

colspan: 열 병합, rowspan: 행 병합 을 사용할 수 있다.

 

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
 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://showcases.yalco.kr/html-css/01-06/table.css">
  <title>HTML & CSS 01-06-02</title>
</head>
<body>
  <table>
        <tr>
            <td>1</td>
            <td colspan="2">2</td>
            <td>1</td>
        </tr>
        <tr>
            <td rowspan="3">3</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td colspan="2" rowspan="2">4</td>
        </tr>
        <tr>
            <td>1</td>
        </tr>
    </table>
 
  
</body>
</html>
 cs
태그 설명 비고
<colgroup> 표에 열을 묶어서 속성 부여 <caption>보다 뒤, 그 외 요소보다 앞에 와야 함
<col> 열의 묶음 span 속성으로 열 수 지정

 

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://showcases.yalco.kr/html-css/01-06/table.css">
  <title>HTML & CSS 01-06-02</title>
</head>
<body>
  <table>
        <colgroup>
            <col class="weekend">
            <col span="5">
            <col class="weekend">
        </colgroup>
        <thead>
            <tr>
                <th scope="col">일</th>
                <th scope="col">월</th>
                <th scope="col">화</th>
                <th scope="col">수</th>
                <th scope="col">목</th>
                <th scope="col">금</th>
                <th scope="col">토</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
            </tr>
            <tr>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
            </tr>
            <tr>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
            </tr>
            <tr>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
            </tr>
        </tbody>
    </table>
 
  
</body>
</html>
 cs

 

 

Theme. 다른 곳으로의 링크

 

먼저 작성된 코드를 보자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML & CSS 01-07-04</title>
</head>
<body>
 
  <h1>Contacts</h1>
  <address>
    웹사이트 주소: <a href="https://www.yalco.kr">yalco.kr</a> <br>
    오피스: 전산시 개발구 코딩동 123번길 45 <br>
    전화 <a href="tel:010-1234-5678">010-1234-5678</a> <br>
    이메일: <a href="mailto:yalco@kakao.com">yalco@kakao.com</a>
  </address>
  
</body>
</html>
 cs

하나씩 그 형식에 대해 살펴보면,

먼저, 링크를 위한 <a> 태그의 형식은 <a href="(연결할 주소)" target="(링크를 열 곳 옵션)"> 이다.

target 속성값 설명 비고
_self 현재 창에서 열리도록 기본값
_blank 새 창에서 열리도록 텍스트나 내부 이미지의 alt 등으로의 명시 필요

cf)

href의 값의 앞부분에 tel: 을 사용하면 전화번호에서 바로 연결되도록 할 수 있고, mailto: 를 사용하면 이메일 링크로 넘어가진다.

<address>: 주소 및 연락처 정보를 포함

 

 

출처: 얄팍한 코딩사전 유튜브와 https://www.yalco.kr/

 

얄코 홈

어려운 프로그래밍 개념들을 쉽게 설명해주는 유튜브 채널 '얄팍한 코딩사전'. 영상에서 다 알려주지 못한 정보들이나 자주 묻는 질문들의 답변들, 예제 코드들을 얄코에서 확인하세요!

www.yalco.kr

 

'HTML, CSS' 카테고리의 다른 글

HTML 기본 정리(2) - 사용자로부터 입력받기  (0) 2023.01.29
CSS 기초  (0) 2023.01.27
HTML 기초  (0) 2023.01.26
WEB - HTML & Internet  (0) 2023.01.25

CSS라는 언어가 도입된 이유
1. HTML이 정보에 전념할 수 있도록 HTML에서 디자인에 대한 기능을 CSS가 뺏어온 것
2. CSS를 통해 웹페이지를 디자인하는 것이 HTML을 통해 디자인하는 것보다 효율적이다.

 

Theme. Web page에 CSS를 삽입하는 2가지 방법(CSS 사용 형식)

1. <style> 태그의 사용(internal 방식) ---- 가장 많이 사용

2. style 속성의 사용(inline 방식)

 

각각에 대해 알아보자.

 

1. <style> 태그 사용

 기존의 html 기본 태그들 중 <head>태그 안에 <style> 태그를 추가하고, 

<style>태그 안에서 3가지의 선택자를 이용하여 선택자(selector)가 가리키는 대상에 대해 일정한 효과(declaration)을 주게 된다. 

그 3가지 선택자는 id 선택자(#id), class 선택자(.class), 태그 선택자이다.

 

먼저, 아래를 살펴보자.

<style> 태그 안에 아래와 같은 코드를 작성할 수 있다.

<style>

a {

    color : red;

}

</style>

selector는 선택자이다. 위 그림에서 선택자는 Web page내 모든 a 태그를 선택해주는 기능을 한다.

declaration는 선택자가 선택한 것들에 대해 줄 효과를 적는 부분이다. 

 

id 선택자의 경우 <style> 태그 안에서

#id명 {

    주고 싶은 효과

}

 를 작성하고, <body> 태그 안의 본문에서는

원하는 태그 안에 id라는 속성을 입력하고 id명을 작성하면 된다.

예를들면, 아래 코드 중 <h2 id="title">대설주의보 서울, 강원, 충북까지 확대</h2>

 

class 선택자의 경우 <style> 태그 안에서

.class명 {

    주고 싶은 효과

}

를 작성하고, <body> 태그 안의 본문에서는

원하느 태그안에 class라고 속성을 입력하고 class명을 작성하면 된다.

예를 들면, 아래 코드 중 <h3 class="content">대설주의보 서울, 강원, 충북까지 확대</h3>

 

이제 간단하게 코드를 작성해보면,

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<style>
p {
    background-color: #00ff00;
    color: rgb(255, 255, 255);
    font-size: 10pt;
}
 
#title {
    color: #ff0000;
    font-size: 50%;
}
 
.content {
    background-color: green;
    color: rgb(255, 255, 0);
}
 
.base {
    border: solid 1px;
    padding: 10px;
    margin: 20px
}
 
p.name {
    color: #0000ff;
}
</style>
 
 
</head>
<body>
 
    <!--  
    CSS: Cascading Style Sheet
    문자의 컬러, 종류, 형태지정
    배경화면컬러, 이미지, 특수처리
    테두리(border) 설정
    
    <형식>
    inline: tag 안에 attribute로 기입 
    internal: head 태그안에 기입 -> 가장 많이 사용!
    external: 외부파일을 읽어들인다
    
    태그접근
    id    #
    class .    -> CSS, 복수 설정이 가능
    name    
-->
 
    <p>행정안전부는 중부지방을 중심으로 눈이 내린 오늘(26일) 오전 11시 기준 항공기가 5편 결항되고 계량기 동파
        피해가 524건 발생했다고 밝혔습니다.</p>
    <p>행정안전부는 중부지방을 중심으로 눈이 내린 오늘(26일) 오전 11시 기준 항공기가 5편 결항되고 계량기 동파
        피해가 524건 발생했다고 밝혔습니다.</p>
 
    <h2 id="title">대설주의보 서울, 강원, 충북까지 확대</h2>
    <h3 class="content">대설주의보 서울, 강원, 충북까지 확대</h3>
 
    <div class="content">오늘 날씨 정말 춥습니다.</div>
    <br>
    <div class="base">현재 국립공원 3곳의 110개 탐방로가 통제 중이며, 항공기는 출발 편 기준 제주공항
        3편, 군산공항 1편, 원주공항 1편 등 총 5편이 결항됐다. 인천과 서울에서 계량기 동파가 524건 발생했고, 경북과 경기
        지역에서 수도관 동파가 16건 있었습니다.</div>
 
    <h3 class="name">대설주의보 서울, 강원, 충북까지 확대</h3>
    <p class="name">대설주의보 서울, 강원, 충북까지 확대</p>
 
 
 
</body>
</html>
 cs

웹 브라우저에서 결과를 확인해보면,

2. style 속성의 사용(inline 방식)

아래 코드와 같이 사용할 수 있다.

<p style="background-color: #0000ff; color: #ffffff">행정안전부는 중부지방을 중심으로 눈이 내린 오늘(26일) 오전 11시 기준 항공기가 5편 결항되고 계량기 동파 피해가 524건 발생했다고 밝혔습니다.</p>

 

 

Theme. 선택자들의 특성

 

class 속성은 여러 개의 값이 들어올 수 있고, 띄어쓰기로 구분한다.

즉, <h1 class = "value1 value2">Hello CSS</h1> 이라고 작성할 수 있다.

이를 이용하면, 하나의 태그에는 여러 개의 속성이 들어올 수 있고, 여러 개의 선택자를 통해서 하나의 태그를 공통으로 제어할 수 있다. 

 

id선택자의 id값은 오직 하나에 대해서만 사용해야 한다. 

 

이런 선택자들을 사용할 때에는 그 효과가 적용되는 데에 우선 순위가 존재함을 알고 주의해야 한다.

선택자 간 영향 우선 순위는 크게 2가지로 나눠서 비교할 수 있다.

 

1. 동일한 선택자의 경우 가장 마지막에 위치한 선택자가 우선적으로 영향을 미친다.

예를들어, <a class = "value1 value2">CSS</a>라는 코드가 <body>태그 안에 존재하고,

<style>태그 안에서

. value1 {

    color: gray;

}

. value2 {

    color: red;

}

라고 적게 되면, 위 <a> 태그로 감싼 CSS라는 단어에는 red 색상이 입혀지게 될 것이다.

하지만,

. value2 {

    color: red;

}

. value1 {

    color: gray;

}

라고 적게 되면, 위 <a> 태그로 감싼 CSS라는 단어에는 gray 색상이 입혀지게 될 것이다.

 

2. 서로 다른 선택자의 경우 우선 순위

 3가지 선택자들 중에 우선적으로 적용되는 선택자와 그렇지 않은 선택자가 존재하며,

 id 선택자 -> class 선택자 -> 태그 선택자 순으로 우선적으로 영향을 미치게 된다.

 

 

 

'HTML, CSS' 카테고리의 다른 글

HTML 기본 정리(2) - 사용자로부터 입력받기  (0) 2023.01.29
HTML 기본 정리(1)  (0) 2023.01.29
HTML 기초  (0) 2023.01.26
WEB - HTML & Internet  (0) 2023.01.25

Theme.HTML 기본 구조

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
 
<head>
<meta charset="UTF-8">
<title></title>
</head>
 
<body>
 
</body>
 
</html>
 cs

기본적인 구조는 위와 같다. 간단하게, <body>태그로 감싸는 부분은 본문에 해당하고, <head>태그로 감싸는 부분은 본문을 설명하는 부분이라고 설명할 수 있다. 그리고 현재 <title>태그 안에 아무 것도 써있지 않지만, chrome을 통해 html 파일을 열게 되면, 탭에 나타나는 제목을 작성할 수 있다. 또한, <!doctype html>은 관용적인 표현으로 이해하면 된다.

<meta charset = "UTF-8"> 태그는 파일을 열 때 한글이 깨지는 것을 해결할 수 있다.

 

Theme. 주요 태그 일부(tag) 

태그들의 효과를 하나하나 나타내기 보다는 먼저 태그들의 효과를 간략하게 정리하고, 이후 종합적으로 한번에 나타내도록 한다. 태그와 그 태그의 효과만을 살펴보면,

<strong> </strong>: 진하게

<u> </u>: 밑줄긋기(underline)

<h1> ~ <h6> </h1> ~ </h6>: 제목 태그(headings)

<br>: 줄 바꾸는 태그(개행)

<p> </p>: 단락을 나타내는(구분해주는) 태그(paragraph)

<pre> </pre>: 브라우저 화면에 작성된 코드가 보이는 그대로 출력되도록 하는 태그(pre-formatted)

 

Theme. attribute, property

1
2
3
4
5
<h1 style="background-color: white; color: blue">Hello Html</h1>
 
<h2 style="color: red; background-color: yellow">Hello Html</h2>
 
<p style="background-color: white">문장태그입니다</p>
 cs

각각의 attribute, property가 어떤 의미를 가지는지는 필요한 기능이 있을 때 그때그때 찾아서 기억하도록 하자.

형식적인 측면에서 우선, 위 코드에서 attribute에 해당하는 것은 style이다.

background-color, color는 property에 해당하고,

white, blue, red, yellow는 property value 또는 value라고 한다.

 

즉, 형식만을 정리하면,

<tag attribute1 = "value1" attribute2 = "value2"> ... </tag>

또는

<tag attribute = "property1 : value1"; property2 : value2"></태그명>

로 나타낼 수 있다.

 

만약, <img> 태그를 사용한다고 하면,

<img src = "image.jpg" width = "100%">등과 같이 작성하여 이미지를 삽입할 수 있다.

 

 

Theme. tag 안의 tag

tag안에 다른 tag를 사용하는 것도 당연히 가능하다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<h1>Hello html</h1>
 
<p>단락</p>
 
<p>단락 <b>태그</b></p> <!-- b는 bold 태그(진하게) -->
 
<p>단락 <strong>태그</strong></p> 
 
<p>단락 <i>태그</i></p> <!-- 글자 기울이기 -->
 
<!-- 글자 위치를 아래쪽, 위쪽에 놓는 태그 -->
<p>단락 <sub>태그</sub></p> 
<p>단락 <sup>태그</sup></p>
 
<p>단락 <br>태그</p>
 cs

Theme. <div>와 <span> tag

<div>와 <span> 태그는 한마디로 "무색무취"와 같은 태그이다. 즉, 태그 자체만으로는 의미가 없으나 그 태그로 object를 묶어준다면, 그 때부터는 의미가 존재한다. 아니 매우 유용한 태그가 된다.

 

두 태그의 차이점을 2가지 정도 말하자면,

1. <div>는 block level element이다. 즉, 화면 전체를 차지한다. 하지만, <span>은 inline element이다.

2. <div>는 줄 바꿈(개행)효과가 있으나, <span>은 그렇지 않다.

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
Hello div(div는 개행있음)
<div>Hello div</div>
<div>Hello div</div>
<br>
Hello span(span은 개행없음)
<span>Hello span</span>
<span>Hello span</span>
<br>
 
<div align="center">
    <font size="6">Hello div</font>
    <h3>I can do it</h3>
</div>
 
<div style="border: solid; border-color: blue; margin-left: 20px; padding-left: 50px; background-color: blue; color:white">
    <h3>국내 자본시장의 고질적인 문제로 꼽히는 '코리아 디스카운트'를 해소하기 위해 금융당국이 외국인 투자자의 투자 문턱을 낮춘다.</h3>
    <p>자본시장에서 30년 넘게 이어져 온 외국인 투자자 등록제가 연내 사라지고, 내년부터는 자산이 10조원 이상인 상장법인의 경우 영문공시도 해야 한다.</p>
    코리아 디스카운트란 한국 기업이 비슷한 골격의 외국 기업보다 주가 측면에서 유독 낮은 평가를 받는 현상을 가리키는 말이다.<br><br>
</div>
 
<div align="center">
    span은 개행 없음
    <span>span one</span>
    <span>span one</span>
</div>
 cs

둘의 차이를 아주 간단하게 살펴보면,

Theme. <a>

HTML이 WEB, Internet과 긴밀한 관련이 있는 만큼, 가장 중요한 태그 중 하나가 <a>이다.

<a>의 효과는 Link!이다. a는 anchor의 앞 글자를 따서 붙인 것이고, "정보의 바다에 정박한다!"라고 이해할 수 있다.

또한 <a>태그와 항상 함께 다닌다고 무방할 정도로 함께하는 attribute인 "href"가 있는데,

hypertext(링크)의 h와 reference(참조)의 ref를 따서 href라고 이름지은 것이다.

 

기본적인 형식은 <a href = "주소">링크 걸고 싶은 문장 등</a>이다.

좀더 부가적인 기능을 더해본다면,

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
    <a href="http://www.naver.com">Naver로 이동</a>
    <br>
 
    <a href="index2.html">index2.html로 이동</a>
    <br>
 
    <a href="http://localhost:9000/sample1/index3.html">sample1의
        index3.html</a>
    <br>
 
    <a href="index1.html" target="_self">index1.html로 이동(현재탭에서 열어라.
        _self가 default 값)</a>
    <br>
 
    <a href="index1.html" target="_blank">index1.html로 이동(새로운 탭에서 열어라)</a>
    <br>
 
    <a href="index1.html" target="_blank" title="hello">
        index1.html로 이동(새로운 탭에서 열어라) 그리고 은 hello이다.
    </a>
    <br>
 
 
 
</body>
</html>
 cs

Theme. 부모와 자식 태그 관계

부모와 자식 태그 관계를 살펴보기 위해 <ul>, <ol>, <li> 태그를 함께 설명한다.

<ol> : ordered list, <li>에순차적으로 번호를 매겨준다.

<ul> : unordered list

<li> : list

이다. 일반적으로 아래와 같이 사용하는데,

이때, <ul>과 <li>의 관계, <ol>과 <li>의 관계가 부모 자식 태그 관계이다.

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
<!--
    list: 목록
    
    ul: unordered(순서 없는) list
    
    ol: ordered(순서 있는) list  
 
-->
 
<ul>
    <li>coffee</li>
    <li>tea</li>
    <li>soda</li>
</ul>
 
<ul style="list-style-type: disc">
    <li>coffee</li>
    <li>tea</li>
    <li>soda</li>
</ul>
 
<ul style="list-style-type: square">
    <li>coffee</li>
    <li>tea</li>
    <li>soda</li>
</ul>
 
<ul style="list-style-type: circle">
    <li>coffee</li>
    <li>tea</li>
    <li>soda</li>
</ul>
 
<ul style="list-style-type: none">
    <li>coffee</li>
    <li>tea</li>
    <li>soda</li>
</ul>
 
<ol>
    <li>커피</li>
    <li>티</li>
    <li>음료수</li>
</ol>
 
<ol type="1">
    <li>커피</li>
    <li>티</li>
    <li>음료수</li>
</ol>
 
<ol start="1">
    <li>커피</li>
    <li>티</li>
    <li>음료수</li>
</ol>
 
<ol start="10">
    <li>커피</li>
    <li>티</li>
    <li>음료수</li>
</ol>
 
<ol type="A">
    <li>커피</li>
    <li>티</li>
    <li>음료수</li>
</ol>
 
<ol type="I">
    <li>커피</li>
    <li>티</li>
    <li>음료수</li>
    <li>커피</li>
    <li>티</li>
    <li>음료수</li>
    <li>커피</li>
    <li>티</li>
    <li>음료수</li>
</ol>
 
<ul>
    <li>커피
        <ol type="1">
            <li>블랙</li>
            <li>밀크</li>
        </ol>
    </li>
    <li>티</li>
    <li>음료수
        <ol type="A">
            <li>콜라</li>
            <li>사이다</li>
        </ol>
    </li>
</ul>
 
 
</body>
</html>
 cs

 

Theme. <table> tag

table을 만들기 위해서 아래와 같이 작성할 수 있다.

<table>
    <thead> --- 생략이 가능
    <tr> --- 하나의 row
        <th>

            레이블 명

        <td>

            값들
<tbody> --- 생략이 가능

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
<!--  
    Table: column(열), row(행)
 
    <table>
    <thead> --- 생략이 가능
    <tr>
        <th>
        <td>
    <tbody> --- 생략이 가능
-->
 
<table>
    <thead>
        <tr>
            <th>번호</th>
            <th>이름</th>
            <th>나이</th>
        </tr>
    <thead>
    
    <tbody>
        <tr>
            <td>1</td>
            <td>홍길동</td>
            <td>24</td>
        </tr>
    </tbody>
</table>
 
<br><br>
 
<table>
        <tr>
            <th>번호</th>
            <th>이름</th>
            <th>나이</th>
        </tr>
 
        <tr>
            <td>1</td>
            <td>홍길동</td>
            <td>24</td>
        </tr>
</table>
 
<br><br>
 
<div align="center">
<table border="1">
        <col width="50"><col width="200"><col width="100">
        <tr>
            <th>번호</th>
            <th>이름</th>
            <th>나이</th>
        </tr>
        <tr>
            <td align="center">1</td>
            <td>홍길동</td>
            <td>24</td>
        </tr>
        <tr>
            <td align="center">2</td>
            <td>성춘향</td>
            <td>16</td>
        </tr>
</table>
</div>
 
<br><br>
 
<table border="1">
        <caption>주소록</caption>
        <col width="50"><col width="200"><col width="100">
        <tr>
            <th>번호</th>
            <th>이름</th>
            <th>나이</th>
            <th colspan="2">전화번호</th>            
            <!-- <th>전화번호</th>     -->        
        </tr>
        <tr>
            <td align="center">1</td>
            <td>홍길동</td>
            <td>24</td>
            <td>123-4567</td>
            <td>010-1111-2222</td>
        </tr>
        <tr>
            <td align="center">2</td>
            <td>성춘향</td>
            <td>16</td>
            <td>235-9876</td>
            <td>010-3333-4444</td>
        </tr>
</table>
 
<br><br>
 
<table border="1">
<tr>
    <th>번호</th>
    <td align="center">1</td>
</tr>
<tr>
    <th>이름</th>
    <td>홍길동</td>
</tr>
<tr>
    <th rowspan="2">전화번호</th>
    <td>123-4567</td>
</tr>
<tr>
    <!-- <th>전화번호</th> -->
    <td>010-1234-5678</td>
</tr>
</table>
 
 
</body>
</html>
 cs

 

결과는,

Theme. <input>과 <form>

위 태그를 설명하면서, 다른 태그들도 함께 알아보자.

아래 두 코드와 결과를 확인해보자.

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
47
48
49
50
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
<!--  
    link: 목적 -> 이동
-->
 
<!--  
    form: link의 목적
          JavaScript에서 접근하기 용이하다
    
    값을 전달할 시에 사용되는 attribute
    id: 현재 페이지에서 하나만 인식. JavaScript에서 접근할 목적이 있다.
    class: JavaScript에서 접근할 목적. CSS에서 주로 사용된다.
    name: (link시) 값을 전달할 목적 
-->
 
<form action="NewFile.jsp">
<input type="hidden" name="mynum" value="336">
아이디:<input type="text" name="id" placeholder="아이디입력"><br>
패스워드:<input type="password" name="pwd"placeholder="패스워드입력"><br>
 
<input type="submit" value="이동">
<input type="reset" value="초기화">
 
</form>
<br><br>
 
<input type="text" placeholder="이름입력">
<br><br>
<input type="button" value="버튼이름">
<br><br>
<input type="date">
<br><br>
<input type="range" max="10" min="0">
<br><br>
<input type="search" placeholder="검색어">
<br><br>
<input type="color" value="#0000ff">
<br><br>
 
 
 
</body>
</html>
 cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<%
String id = request.getParameter("id");
String password = request.getParameter("pwd");
System.out.println("id: " + id);
System.out.println("password: " + password);
 
String mynum = request.getParameter("mynum");
System.out.println("mynum: " + mynum);
%>
 
 cs

html로 작성된 파일을 브라우저에서 열고, <input> 태그를 통해 정보를 입력하면, jsp 파일에 전달된다.

console 에 결과가 나타난 모습

 

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
CheckBox & Radio Button<br>
<!--  
    CheckBox: 독립적. on/off. 취미, 관심대상
    Radio Button: 세트로 구성
    select
-->
<form action="NewFile1.jsp">
<input type="radio" name="car" value="benz" checked="checked">벤츠<br>
<input type="radio" name="car" value="bmw">bmw<br>
<input type="radio" name="car" value="saab">사브<br>
<br>
<input type = "checkbox" name="hobby" value="패션">패션
<input type = "checkbox" name="hobby" value="음악감상">음악감상
<input type = "checkbox" name="hobby" value="게임">게임
<br><br>
 
<select name="sCar" multiple="multiple">
    <option value="벤츠" selected="selected">benz</option>
    <option value="비엠더블유">bmw</option>
    <option value="사브">saab</option>
    <option value="토요타">toyota</option>
 
</select>
<br><br>
 
<input type="submit" value="전송">
</form>
 
<br><br>
 
<textarea rows="10" cols="60" placeholder="자기소개글 작성"></textarea>
 
 
</body>
</html>
 cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String car = request.getParameter("car");
    System.out.println("자동차: " + car);
    
    String[] hobby = request.getParameterValues("hobby");
    
    if (hobby != null) {
        for (String s : hobby) {
            System.out.println(s);
        }
    }
    
    String[] carArr = request.getParameterValues("sCar");
    
    for (String s : carArr) {
        System.out.println(s);
    }
%>
 cs

임의로 값을 입력한 결과는,

 

 

 

끝.

'HTML, CSS' 카테고리의 다른 글

HTML 기본 정리(2) - 사용자로부터 입력받기  (0) 2023.01.29
HTML 기본 정리(1)  (0) 2023.01.29
CSS 기초  (0) 2023.01.27
WEB - HTML & Internet  (0) 2023.01.25

HTML의 태그들을 비롯한 문법적인 내용에 앞서 WEB이 무엇인가에 대해 정리해보고자 한다.

 

Theme. Internet vs WEB

 

비유적으로 얘기해보면,

Internet이 도시라면 WEB은 그 도시 위 건물들 중에 하나이다.

Internet이 도로라면 WEB은 그 도로 위 자동차들 중 하나이다.

Internet이 운영체제라면 WEB은 그 운영체제 위 프로그램들 중 하나이다.

Internet은 다음과 같은 그림처럼 표현할 수 있다.

중앙이 없다. 즉, 각각의 통신장치들이 일종의 전화국과 같은 역할을 수행하고 있다.

수많은 통신장치들이 분산해 전화국과 같은 역할을 하고 있기 때문에 위 그림의 점들 중 하나가 사라져도 나머지 점들이 역할을 수행할 수 있는 통신 시스템이 Internet.

 

Theme. Internet의 동작 원리: 서버와 클라이언트

 

Internet이 동작하기 위해서 컴퓨터는 최소 2대가 필요하다. 즉, 2대의 컴퓨터가 서로 정보를 주고 받을 수 있어야 한다.

인터넷으로 연결된 두 대의 컴퓨터 중 하나는 Web Browser. 다른 하나는 Web Server의 프로그램을 설치되어 있다.

이때, Web Server가 설치된 컴퓨터의 하드 디스크에 index.html이라는 파일이 존재한다고 가정하자. 그리고 그 컴퓨터의 주소는 http://info.cern.ch이다. 

Web Browser에서 주소창에 http://info.cern.ch/index.html이라고  입력하고 실행하면, Internet을 통해 Web Server에 index.html 파일을 요청(request)한다. 

Web Server가 설치된 컴퓨터에서는 그 요청을 받고 하드디스크에서 해당 파일을 찾아 Web Browser가 설치된 컴퓨터에 다시 응답(response)한다.

그 결과 Web Browser가 설치된 컴퓨터에 index.html의 파일에 대한 정보가 도착하게 되고, 이를 Web Browser가 해석하여 화면에 나타낸다.

 

Theme. WEB hosting

 github와 같이 WEB hosting 서비스를 제공하는 원리에 대해 알아보자.

아래와 같이 내 컴퓨터(my)에는 index.html이라는 파일이 존재한다. 이때, 그 파일에 접근하고 싶어하는 visitor가 존재한다.

그리고 서비스를 제공해줄 hosting 업체가 존재한다.

내 컴퓨터의 파일을 hosting 업체에 업로드 하면, WEB hosting에 설치되어 있는 WEB Server를 활성화 하고, 컴퓨터에 도메인을 부여한다.

이제 방문자가 도메인의 주소에 접속하면, Web Server가 해당 파일을 읽고, 방문자에게 파일의 소스 코드 등에 대한 정보를 제공한다. 이후 방문자의 Web Browser에 그 정보가 나타나게 된다.

 

'HTML, CSS' 카테고리의 다른 글

HTML 기본 정리(2) - 사용자로부터 입력받기  (0) 2023.01.29
HTML 기본 정리(1)  (0) 2023.01.29
CSS 기초  (0) 2023.01.27
HTML 기초  (0) 2023.01.26

+ Recent posts

티스토리툴바