HTML5 form – 3 (button)

input태그 타입에 속하는 여러가지 button을 간단하게 보기 속성 value 값을 주면 버튼의 이름을 설정할 수 있다. onclick과 같은 이벤트 속성을 이용할 수 있다. 이건 후에 자바스크립트 reset 타입의 경우 같은 form태그 내의 입력받는 값을 초기화 시킬 수 있다.

HTML5 form – 2 (사용자가 option 선택하기)

웹페이지에서 사용자에게 option을 준 후 선택하게 하는 경우가 있다. 여기서는 1. dropdown 리스트 2. radio 3. checkbox 세 종류를 살펴볼 것이다. 참고로 단일 선택은 세 가지 모두 이용해도 상관없지만 다중선택을 할 시에는 checkbox를 이용하는 것이 편리하다. dropown 리스트 저렇게 화살표를 누르면 목록이 나열되어 하나를 선택 후 제출 할 수 있는 것을 말한다. 여기서는 input 태그가 아닌 select>option태그를 이용한다. select에서 name은 …

HTML5 form – 1 (로그인 창 만들기)

HTML에서 입력을 받을 때 사용하는 태그 기본적으로 HTML에서 사용자의 입력을 받을 경우 <form>태그를 중첩 사용하고 속성값 action=”주소”를 이용해 입력받은 데이터를 서버로 보낼 수 있다. 예시 : <form action=”http://localhost/some.php”></form> 그 안에서 이제 입력받을 때의 사용할 태그는 <input>이다. 쉽게 로그인 창에는 아이디 입력과 패스워드 입력과 제출 버튼이 필요하다. 코드는 이러하다 <주의> input은display속성이 block이 아니기 때문에 p태그로 감싸서 일정한 간격을 차지하도록 한다</주의> name은 …

HTML5 기초 : 하이퍼링크와 목록만들기

HTML5에서 하이퍼링크 만들기 태그명은 <a></a> 태그 사이에 적용시키고 싶은 단어를 넣는다. <a>달소짱</a> 속성 href 안에 연결한 주소를 넣는다. <a href=”https://~”>달소짱</a> 속성 target=”_blank”를 추가하면 주소가 열릴 때 새 창으로 열린다. <a href=”https://~” target=”_blank”>달소짱</a> 속성 title을 이용해 미리보기 정보를 제공할 수 있다. <a href=”https://~” target=”_blank” title=”미리보기”>달소짱</a> 간단하게 하이퍼링크가 완성되었다. HTML5에서 목록 만들기 여기서는 태그의 중첩 개념을 알아야 한다. 목록 하나하나는 <li> 태그를 …

CSS 3 Grid로 웹페이지 레이아웃 만들기

CSS으로 레이아웃을 짤 때 display에 여러 속성이 있는데 그 중 Grid가 가장 최근에 나오고 쉽다고 한다. 나도 Flex나 다른거 이리저리 봤는데 그냥 어려워서 패스했다. 먼저 웹페이지 레이아웃을 구상한다. Header에는 웹사이트 제목 / Side에는 카테고리가 들어가는데 보통 Navigator라 함 / Main에 Contents를 넣는데 최신HTML에선 Section과 Article태그를 제공함 / Footer 하단에 사이트 정보나 저작권 정보등을 넣음 이렇게 구상하기로 하면 HTML에서 먼저 div로 …