HTML 태그의 기본 구성 : 시작 태그, 끝 태그, 컨텐츠

HTML 태그의 기본 구성 HTML 태그는 왼쪽 부터 보면 크게 세 가지 부분으로 구성됩니다. 여는 태그, 컨텐츠, 닫는 태그 영역으로 나눌 수 있습니다. 여는 태그 여는 태그는 시작 태그 또는 opening tag로 부릅니다. HTML은 여는 태그로 시작됩니다. 시작 태그에는 해당 태그의 이름을 기입합니다. 여는 태그 부분에서 해당 태그의 시작임을 알립니다. <p> 예를 들어 <p> 여는 … READ MORE

HTML button 및 a태그 사용시 클릭 영역 넓히는 법

HTML <button> 태그 클릭 영역 증가 <button> 태그에 <a> 태그를 삽입했을 때 순서에 따라서 클릭 영역이 달라집니다. <button> 태그 사이에 <a> 태그가 위치할 경우, 클릭 가능 영역은 <a> 태그로 둘러싸인 텍스트 범위만 해당합니다. <button> <a href=”주소”>텍스트</a> </button> 예제 ▷ 반대로 <a> 태그 사이에 <button> 태그를 위치시킬 경우 클릭 영역이 버튼 전체 범위로 확대됩니다. <a href=”주소”> … READ MORE

HTML placeholder 뜻과 색 변경 및 브라우저 호환성

HTML placeholder HTML의 placeholder 속성은 미리 데이터를 입력해놓는 역할을 합니다. value 속성과 기능이 같지만 차이점은 지우지 않아도 자동 삭제된다는 점입니다. <input type = “text” placeholder = “아이디를 입력하세요.”> 첫 줄에 적힌 value의 값인 ‘아이디를 입력하세요.’는 사용자가 지워야합니다. 하지만 두 번째 줄의 placeholder에 적힌 ‘비밀번호를 입력하세요.’ 값은 자동 삭제됩니다. <form action = “”> <label for = … READ MORE

HTML autofocus와 input, button, textarea, select 결합

HTML autofocus autofocus는 <form> 태그와 같이 사용되는 속성입니다. 키보드 커서가 자동으로 autofocus 속성이 삽입된 태그로 이동됩니다. 웹사이트나 앱에서 회원가입이나 로그인을 하다보면 웹페이지에 접속하자 마자 입력창에 커서가 깜빡이는 것을 볼 수 있는 것이 좋은 예가 될 수 있습니다. <input>, <button>, <textarea>, <select> 태그와 같이 사용할 수 있습니다. autofocus 유의점 autofocus 속성은 해당 웹페이지에서 단 한 번만 … READ MORE

HTML input id 속성과 label for 관계

HTML input id id 값은 일반적으로 CSS나 자바스크립트 등에서 선택자로 사용됩니다. 하지만 id 값은 HTML의 <input> 태그에서는 <label> 태그와 연결 할 때도 사용할 수 있습니다. label for <label> 태그는 checkbox, radio와 같은 체크박스 등의 속성에 설명하는 문자를 삽입할 때 사용하는 태그입니다. for 라는 속성을 삽입해서 <input>의 id값과 일치 시키면 체크 박스의 클릭 범위를 증가시킬 수 … READ MORE

HTML input value 속성의 3가지 특징 정리

HTML input value 속성은 text, password 속성에서 초기 미리보기 글자를 설정합니다. button, submit 속성의 버튼 이름을 지정합니다. checkbox, radio 속성에서 서버에 텍스트를 전달할 때 사용됩니다. HTML Value HTML value 속성은 <input> 태그에서 보조적인 속성을 사용됩니다. 초깃값 설정, 버튼 텍스트 변경, 양식 제출 등에 사용됩니다. 초깃값 설정 value의 첫 번째 기능은 초깃값 설정입니다. text나 password 태그 조합에서 초기 … READ MORE

HTML label 태그 for 사용법 및 for 없이 사용법

<label> 태그 정리 <label> 태그사이에 위치한 text, checkbox, radio 등은 클릭 가능 영역이 텍스트로 확장됩니다. <label for=””> 와 <태그 id=””>값은 서로 그룹을 형성합니다. HTML label 태그 <label> 태그는 <input> 태그를 도와주는 역할입니다. <input> 태그가 디자인 하기 힘들 때 <label> 태그로 연결해서 쉽게 디자인하거나 클릭 편의성을 높일 수 있습니다. 예시를 보면 <label> 태그는 단순히 <p> 태그와 … READ MORE

HTML form reset 버튼 생성 및 이름 변경하기

HTML form reset HTML reset 속성은 <input> 태그 등에 입력된 값들을 초기화 하는 기능입니다. 예를 들어 text 입력값에 적힌 데이터가 reset으로 삭제됩니다. reset 속성값은 자동으로 초기화라는 이름의 버튼을 만듭니다. 아래 예시에서 데이터를 입력하고 초기화 버튼을 눌러보면 데이터가 삭제됨을 볼 수 있습니다. <input type=”text”> <br> <input type=”reset”> 예제 ▷ reset 버튼 이름 변경 : value reset 버튼의 … READ MORE

HTML input type image 기능과 alt 속성

HTML input type image <input type = “image”> 는 제출용 버튼을 이미지로 만드는 방법입니다. 이미지 주소의 값이 버튼으로 생성됩니다. image 속성값은 value 속성을 가지지 않습니다. 이미지를 원하는 주소값을 src 속성뒤에 적습니다. 그림을 클릭하면 이미지 버튼 효과로 전송이 됩니다. 물론 현재는 아무 연결이 없으므로 이미지를 클릭하면 404 page가 나옵니다. <input type=”image” src=”주소”> 예제 ▷ alt 대체 … READ MORE

HTML input file 기본 형태와 제출 버튼

HTML input file 요소는 파일 업로드를 할 수 있는 기능입니다. submit과 같은 제출 버튼을 통해서 작성한 파일을 업로드 하는데 같이 사용됩니다. HTML input file <input type = “file”> 속성값은 각종 파일을 업로드할 수 있는 버튼을 생성합니다. 자동으로 파일 선택이라는 메시지와 버튼 등이 생성됩니다. 아무 파일을 업로드해보면 선택된 파일 없음 이라는 메시지가 파일 명으로 바뀌는 것을 알 … READ MORE