DX Data School

HTML

Kim J 2024. 1. 30. 09:26

아직 적응 중,,,, 이런 걸 배웠고 이런 걸 할 수 있다.

표현하고 싶지만 마땅한 방법을 찾지 못하는 중

뭔가 사진도 딱딱 넣고, 이쁘게 정리해서 올리고 싶지만 그러기엔 시간이 부족하다

그래서~! 중간중간 필기하면서 정리했던 내용을 주저리주저리 올리며 기록하기로!

시간이 지남에 따라 기록하는 내용의 퀄리티가 더 좋아질 거라 믿어 의심치 않는다

HTML5로 업데이트되면서 비디오, 오디오 파일을 비슷하게 분류한다. 멀티미디어 삽입할 때<object> 태그를 사용, 웹 문서 안에 다른 문서를 삽입할 때도 사용 가능

<object> , <embed> 둘 다 멀티미디어 삽입할 때 사용하지만 브라우저에 따라 <object>를 지원하지 않는 경우 사용

<object width="너비" height="높이" data="파일"></object>

<embed src="파일 경로" width="너비" height="높이">

<audio> 오디오 삽입 태그

<video> 비디오 삽입 태그

<audio src="파일 경로"></audio>

<video src="파일 경로"></cideo>

하이퍼 링크 삽입하기

<a href='링크주소>텍스트 또는 이미지</a>

href : hyper reference의 약자 '하이퍼 참조'를 의미

참조는 읽기 참조, 쓰기 참조가 존재함

<a href="링크"></a> = 읽기 참조

CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말

R - 읽기 참조

CUD - 쓰기 참조

폼을 만드는 <form> 태그

로그인, 주문 정보창 등등

<form [속성="속성값"]> 여러 폼 요소 </form>

action <form> 태그 안의 내용을 처리할 서버를 지정

<form action="서버">

레이블 <label>

<label>레이블명<input></label>

<label>아이디(6자 이상)<input type="text"></label>

따로 쓰고 연결하기

<label for="user-id">아이디 (6자 이상)</label>

<input type="text" id="user-id">

아이디와 비밀번호 password는 ****표기됨

<label for="user-id">아이디 : </label>

<input type="text" id="user-id" size="10">

<label for="user-pw">비밀번호 : </label>

<input type="password" id="user-pw" size="10">

배송 폼 예제

<ul>

<li>

<label for="user-name">이름</label>

<input type="text" id="user-name">

</li>

<li>

<label for="addr">배송주소</label>

<input type="text" id="addr">

</li>

<li>

<label for="mail">이메일</label>

<input type="email" id="mail">

</li>

<li>

<label for="phone">연락처</label>

<input type="tel" id="phone">

</li>

</ul>

체크박스와 라디오 버튼 만들기

checkbox - 여러 개 선택 가능

radio - 중복체크 불가하게 설정 가능

(name 속성을 사용)

<label><input type="checkbox">김제이</label>

<input type="number" min="0" max="10" value="1">개

<label><input type="checkbox">김김제이</label>

<label><input type="checkbox">김김제제이아</label>

<p></p>

<label><input type="radio" name="gift"> 포장 </label>

<label><input type="radio" name="gift"> 포장안함 </label>

뭐 더 많은데,,, 뭐더라,,,,,,, 

아무튼 단기간에 많은 것을 머릿속에 때려 넣고 있다

단순히 배운다가 아니라 내 것을 만들기 위해

조금 더 노력하자!