[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 04 웹 문서에 다양한 내용 입력하기

DAY 4

🔖 오늘 읽은 범위 :

🔥01/08(목) 진도표 알림
👉🏻공부 내용: 04 웹 문서에 다양한 내용 입력하기
👉🏻쪽수: 81~106쪽

---

😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**

다양한 HTML 태그 익히기

텍스트 입력하기

제목을 나타낸다. <hn> 태그

• 범위 : <h1> ~ <h6>

💡웹 접근성 고려

• <h1> 태그는 한 페이지에 1개만 사용한다.
• 제목은 h1 부터 h6 까지 순서대로 사용한다.

텍스트 단락 <p> 태그, 줄 바꾸기 <br> 태그

• 텍스트를 적절하게 단락으로 묶어 표시 ⇒ <p>
  • 내용이 길어져서 한 줄로 표시할 수 없을 경우, 자동으로 줄이 바뀜.
• 원하는 위치에서 줄 바꾸기 ⇒ <br>

💡\<br\> 태그와 \<p\> 태그 차이점 - \<br\>을 2번 사용해서 \<p\> 태그 사용하는 것처럼 흉내낼 수 있으나, - **실제 단락이 만들어진 게 아니라서, CSS 를 사용해서 텍스트 단락 스타일 적용하면 문제가 발생한다.** - 텍스트 단락을 만들 때는 \<p\> 태그를 사용해야 한다.

분위기 전환 <hr> 태그

• horizontal = hr
• 가로줄을 그리는 용도.

👉🏻HTML은 태그를 적절하게 사용해서 문서의 구조를 만들거나 각종 요소를 삽입한다.

“브라우저 화면에 어떻게 보이는지는 HTML 에서 고려할 대상이 아니다.”

• CSS 를 사용해 화면에서 감춘다.

인용 <blockquote> 태그

• 인용문 인식 = <blockquote>
• 적용하면 다른 텍스트보다 약간 들여 쓴다.

텍스트 강조, 굵게 표시 <strong>, <b> 태그

• <strong>, <b> 차이점 ⇒ 화면 낭독기 기능에서 차이가 남.
• 경고나 주의 사항처럼 중요한 내용을 강조 ⇒ <strong>
• 키워드처럼 단순히 글자만 굵게 표시 ⇒ <b>
• 화면 낭독기는 <strong> 태그를 사용한 부분을 강조하여 읽음. 중복 적용하면 중요성을 더 강조 할 수 있음.

기울인 텍스트 표시 <em>, <i>, <cite> 태그

• 텍스트를 이탤릭체 표시.
• <em> : emphasis. 문장에서 특정 부분을 강조하고 싶을 때 사용.
• <i> : 마음 속의 생각이나 용어, 관용구 등에 사용. 글꼴 아이콘을 표시하는 용도로 많이 사용. CSS 에서 더 다룰 예정.
• <cite> : 책이나 영화, 블로그 같은 저작물 제목 나타날 때 사용.

텍스트 태그 관련 주의 할 점 ‼️

• 텍스트를 단순히 겉 모습을 꾸미는 것은 태그 보다 CSS 를 사용해야 한다.

종류	설명	예시
<abbr>	줄임말 표시.	<abbr title="Artificial Intelligence">AI</abbr>
<code>	소스 코드 표시.	<code>push()</code> 함수
<del>	삭제된 텍스트로 표시. 취소선 표시.	<del>삭제 된 내용</del>
<ins>	추가된 텍스트로 표시.	<ins>추가된 내용</ins>
<mark>	하이라이트 표시.	<p>This is <mark>mark</mark> text.</p>
<small>	덧붙이는 글, 저작권 등 부가 정보를 작게 표시하는 경우 사용.	<p>Price: $1,000<small>(exclude tex)</small></p>
<sub>	아래 첨자 표시.	<p>The chemical formula for water is H<sub>2</sub>0.</p>
<sup>	위첨자 표시.	<p>E = mc<sup>2</sup></p>

 

목록 만들기

순서 목록 <ol>, <li>태그

• 각 항목이 순서대로 나열한 것.
• 항목 앞에 넘버링이 됨.
• ol = ordered list ; li = list

순서 없는 목록 <ul>, <li> 태그

• 항목의 순서가 중요하지 않을 때 사용.
• 항목 앞에 불릿이 표시 됨.
• ul = unordered list
• 웹 문서에서 메뉴를 만들 때 자주 사용함.

설명 목록 <dl>, <dt>, <dd> 태그

• 설명 목록 = 이름과 값 형태로 구성된 목록.
• dl = description list

표 만들기

• 행, 열, 셀로 구성.
• Row, Column ⇒ Cell

표 만드는 <table>, <caption> 태그

• 표의 시작과 끝 ⇒ <table>, </table>
• 표의 제목 붙이기 ⇒ <table> 아래에 <caption> 태그 사용.
• <tr> ⇒ 행을 만든다.
• <td> ⇒ 셀을 만든다.
• <th> ⇒ 제목 행의 셀을 만든다. 셀 안에 중앙에 표시되고 진하게 표시 됨.

표의 구조 지정 <thead>, <tbody>, <tfoot> 태그

• table’s head, body, foot ⇒ 제목, 본문, 요약
• 화면 상의 변화는 없지만, 웹 접근성을 높인다.
• CSS 적용을 영역별로 할 수 있다.
• 자바스크립트를 이용해 <tbody> 태그만 스크롤 가능하게 할 수 있다.

행, 열을 합치는 rowspan, colspan 속성

• 셀을 합치는 것 ⇒ <td>, <th> 속성
• <td rowspan=”2”>ROW</td>
• <td colspan=”2”>COL</td>
• 개수 만큼 셀을 합친다. 방향만 다를 뿐.

열을 묶는 <col>, <colgroup> 태그

• 특정 열을 지정해서 배경색이나 너비를 변경하게 함.
• <caption> 태그 다음에 써야 한다. 표의 내용이 시작되기 전에 열의 상태를 알려야 하기 때문.
• <colgroup> 은 다수의 열을 묶음.
• <col> 태그는 <calgrop> 내에 사용한다.
• 같은 스타일은 span 속성으로 묶는다.
• 스타일이 없어도 <col> 을 명시한다.

이미지 삽입하기

• <img> 태그 ⇒ 이미지 삽입 태그
• 중요한 속성
  • src : 이미지 파일 경로 지정.
  • alt : 이미지를 대신해서 읽어줄 텍스트.
  • width, height : 이미지 크기 지정.
• src 속성 = 이미지 파일 경로
  • html 페이지와 같은 폴더라면, 이미지 파일 이름만 적으면 됨.
• alt 속성 = 이미지에 대한 텍스트 설명문
  • 이미지를 제대로 표시 못할 경우 이미지 대신 표시됨.
• 이미지 크기 조절 속성
  • 1개만 설정하면 나머지는 비율을 자동 계산함.
  • 속성 단위 : px, % ; 픽셀은 숫자로만 입력.

웹 요소에 설명 글 붙이기 <figure>, <figcaption>

• <figure> : 독립된 콘텐츠. 문서의 내용과 구별되는 요소라는 의미로 붙인다.
• 주로 <figcaption> 과 함께 사용해 설명 글을 추가할 때 사용함.

🤔 **오늘의 파트에 대한 소감 (매우 주관적주의)**

• 표 관련 태그는 조금 헷갈려서 다시 볼 필요가 있음.
• 태그는 문서 구조에 대한 것이라는 점을 잊지 말 것.

---

🤟소감 3줄 요약

• 오늘은 시간이 부족하고 내용이 많아서 힘들었음…