HTML input의 다양한 활용

자 이번 시간은 저번에 만들었던 로그인 폼에서 이메일, 성별, 취미 등 세부적인 것들을 좀 더 추가해보려고 한다. 일단 저번 시간에 만들어 뒀던 코드를 가져오겠다. 아이디: 비밀번호:  저번 시간에 했던 내용들을 불러 왔으니 비밀번호 밑에 아이디와 비밀번호와 같은 방식으로 이메일과 이름을 입력받는 칸을 작성해보자. 아이디: 비밀번호: 이메일: 이름: 자 이렇게 추가는 해줬는데 입력창이 정리가 안되어 있어서 보기 불편하다.간..

2024.12.17

HTML의 입력 담당 태그 input과 form 태그

이번 시간은 input 태그를 활용해서 HTML에서 사용자의 입력 값을 받는 방법에 대해 소개하려고 한다.또한 본격적으로 저번 시간에 다뤘던 컨테이너 태그와 전역 속성이 사용될 것 같다. 자 일단 input 태그와 form 태그에 대해 소개하겠다. input 태그- 사용자로부터 값을 입력받을수 있는 대화형 컨드롤(또는 필드)을 라고하며   일반적으로 입력창이라고도 한다. - 기본적으로 인라인 레벨 요소이며 단일 태그이다.  입력요소 input (type 속성)- input은 type에 따라 입력 요소의 형태나 입력데이터 유형등이 달라진다. - 사용 가능한 type은 20가지이며 따로 type을 작성하지 않으면 기본값은 text이다. - type에 따라 값이 달라지기 때문에 적용가능한 추가 속성의 종류도 ..

2024.12.13

HTML의 컨테이너 태그와 전역 속성

이번 시간은 컨테이너 태그와 전역 속성에 대해 "간단하게" 알아보도록 하자.이 두 가지는 워낙 많은 곳에서 쓰이기 때문에 개별적으로 설명하기에는 애매하다.따라서 이번 포스팅은 이런것들이 있구나 하고 넘어가고 잘 기억하고 있다가 다음에 짚고 넘어가겠다. 우선 컨테이너 태그부터 알아보자 컨테이너 태그란 무엇일까?- 컨텐츠나 레이아웃에 아무런 형향을 주지않고 다른 요소 여럿을 묶어   관리하기 편하게 만드는 역할을 하는 태그를 컨테이너 태그라고 한다.- 컨텐츠를 구분하거나 공통적인 스타일을 적용하고자 할때 개발자는 컨테이너를 사용한다. 이 컨테이너 태그는 두 가지 레벨 속성을 갖는데 이제는 익숙한 블럭 레벨 속성과, 인라인 레벨 속성이다. -블럭 레벨(block-level) 요소 : 자기가 속한 영역의 너비를..

2024.12.13

HTML의 링크 태그

이번 시간에는 HTML의 링크 태그에 대해 알아보려고 한다. 링크(link)란?-링크란 현재 문서에서 다른 문서로 이동하는 수단을 의미한다.  링크(anchor)란?- a 태그 요소는  href 속성을 통해 다른 페이지, 전화번호 , 이메일 주소와   그외 다른 url로 연결할 수 있는 링크를 만든다.- anchor는 인라인 요소이며 컨텐츠는 주로 링크의 목적지를 나타낸다.  링크에 대해 간단히 소개 했으니 직접 사용해보자  Html 링크 설명 1.Hello 예제 2.폰트태그 예제 3.목록태그 예제 4.이미지태그 예제 5.비디오태그 예제  다음은 실행 결과다 a 태그는 인라인 속성이기 때문에 옆으로 줄줄이 출력된다. br 태그만 추가해주자  ..

2024.12.13

HTML에서 이미지와 동영상 그려보기

이번 시간은 HTML에서 이미지와 동영상을 그려보려고 한다. 이미지(Image) 태그- img 태그는 이미지를 표시할 때 사용하는 태그이다- 단일 태그로써 닫는 태그는 필요하지 않다.- 컨테츠를 적어주는 대신 표시할 이미지에 대한 정보를 속성으로 지정해야 한다.기본 형태  이게 무슨 말인지 크게 와 닿지 않을 테니 직접 HTML 코드를 작성해보자.하지만 그 전에 이미지 파일이 하나 필요하니 첼시 로고 이미지 다운받아 오겠다. 본인은 첼시 팬 아니다. 설마 이 글을 읽고 따라해볼 사람이 있나 싶지만 이미지 파일은 본인이 원하는 이미지 파일을 사용해도 무방하다. 이미지 파일은 현재 작성하고 있는 파일이 저장되는 폴더에 저장해주는게 가장 이롭다고 생각한다. 자 이제 코드를 작성해보자. ..

2024.12.13