[HTML+CSS+자바스크립트] 3장 실무에서 자주 사용하는 HTML 필수 태그 다루기(~127p)

안녕하세요!

<코딩 자율학습 HTML+CSS+자바스크립트> 멘토를 담당하게 된 박브레드입니다.

오늘은 네 번째 날로, HTML 공부 마지막 날입니다!

조금만 더 힘내서 3장 나머지 부분을 공부해 볼까요?

 

오늘 공부할 내용은 다음과 같습니다.

 

🏃 공부할 내용 (82~127p)

6. 폼 구성하기

7. 표 만들기

8. 멀티미디어 설정하기

9. 웹 페이지 구조를 설계하는 시맨틱 태그

10. 태그 종류에 상관없이 사용하는 글로벌 속성

 

6. 폼 구성하기

---

6.1 form 태그

form 태그는 폼 양식을 의미하는 태그입니다.

그래서 HTML의 폼을 구성하는 태그는 모두 form 태그 안에 작성합니다.

<form action="서버 url" method="get 또는 post"></form>

💡 멘토 TIP

여기서 form이란 HTML에서 사용자와 상호작용해서 정보를 입력받고 서버로 전송하기 위한 양식을 의미합니다.

아래 예시와 같이 로그인할 수 있도록 아이디, 비밀번호를 넣는 부분들을 포함하는 부분을 말하겠죠?

 

6.2 input 태그

로그인 페이지의 아이디와 비밀번호처럼 입력받는 요소를 생성할 때는 input 태그를 사용합니다.

input 태그에는 type, name, value 속성이 있는데 type은 필수로 사용해야 되고, name, value는 선택 사용 가능합니다.

<input type="종류" name="이름" value="초깃값">

속성들에 대해선 책에 자세히 나와있으니 책을 참고해 주세요!

 

6.3 label 태그

label 태그는 form 태그 안에서 사용하는 상호작용 요소에 이름을 붙일 때 사용합니다.

label 태그를 사용하면 label 태그만 클릭해도 상호작용 요소를 선택할 수 있습니다.

 

다음과 같이, 아이디라는 텍스트만 클릭해도 input 창에 커서가 놓이는 것을 볼 수 있어요!

 

6.4 fieldset와 legend 태그

form 태그 안에 사용된 다양한 상효작용 요소도 fieldset 태그를 사용해 그룹 지을 수 있습니다. 이 태그로 그룹을 지으면 그룹별로 박스 모양의 테두리가 생깁니다.

 

6.5 textarea 태그

여러 줄의 입력 요소를 생성할 때는 input 태그가 아닌 textarea 태그를 사용하면 됩니다.

<textarea>초깃값</textarea>

 

6.6 select, option, optgroup 태그

select 태그를 사용하면 콤보박스를 생성할 수 있습니다. 콤보박스에 항목 하나를 추가할 때는 option 태그를 사용하고 항목들을 그룹으로 묶고 싶다면 optgroup 태그를 사용할 수 있어요!

나머지 속성들은 책에 자세히 나와있으니 책을 참고해 주세요 :)

 

6.7 button 태그

버튼 요소는 앞에서 살펴봤듯이 input 태그에서 type 속성값을 submit, reset, button으로 지정해 생성할 수 있습니다.

그러나, 별도로 button 태그로 생성할 수도 있습니다.

<button type="종류">버튼 내용</button>

 

6.8 폼 관련 태그에서 사용할 수 있는 추가 속성

다음으로, 폼 관련 태그에서 공통으로 사용할 수 있는 몇 가지 속성에 대해서 알아봅시다!

 

- disabled 속성

disabled 속성은 비활성화하며, input, textarea, select, button 태그에 사용할 수 있습니다.

태그가 비활성화되면 입력 요소는 텍스트를 입력할 수 없고, 목록 상자는 항목을 선택할 수 없는 등 비활성화가 됩니다.

<태그 disabled>

 

- readonly 속성

읽기 전용으로 변경되면 입력 요소에 텍스트를 입력할 수 없게 됩니다.

그러나, 요소를 선택하거나 드래그해서 내용을 복사할 순 있습니다.

<태그 readonly>

 

- maxlength 속성

maxlength 속성은 입력할 수 있는 글자수를 제한합니다.

속성값으로는 숫자를 입력하며 input이나 textarea 태그에서 글자수를 제한할 수 있어요.

<태그 maxlength="숫자">

 

- checked 속성

checked 속성은 요소를 선택한 상태로 표시합니다. 

선택 요소가 있어야 하므로 input 태그의 type 속성값이 checkbox나 radio요소에서만 사용할 수 있습니다.

아직 checkbox나 radio에 대해서 모르셔도 됩니다! 밑에서 배울 예정이에요 :)

<태그 checked>

 

-placeholder 속성

placeholder 속성은 입력 요소에 어떠한 값을 입력하면 되는지 힌트를 적는 용도로 사용합니다.

<input placeholder="힌트">

아래처럼 회색 글씨로 input 창 안에 글씨가 들어가는 것을 볼 수 있죠!

 

7. 표 만들기

---

7.1 table 태그

HTML에서 표를 생성할 때는 table 태그를 사용합니다.

form 태그와 마찬가지로 표 관련 태그는 모두 table 태그 안에서 사용해요!

<table></table>

 

7.2 caption 태그

HTML에서 표를 생성할 때 웹 접근성을 향상하는 방법의 하나로 표 제목을 지정합니다.

    <table>
      <caption>표 제목</caption>
    </table>

 

7.3 tr 태그

tr 태그는 표에서 행을 생성합니다.

    <table>
      <tr></tr>
    </table>

 

7.4 th, td 태그

th 태그와 td 태그는 표에서 열을 생성할 때 사용합니다.

th 태그 같은 경우는 표에서 제목을 나타내는 열을 생성할 때,

td 태그는 표에서 일반적인 데이터를 나타내는 열을 생성할 때 사용돼요!

    <table>
      <tr>
        <th>제목</th>
        <td>내용</td>
      </tr>
    </table>

다음과 같이 코드를 따라 쳐보면 테두리 없는 표 형태가 나오게 됩니다.

 

💡 멘토 TIP

원래 알고 있던 표 형태는 테두리가 있는데, 결과물에는 테두리가 없어서 표 같지가 않죠?

괜찮습니다! 현재는 CSS를 적용하지 않은 상태이기 때문에 테두리가 없는 게 제대로 나온 거예요.

다음 장부터 CSS를 배울 예정이니 조금만 기다려주세요 :)

 

 

7.5 rowspan과 colspan 속성

표 관련 태그에서 행을 의미하는 tr 태그 안에 열을 의미하는 th, td 태그를 사용하면 행과 열이 만나 셀이 생성됩니다! 이렇게 생성된 셀은 병합할 수 있는데, 행과 행을 병합할 때는 rowspan 속성을, 열과 열을 병합할 때는 colspan 속성을 사용합니다.

 

글로만 읽어보면 이해가 되지 않을 수 있으니, 꼭 책에 있는 예제 코드로 따라 쳐보세요!

 

7.6 thead, tfoot, fbody 태그

표에서도 행을 묶어 그룹화할 수 있는데, thead, tfoot, tbody 태그를 사용합니다. thead 태그는 헤더 영역에 해당하는 행을, tfoot 태그는 푸터 영역에 해당하는 행을, tbody 태그는 본문 영역에 해당하는 행을 그룹 지어요.

여기서 주의할 점은 반드시 thead, tfoot, tbody 순서여야 합니다!

    <table>
      <thead>
        <th></th>
      </thead>
      <tfoot>
        <td></td>
      </tfoot>
      <tbody>
        <td></td>
      </tbody>
    </table>

 

 

7.7 col과 colgroup 태그

표에서 열을 그룹화할 때는 col 태그와 colgroup 태그를 사용합니다. col 태그는 하나의 열을 그룹화하고, colgroup 태그는 span 속성과 함께 사용해 2개 이상의 열을 그룹화해요.

<col>
<colgroup span="그룹화할 열의 개수">

 

7.8 scope 속성

scope 속성은 표를 생성할 때 사용할 수 있는 속성 중에서 웹 접근성 향상을 목적으로 사용합니다.

 

8. 멀티미디어 설정하기

---

8.1 audio 태그

HTML5에서 audio 태그가 추가되면서 오디오 파일을 손쉽게 삽입할 수 있게 됐어요.

이미지 링크를 넣었던 것처럼 src에 오디오 링크를 넣어주시면 됩니다!

+ 여기서 controls란 오디오 컨트롤 패널이 웹 브라우저에 노출되도록 하는 것입니다.

<audio src="오디오 파일 경로" controls></audio>

지원 파일 포맷과 미디어 타입은 책을 참고해 주세요.

 

8.2 video 태그

HTML5에서 추가된 또 다른 멀티미디어 태그는 video 태그입니다.

audio 태그와 형식이 비슷하네요~

<video src="비디오 파일 경로" controls></video>

지원 파일 포맷과 미디어 타입은 책을 참고해 주세요.

 

8.3 source 태그

source 태그는 audio 태그와 video 태그에서 리소스의 경로와 미디어 타입을 명시하는 데 사용됩니다. 이 태그는 필수는 아니지만, 되도록 함께 사용해 주는 것이 좋습니다. 그 이유는 웹 브라우저별로 지원하는 포맷과 미디어 타입이 각각 다르기 때문에 웹 접근성을 고려해 source 태그로 다양한 포맷의 멀티미디어를 등록해 두는 방식으로 사용하는 것이 좋아요!

<audio controls>
	<source src="파일 경로" type="미디어 타입">
</audio>
<video controls>
	<source src="파일 경로" type="미디어 타입">
</video>

 

9. 웹 페이지 구조를 설계하는 시맨틱 태그

---

💡 멘토 TIP

들어가기에 앞서, 네이버에서 태그들을 찾아보는 실습을 할 예정입니다!

아래 링크에 접속하셔서 F12 (개발자도구)를 눌러 켜주세요.

태그에 맞게 같이 찾아보면서 글을 읽어주시면 감사하겠습니다 :)

네이버

 

개발자 도구에서 아래 버튼을 누르시고, 원하는 화면을 클릭하시면 화면에 따른 태그가 나오게 돼요.

그럼 이제 다 같이 시맨틱 태그들을 찾아볼까요?

 

9.1 header 태그

header 태그는 웹 페이지에서 헤더 영역을 구분하는 데 사용합니다.

 

9.2 nav 태그

nav 태그는 웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역을 구분하는 데 사용됩니다.

 

9.3 section 태그

section 태그는 웹 페이지에서 논리적으로 관련 있는 내용 영역을 구분할 때 사용합니다.

 

9.4 article 태그

article 태그는 웹 페이지에서 독립적인 영역을 구분할 때 사용합니다.

 

9.5 aside 태그

aside 태그는 웹 페이지 안에서 주력 내용이나 독립적인 내용으로 보기 어려워서 article 태그나 section 태그로 영역을 구분할 수 없을 때 사용합니다.

 

9.6 footer 태그

footer 태그는 웹 페이지에서 푸터 영역을 구분할 때 사용합니다.

 

9.7 main 태그

main 태그는 웹 페이지의 주요 내용을 지정할 때 사용하는 태그입니다.

 

 

10. 태그 종류에 상관없이 사용하는 글로벌 속성

---

- class 속성

class 속성은 요소에 클래스명을 지정할 때 사용합니다. 클래스명은 CSS에서 클래스 선택자로 활용하고, 같은 클래스명은 여러 요소가 중복해서 가질 수 있습니다.

<p class="red-color">...</p>

 

- id 속성

id 속성은 요소에 아이디를 지정할 때 사용됩니다.

<h1 id="title">...</h1>

 

- style 속성

style 속성은 CSS 코드를 인라인으로 작성할 때 사용합니다.

 

- title 속성

title 속성은 요소에 추가 정보를 넣을 때 사용되는데, 마우스를 올리면 툴팁으로 표시됩니다.

 

CSS 파트에서 방금 배운 것들에 대해 더 자세히 배울 예정이라 가볍게 넘어가셔도 됩니다!

 

지금까지 HTML에 대해서 배워봤는데 어떠신가요?

다음 장부터는 CSS를 공부할 예정이라 훨씬 더 재밌을 예정이에요. 기대해도 좋아요😎

 

제가 공부한 내용을 보고 궁금한 점이 있으면 댓글로 남겨주세요.

확인하고 답변해 드리겠습니다.

그럼 내일 다시 만나요!

 

✅ 정리

1. 폼 구성하기
2. 표 만들기
3. 멀티미디어 설정하기
4. 웹 페이지 구조를 설계하는 시맨틱 태그
5. 태그 종류에 상관없이 사용하는 글로벌 속성

 

🤓 1분 퀴즈/마무리/실습 문제/셀프체크

이번 장에서 HTML을 마무리했으니 123p부터 127p까지

마무리 정리하시고 셀프체크 문제 꼭 풀어보시길 바랍니다!

CSS를 공부하기 위해선 HTML을 꼭 마무리해야 됩니다 :)