HTML/CSS/JAVASCRIPT- 윤도 강사님 강의(250401)(1/3)

주요 내용 요약:

1. HTML과 프로그래밍 언어 차이:
   • HTML은 마크업 언어로, 웹 페이지의 구조를 정의하는 데 사용됩니다. 프로그래밍 언어는 아니며, HTML은 데이터를 처리하거나 동작을 구현하지 않고 웹의 시각적 구조를 만드는 역할을 합니다.
   • 자바스크립트는 프로그래밍 언어로, 웹 페이지에 동적인 기능을 추가합니다.
2. 프론트엔드와 백엔드의 역할:
   • 프론트엔드는 사용자와 직접 상호작용하는 부분을 담당합니다. HTML, CSS, 자바스크립트가 주로 사용됩니다.
   • 백엔드는 서버 측에서 데이터를 처리하고 저장하는 역할을 합니다. 백엔드 개발자는 주로 데이터베이스와 서버를 다루며, 프론트엔드와의 데이터 통신을 담당합니다.
3. 웹 개발에서의 요청과 응답:
   • 프론트엔드는 백엔드에 **요청(Request)**을 보냅니다.
   • 백엔드는 요청을 처리하고, 그 결과를 **응답(Response)**으로 프론트엔드에 전달합니다.
4. HTML과 CSS의 기본 역할:
   • HTML은 웹 페이지의 구조를 정의하고, CSS는 그 구조에 스타일을 추가하는 역할을 합니다.
   • 웹 페이지는 HTML 요소들의 집합으로 이루어져 있습니다.
   • 폼(Form) 요소를 사용하여 사용자로부터 입력을 받으며, 입력된 데이터는 백엔드로 전송됩니다.
5. HTML 요소의 계층 구조:
   • HTML 요소는 부모 요소와 자식 요소로 구분되며, HTML 문서는 계층 구조를 이룹니다.
   • 예를 들어, div 태그 안에 다른 요소들이 포함될 수 있으며, 이때 **div**는 부모 요소이고, 그 안에 포함된 태그들은 자식 요소입니다.
6. HTML5 시멘틱 요소:
   • HTML5에서는 시멘틱 요소(의미론적 요소)들이 추가되었습니다. 예를 들어, header, nav, article, section, footer 등은 각각의 역할에 맞는 의미 있는 태그입니다.
   • **div**와 **span**은 범용 요소로, 시멘틱 요소를 사용할 수 없다면 대신 사용할 수 있습니다.
7. 속성(Attribute):
   • HTML 요소는 속성을 가질 수 있습니다. 예를 들어, **href**는 a 태그에서 링크를 지정하는 속성입니다. **src**는 img 태그에서 이미지 경로를 지정하는 속성입니다.
8. HTML 마크업 구조:
   • HTML 요소는 태그와 컨텐츠로 이루어져 있으며, 여는 태그와 닫는 태그 사이에 내용을 포함합니다.
   • 예를 들어, **<div></div>**와 같은 방식으로 작성됩니다.
9. 아이디와 클래스 선택자:
   • 아이디는 **#id**로 선택하고, 클래스는 **.class**로 선택합니다.
   • 아이디는 페이지에서 한 번만 사용되며, 클래스는 여러 요소에서 재사용이 가능합니다.
10. 웹 접근성:
    • 웹 접근성이란 장애가 있는 사람들도 웹을 이용할 수 있도록 하는 것입니다. alt 속성은 이미지가 표시되지 않거나, 시각 장애인이 스크린 리더로 웹을 사용할 때 대체 텍스트를 제공하기 위해 사용됩니다.
11. HTML5:
    • HTML5에서는 새로운 요소들이 추가되어 웹 페이지의 의미론적인 구성이 가능해졌습니다. 예를 들어, header, footer, article, section 등은 웹 페이지의 구조를 보다 명확하게 구분할 수 있게 해줍니다.
12. 폼 요소:
    • <form> 요소를 사용하여 사용자가 정보를 입력할 수 있도록 하고, 입력된 정보는 백엔드로 전달됩니다.
    • input, textarea, select, button 등 다양한 폼 요소들이 있습니다.
13. 스크립트 예시:
    • HTML 폼을 사용하여 사용자 입력을 받고, 자바스크립트로 입력 검증을 수행합니다.
    • 자바스크립트로 유효성 검사를 통해 아이디, 비밀번호, 이메일 등의 값이 올바른지 확인합니다.

---

정리된 질문 및 답변

• HTML은 프로그래밍 언어인가요?
  • 아니요, HTML은 마크업 언어입니다. 구조를 정의하는 언어로, 데이터를 처리하거나 동작을 구현하지 않습니다.
• 자바스크립트는 프로그래밍 언어인가요?
  • 네, 자바스크립트는 프로그래밍 언어로, 동적인 웹 페이지를 만들 때 사용됩니다.
• 프론트엔드와 백엔드의 차이
  • 프론트엔드: 사용자가 보는 웹 페이지의 구조, 스타일, 동작을 담당합니다 (HTML, CSS, 자바스크립트 사용).
  • 백엔드: 서버 측에서 데이터를 처리하고 관리하는 역할을 합니다. 데이터베이스와 서버를 관리합니다.
• 웹 접근성
  • 웹 접근성은 장애가 있는 사람들도 웹을 사용할 수 있도록 하는 것으로, alt 속성과 같은 요소를 사용하여 접근성을 높입니다.
• 웹 페이지 구조
  • 웹 페이지는 HTML 요소들의 계층 구조로 이루어져 있으며, 부모 요소와 자식 요소가 있습니다.

---

결론

이번 수업에서 다룬 내용은 HTML의 기본 개념부터 프론트엔드와 백엔드의 역할, 웹 접근성까지 다양한 핵심 개념들을 포함하고 있습니다. 이를 통해 웹 개발의 기초를 이해하고, 앞으로 실습을 통해 더욱 깊이 있는 학습을 할 수 있을 것입니다.