[HTML] 부스트코스 edwith - 웹 UI 개발 | 문서의 기본구조 및 태그 공부

edwith에서 '자바스크립트의 시작' 편을 모두 수강한 뒤, 웹 UI 강의로 넘어갔다. 

비록 이미 조금 익숙해진 html과 css를 주로 다루지만 프로젝트 과제도 있기 때문에 남는 것도 있을 것 같고, 무엇보다 내가 쓰던 것만 쓰는 단계에 이르러서 다시 되짚어보고 몰랐던 걸 체크해보는 게 좋겠다고 생각했다. 

 

처음 html과 css를 접하는 분들에게 최적의 강의가 아닐까 생각이 든다. 

차근차근 천천히 알아듣기 쉽게 알려주셔서 이해가 쏙쏙-👩🏻‍💻

 

강의를 통해 배운 html의 기본적인 구조를 다시 정리해본다.

 

<meta charset="UTF-8">

처음 html을 시작할 때, 그저 항상 들어가는 것이니 이전의 강사님이 넘어가셨던 기억이 난다. 

 

meta는 내용없는 빈 태그, charset(character set[캐릭터셋]:문자부호) 속성은 문자의 인코딩 방식을 지정한다. 

"UTF-8"은 가장 기본적인 방식이다. 서버와 관련됨.

 

- html의 태그 : 150여 개

- 자주 쓰이는 태그 : 25개(20~30개)

*쓰다가 필요하거나 모르는 태그는 늘 MDN을 참고하자.

 

📁global attribute(전역 특성) | 모든 HTML에서 공통으로 사용할 수 있는 특성

  📄종류

• class
  클래스를 이용하면 CSS나 JavaScript에서 클래스 선택자나 
  Document.getElementsByClassName()과 같은 메서드를 이용해 특정 요소를 선택하거나 접근 가능
• hidden
  해당 요소가 아직, 또는 더 이상 관련이 없음을 나타내는 불리언 특성
  브라우저는 hidden 특성을 가진 요소를 렌더링 하지 않음
• id
  문서 전체에서 유일해야 하는 고유 식별자(ID)를 정의
  (프래그먼트 식별자를 사용한) 링크, 스크립트, 스타일 적용 시 요소를 식별할 때 사용
  
• 이외에 다양 https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes

전역 특성 - HTML: Hypertext Markup Language | MDN

---

<p>paragraph 단락태그 | 자연스럽게 개행이 이루어짐</p>

<i>italic 태그 | 글자를 기울여서 표현하는 태그, HTML5부터 의미를 가진 태그로 변경됨(기술적인 용어, 외국어 문구, 소설 속 인물의 생각 등)</i>

---

<b>굵게 표현됨</b>

<strong>마찬가지로 굵게 표현되지만, 중요한 내용임을 강조 = 시멘틱 마크업!</strong>

---

<s>100원</s>

<del>100원</del>

 

위의 두 코드는 모두 100원에 취소선이 그려진 형태로 출력된다. 가격의 변동이 있는 사이트에서 쓰인다면 어떤 태그를 써야 할까. 

<del>태그는 문서에서 제거된 텍스트를 의미한다. 따라서 <s>태그 대신에 사용한다는 것은 곧 시멘틱 마크업을 의미한다. 

 

<del>100원</del>
<ins>50원</ins>

 

기존 가격이 100원이고 할인해서 50원이라는 것을 나타낸다. 

<ins>태그는 문서에 새롭게 추가된 텍스트를 의미한다. 

---

<em>글자의 특정부분 강조(시멘틱 마크업)</em>

 

<em>태그 역시 기울인 텍스트로 나타난다. 하지만 더 큰 강세를 뜻한다. 

---

<ul>순서와 상관없이 쓰임
	<li>다</li>
	<li>가</li>
	<li>나</li>
<ul>

<ol>항목 나열 | 순서와 상관있음
	<li>가</li>
	<li>나</li>
	<li>다</li>
</ol>

<ul>태그는 중점으로 나타나지만, <ol>태그는 넘버링으로 나타난다.

<li>태그 안에는 <ul>, <div> 등 중첩이 가능하다. 

---

<dl>용어 설명 | 메타데이터 표시에 유용(키-값)
  <dt>용어 | Name
    <dd>정의 및 설명 | HongGillDong</dd>
  </dt>
</dl>

---

<table>
  <caption>표의 큰제목
    <thead>제목 행 그룹화
      <th>표의 첫번째 행(굵은 글씨)
        <td colspan="2">표의 내용</td>
        <td>표의 내용</td>
      </th>
    </thead>
    <tbody>본문 행 그룹화
      <tr>표의 행
        <td rowspan="2">표의 내용</td>
        <td>표의 내용</td>
      </tr>
    </tbody>
    <tfoot>바닥 행 그룹화
      <tr>표의 행
        <td>표의 내용</td>
        <td>표의 내용</td>
      </tr>
    </tfoot>
 </table>

 

• 표 사이의 여백을 줄이려면 table {border-collapse: collapse;} 
• <th> 요소에 scope="col" 선언하면, 해당 칸이 열의 맨 위에 위치
• <th> 요소에 scope="row" 선언하면, 해당 칸이 열의 맨 앞에 위치
• <colgroup> 표의 열을 묶는 그룹
• 속성 headers와 id의 예)) headers="product" id="smartphone" -> headers: 읽어들이는 정보

---

개인적으로 써보지 않은 태그도 있어서 연습 겸 해봐야겠다.

참고한 해당 사이트, 부스트코스 edwith에는 강의마다 수강생들끼리 자유롭게 의견을 나누는 페이지도 있으니,
모르는 것이 있다면 서로 물어보고 다양한 정보를 얻어보면 좋을 듯 하다!

 

 

 

 

 

 

 

 

 

 

 

https://www.boostcourse.org/web344/lecture/45066

웹 UI 개발