1인칭 학습 시점_웹개발/HTML&CSS
[HTML/CSS 기초] 멀티미디어 태그, 폼 태그, 레이아웃 구조, CSS 문법 총정리
awesong
2024. 7. 3. 17:40
728x90
반응형
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) 적용 방법
- 인라인 스타일: style="color: red"
- 내부 스타일: <style> 태그 사용
- 외부 스타일: .css 파일 생성 후 <link>로 연결
2) 스타일 우선순위
- !important
- 인라인 스타일
- ID 선택자 #id
- 클래스 선택자 .class
- 태그 선택자 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입력태그 #폼컨트롤
: 다양한 사용자 입력을 처리하기 위해 사용되는 태그입니다.
반응형