[HTML/CSS 기초] 멀티미디어 태그, 폼 태그, 레이아웃 구조, CSS 문법 총정리

1. CMD 도스 명령어 요약

CMD 명령어는 윈도우 운영체제에서 시스템 작업을 자동화하거나 문제를 해결할 때 유용하게 사용됩니다. 대표 명령어는 다음과 같습니다.

• CD, DIR, COPY, DEL: 파일과 디렉터리 관련 작업 수행
• ECHO, PAUSE, REM: 배치 파일에서 사용되는 제어 명령
• TASKLIST, TASKKILL, SHUTDOWN: 시스템 관리
• IPCONFIG, PING, NETSTAT: 네트워크 확인 및 점검

#CMD 명령어

: 윈도우 명령 프롬프트에서 사용되는 시스템 제어 명령어들입니다. 다양한 작업을 명령줄로 빠르게 수행할 수 있습니다.

 

2.  멀티미디어 태그 사용법

1) 이미지 태그 <img>

• src: 이미지 파일 경로
• alt: 이미지가 없을 경우 대체 텍스트
• width, height: 크기 조절

<img src="image.jpg" alt="풍경 사진" width="300">

 

2) 오디오 & 비디오 삽입

<audio src="music.mp3" autoplay loop controls></audio>
<video src="video.mp4" width="300" autoplay loop controls></video>

 

3) 하이퍼링크

<a href="https://example.com" target="_blank">새 창에서 열기</a>

 

#HTML 멀티미디어

: 이미지, 오디오, 비디오 등 다양한 콘텐츠를 삽입할 수 있는 HTML 태그입니다.

 

3. 폼(Form) 태그 사용법

1) 기본 구조

<form action="/submit" method="post">
  <fieldset>
    <legend>회원가입</legend>
    <label>이름: <input type="text" name="name" required></label>
  </fieldset>
</form>

 

2) 기타 입력 태그

• type="checkbox": 다중 선택
• type="radio": 단일 선택
• type="date", "week", "month": 날짜 관련
• type="hidden": 화면에는 표시되지 않지만 값은 전송됨
• placeholder, readonly, required: UX 개선

#HTML 폼태그

: 사용자 입력을 받기 위한 다양한 폼 요소를 제공합니다.

 

4. 블록 vs 인라인 요소

1) 블록 요소

• 줄바꿈이 자동 적용되며, 전체 너비를 차지
• 예: <div>, <p>, <form>, <h1> ~ <h6>, <ul>, <ol>

2) 인라인 요소

• 줄바꿈 없이 필요한 만큼 너비 차지
• 예: <span>, <a>, <img>, <strong>

#블록요소 #인라인요소

: HTML 요소의 기본 배치 방식이며, 스타일과 구조에 큰 영향을 미칩니다.

 

5. iframe 태그 사용법

<iframe src="https://example.com" width="600" height="400"></iframe>

 

다른 웹사이트나 콘텐츠를 내 웹페이지 안에 삽입할 때 사용합니다.

 

#iframe

: 웹페이지 안에 다른 페이지를 삽입할 수 있는 HTML 태그입니다.

 

6. CSS 기초 문법

선택자 {
  속성명: 속성값;
}

 

1) 적용 방법

1. 인라인 스타일: style="color: red"
2. 내부 스타일: <style> 태그 사용
3. 외부 스타일: .css 파일 생성 후 <link>로 연결

2) 스타일 우선순위

1. !important
2. 인라인 스타일
3. ID 선택자 #id
4. 클래스 선택자 .class
5. 태그 선택자 p, div 등

#CSS기초 #스타일적용

: HTML에 디자인을 입히는 언어이며, 선언 방식과 우선순위를 잘 이해해야 합니다.

 

7. CSS 선택자 종류

• 태그 선택자: p { }
• 클래스 선택자: .menu { }
• ID 선택자: #header { }
• 그룹 선택자: h1, h2, p { }

#CSS선택자

: HTML 요소를 선택해 스타일을 적용하는 방법으로, 다양한 선택자 활용이 중요합니다.

 

8. HTML 폼에 사용되는 특수 태그

• <textarea>: 여러 줄 입력창 (cols, rows 속성)
• <select> + <option>: 드롭박스
• <input list=""> + <datalist>: 자동완성 드롭박스
• <button>: 커스터마이징이 가능한 버튼

#HTML입력태그 #폼컨트롤

: 다양한 사용자 입력을 처리하기 위해 사용되는 태그입니다.