Unit3. 회고 [HTML 기초]

성취도

상중하

 

이해도 자가 점검 리스트

Chapter1. 웹 개발 이해하기

• 웹 개발에 있어서 HTML, CSS, JavaScript의 역할을 각각 설명할 수 있다.
• VScode에서 폴더를 열고 새로운 파일을 생성할 수 있다.
• VScode를 이용하여 작성한 HTML, CSS를 브라우저에서 확인할 수 있다.

Chapter2. HTML 기초

• HTML을 CSS를 적용하고, JavaScript로 개발할 수 있게(Programmable) 작성할 수 있다.
• HTML이 "구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다.
• HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다.
• 자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.
  • <div>, <span> 요소가 무엇이고, 어떤 차이가 있는지 설명할 수 있다.
  • <ul>, <ol>, <li> 요소가 무엇이고, 언제 사용해야 하는지 알고 있다.
  • <input> 요소에 type 을 설정하여 다양한 종류의 <input> 요소를 활용할 수 있다.
• 시멘틱 요소를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있다.

Chapter3. HTML 심화

• 만들고 싶은 앱의 와이어프레임을 그려볼 수 있다.
• 와이어프레임을 보고 HTML로 코딩할 수 있다.
• <div> 요소 또는 <section>, <header> 등의 시멘틱 요소로 영역을 구분하는 이유를 이해할 수 있다.
• HTML 문서에서 언제 id 혹은 class를 사용해야 하는지 이해할 수 있다.
• id와 class를 목적에 맞게 사용할 수 있다.
• 사람과 컴퓨터가 읽기 쉬운, 의미 있는(Sementic) HTML 문서를 작성할 수 있다.

---

•  

시맨틱 요소

 

HTML의 최신 버전인 HTML5에서는 시맨틱 웹(semantic web)이 중시되면서 여러 시맨틱 요소(semantic element)가 새롭게 만들어졌습니다. 시맨틱이란 ‘의미가 있는, 의미론적인'이라고 해석할 수 있습니다.

다시 말해, 의미를 가진 요소를 사용하는 방식을 추구하기 시작했습니다.

시맨틱 요소 중 하나인 <h1> 요소를 예로 들어 보겠습니다. 최상위 제목(top level heading)을 표현할 때 사용하는 요소인 <h1> 요소를 사용할 경우, 브라우저가 큰 폰트 사이즈를 적용할 뿐 아니라, 위아래로 간격을 주어 제목처럼 보이도록 합니다. 이와 같은 효과는 <div> 요소, <span> 요소에 CSS 속성을 추가하여 <h1> 요소와 똑같이 보이도록 할 수 있습니다.

그러나 <h1> 요소를 사용할 때처럼 의미적 가치는 없다고 할 수 있습니다.

시맨틱 요소가 사용되기 이전에는 각 영역을 지정하기 위해 <div> 요소를 주로 사용했습니다.

그러다 보니 웹 페이지 하나에 <div> 요소 수십 개가 중첩된 이른바 <div> 지옥이 되는 경우가 많았습니다.

 

---

 

시맨틱 요소를 사용하는 이유

 

개발은 결국 누군가와 함께 협업하여 진행하게 되고, 그 과정에서 서로의 코드를 주고받을 때 시맨틱요소 없이 <div>태그로만 이뤄져있다면 그 요소에 대한 직관성도 떨어지고, 하나하나 부연설명을 해야하는 지경에 이르게 된다.메뉴바나 네비게이션을 만들 때 사용하는 <nav>, 웹사이트 하단에 라이센스나 주소,연락처를 기입할 때 사용하는 <footer>

웹페이지의 상단에 위치하며 사이트의 제목/검생창등을 만들 때 사용하는<header> 등 각 쓰임에 맞게 시맨틱 요소를 사용해준다면 처음 내 코드를 보는 사람도 '아 <footer>태그 안에 있는 요소들은 사이트 아랫쪽에 위치하겠구나' 하며 태그만 보고도 예측이 가능 할 것이다.

 

---

 

시맨틱 요소의 종류

• <article> : 독립적이고 자체 포함된 콘텐츠를 지정합니다.
• <aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.
• <footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.
• <header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.
• <nav> : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에 <ul>을 넣어 목록 형태로 사용합니다.
• <main> : 문서의 주된 콘텐츠를 표시합니다.

 

---

 

Unit3 소감

HTML을 가장 먼저배웠고, 가장 만만하게 봤지만 시맨틱요소가 무엇인지, 어떤상황엔 어떤 태그를 쓰는게 좋은 코드를 작성하는 방법인지에 대해 고민 해 본 적이 없는 것 같다.

그저 CSS를 먹이기위해 <div class=" ">를 남발했고  <article> , <aside> 등 다른 시맨틱요소들은 사용 해 본 적도 없다.

코드를 읽을 줄 알지만, 코드를 작성 할 줄 모르는 내가 많이 부끄러웠다.

항상  불안한 지반위에 개발경험을 쌓아가고 있다고 느꼈고, 이번에 부트캠프를 시작하면서 더 여실히 체감했다.

싱크홀이 생기기 전에 내가 나를 객관적으로 바라 볼 기회가 생겼음에 감사한다.

모든 웹페이지에 뼈대가 되는 HTML에 대해 더 깊은 이해를 가지고 개발을 시작해야겠다는 마음이 생긴다.