안녕하세요! 지난 시간까지는 정보를 보여주는 방법을 배웠다면, 오늘은 사용자의 정보를 입력받는 'Form(폼)'에 대해 알아보겠습니다. 회원가입, 로그인, 설문조사 등이 모두 이 기능을 통해 이루어집니다.

1. Form 태그의 역할과 속성

데이터를 서버로 보내기 위한 바구니 역할을 합니다. 가장 중요한 두 가지 속성이 있습니다.

2. 다양한 입력 양식 (Input Types)

<input> 태그의 type 속성을 바꾸는 것만으로 다양한 모양을 만들 수 있습니다.

• 📝 text / password: 아이디와 비밀번호 입력창
• 🔘 radio / checkbox: 여러 항목 중 하나 또는 여러 개 선택
• 📅 date: 날짜 선택 캘린더 표시
• 🚀 submit: 작성을 마치고 서버로 전송하는 버튼

3. 간단한 문의하기 폼 예제 (실습)

사용자로부터 이름과 메일 수신 동의를 받는 폼 예시입니다. <label> 태그를 사용하면 글자를 클릭해도 입력창이 선택되어 편리합니다.

안녕하세요! 지난 시간에는 검색 엔진이 좋아하는 시맨틱 태그를 배웠습니다. 오늘은 웹페이지에 생동감을 불어넣는 텍스트 강조 기술과 멀티미디어(이미지, 비디오) 삽입 방법을 알아보겠습니다.

1. 텍스트를 풍성하게 만드는 태그

단순한 글자 나열보다 적절한 강조와 목록을 사용하면 가독성이 훨씬 좋아집니다.

2. 멀티미디어 삽입하기 (이미지 & 비디오)

웹사이트에 시각적인 요소를 추가할 때 사용하는 핵심 태그들입니다.

• 🖼️ <img> 태그: 이미지를 표시합니다.
  - src: 이미지 경로 / alt: 이미지가 안 나올 때 보여줄 대체 텍스트(SEO 중요!)
• 🎥 <video> 태그: 동영상을 재생합니다.
  - controls: 재생바 표시 / autoplay: 자동 재생 / loop: 반복 재생

3. 텍스트와 미디어 활용 예제 (실습)

아래 코드를 통해 실제 이미지를 불러오고 비디오를 제어하는 방법을 확인해 보세요.

안녕하세요! 지난 1강에서는 HTML의 기본 구조를 배웠습니다. 오늘은 단순히 화면에 보여주는 것을 넘어, 검색 엔진(네이버, 구글 등)이 내 글을 더 잘 이해하도록 돕는 '시맨틱 태그(Semantic Tags)'를 알아보겠습니다.

1. 시맨틱 태그란 무엇인가요?

'시맨틱(Semantic)'은 '의미론적인'이라는 뜻입니다. 즉, 태그 그 자체에 의미를 담아 브라우저와 검색 로봇에게 이 부분이 어떤 역할을 하는지 명확히 알려주는 태그를 말합니다.

2. 주요 시맨틱 태그의 종류

웹사이트의 주요 구조를 잡을 때 사용하는 대표적인 태그들입니다.

• 🚩 <header>: 사이트의 로고, 제목, 상단 메뉴가 들어가는 영역
• 🧭 <nav>: 다른 페이지로 이동하는 링크 모음 (내비게이션)
• 📄 <main>: 해당 페이지의 가장 핵심적인 본문 내용
• 📰 <article>: 독립적인 포스팅, 뉴스 기사, 블로그 글 영역
• 🧩 <section>: 문서 내의 주제별 구역 나누기
• 👣 <footer>: 저작권 정보, 주소, 하단 메뉴가 들어가는 영역

3. 시맨틱하게 구조 잡기 (실습)

아래 코드는 웹사이트의 표준적인 레이아웃 구조입니다. 단순히 <div>만 쓰는 것보다 훨씬 명확합니다.

안녕하세요! 오늘부터 웹 개발의 가장 기초인 HTML 연재를 시작합니다. 우리가 매일 사용하는 사이트들은 모두 이 HTML이라는 언어로 뼈대가 만들어져 있습니다.

1. 웹사이트의 3요소

웹사이트는 크게 세 가지 기술이 합쳐져 만들어집니다.

• 🏠 HTML (Structure): 건물의 뼈대 (벽, 창문, 문)
• 🎨 CSS (Presentation): 건물의 인테리어 (디자인)
• ⚡ JavaScript (Behavior): 건물의 기능 (동작)

2. 핵심 용어 정리

3. 표준 HTML5 기본 구조

아래는 모든 웹페이지의 시작이 되는 표준 코드입니다. 내용을 확인하고 직접 작성해 보세요!