Programming/HTML5 & CSS3 (37) 썸네일형 리스트형 [HTML] 자바스크립트를 대신하는 input 태그 속성들 HTML5에서는 기존에 자바스크립트로 구현해야했던 기능들을 input 태그의 속성들로 간단하게 구현할 수 있습니다. 예를 들어, 폼을 작성한 후 제출할 때 작성되지않은 빈칸이 있으면 경고 메시지를 띄우는 경우 이전에는 자바스크립트로 해당 이벤트를 구현해야했으나 HTML5에서는 태그에 required 속성을 추가하는 것만으로도 해당 이벤트를 쉽게 구현할 수 있습니다. 이 글에서는 자바스크립트를 대신하는 input 태그 속성들에 대해 알아보겠습니다. 번호 속성 설명 1 placeholder 힌트 표시 2 readonly 읽기 전용으로 지정 3 required 필수 영역으로 지정 4 min 최소값 5 max 최대값 6 step 숫자 간격 7 maxLength 최대 글자 수 지정 8 autocomplete 자동.. [HTML] form - 글, 버튼 삽입하기 폼을 만들다 보면 장문의 글이나 버튼을 삽입해야하는 경우가 발생합니다. HTML5에서는 태그를 통해 글을 태그를 통해 버튼을 삽입할 수 있습니다. 1. 태그는 텍스트를 삽입할 때 사용합니다. 텍스트 상자와 비슷하지만 텍스트 상자와는 달리 장문의 글을 삽입할 때 사용합니다. 해당 태그는 형태로 사용합니다. 태그에는 cols, rows, name 속성이 있습니다. cols와 rows는 각각 태그로 생성되는 텍스트 입력 상자의 영역의 가로와 세로 길이를 의미합니다. cols의 경우 가로 길이를 문자 단위를 기준으로 판단하며 지정되어있는 cols의 크기를 넘어간다면 자동으로 줄바꿈이됩니다. rows의 경우 세로 길이를 텍스트의 줄 수를 기준으로 판단하며 지정되어있는 rows의 크기를 넘어간다면 오른쪽에 스크롤바.. [HTML] 드롭다운 목록 만드는 법 드롭다운 목록을 만들기 위해서는 와 태그를 사용해야합니다. 먼저, 태그를 사용해 드롭다운의 목록의 시작과 끝을 지정합니다. 그리고 태그를 사용해 드롭다운 목록의 선택지를 입력해줍니다. 이때, 태그는 반드시 태그 블록 사이에 위치합니다. 태그의 경우 주의하셔야할 점이 하나 더 있습니다. 태그에는 value라는 속성이 있습니다. 이는 드롭다운 목록에서 선택된 항목의 값을 서버로 넘겨줄 때 필요합니다. 예를 들어, one은 one이라는 항목이 선택되었을 때 1이라는 값을 서버로 전송한다는 의미입니다. one two three four five 위의 코드를 실행시키면 아래의 사진과 같은 드롭다운 목록이 나타나는 것을 확인할 수 있습니다. 이는 가장 기본적인 드롭다운 목록의 형태입니다. 개발자는 와 태그의 속성을.. [HTML] input 태그 사용해 사용자 입력 받기 웹에서 사용자로부터 정보를 입력받기 위해서는 태그를 사용해야합니다. 태그의 type 속성 값에 따라 입력받을 수 있는 요소들이 달라집니다. 예를들어, 텍스트를 입력받기 위해서는 text를 색상을 입력받기 위해서는 color 값을 사용합니다. 태그는 보통 태그와 함께 사용하며 태그를 사용해 입력받은 정보를 태그를 통해 서버에 전송합니다. 그 외의 값들은 아래의 표를 참조해주시면 됩니다. 실습번호 type 속성 설명 1 text 텍스트 2 radio 라디오 버튼 3 checkbox 2개 이상 선택 가능한 체크 박스 4 color 색상 표 5 search 검색 상자 6 url URL 주소 7 tel 전화번호 8 email 메일 9 password 비밀번호 10 date 사용자 지역 기준 날짜(연, 월, 일) .. [HTML] form 만드는 법 웹페이지를 제작하다 보면 사용자의 정보를 받아야 하는 경우가 발생합니다. 사용자가 특정 사이트를 이용하기 위해 회원가입을 하려 하는 경우가 대표적인 경우입니다. 이 경우 사용자가 사용할 아이디, 비밀번호를 입력해주면 이 정보를 전달받아야 합니다. 이를 가능하게 해주는 것이 form입니다. form을 만들 때는 태그를 사용합니다. 태그의 속성은 아래의 표와 같습니다. 속성 설명 method 폼의 전송 방식. 길이 제한이 없는 post값을 사용. name 폼의 이름. action 폼을 전송할 서버 쪽의 스크립트 파일로 지정. target action에서 지정한 스크립트 파일이 열리는 위치 지정. (실습1) form 만들기 아래와 같은 회원가입 폼을 만들어보겠습니다. 아이디와 비밀번호를 입력받고 SignUp을.. [CSS] 리스트 스타일 - 가로 리스트 빈 공간 없이 배경색 채우기 가로 리스트를 만든 후에 배경색을 지정하면 리스트의 경계에 빈공간이 발생하고 리스트가 끝나는 지점까지만 배경색이 채워지는 것을 볼 수 있습니다. 이 때, 리스트의 경계를 포함해 가로 리스트가 있는 줄의 배경색을 모두 채우기 위해서는 li의 background-color 속성이 아닌 ul 또는 ol의 background-color 속성의 값을 변경해야합니다. 가로 리스트가 있는 줄 배경색 모두 채우기 아래의 css 코드 처럼 ul의 background-color의 값을 원하시는 색의 색상코드로 지정해주세요. css 코드 ul { background-color : #a1fffa; } li { display : inline-block; color : #0400ff; background-color : #a1ff.. [CSS] 리스트 스타일 - 가로 리스트 만들기, 리스트 색 변경 ※ 목차 0. 들어가기 1. 가로 리스트 만들기 2. 리스트 글자 색 변경하기 3. 리스트 배경 색 변경하기 4. 코드적용 0. 들어가기 아래 코드는 리스트를 출력하는 html 코드입니다. 리스트 첫번째 목차 두번째 목차 세번째 목차 이 코드를 실행하면 아래의 사진과 같은 리스트가 출력됩니다. 이 html파일에는 어떤 css도 적용되어 있지 않습니다. 지금부터 css를 사용해 이 리스트 화면의 리스트를 가로로 출력하고 리스트의 글자색과 배경색을 변경해보겠습니다. 1. 가로 리스트 만들기 리스트를 가로로 출력하고 싶으시다면 display 속성의 값을 inline-block으로 설정하시면 됩니다. css 코드 li { display : inline-block; } 결과 화면 2. 리스트 글자 색 변경하기 리.. [CSS] 리스트 스타일 - 불릿, 숫자 변경 및 제거 ※ 목차 1. 기본 리스트 불릿 변경 및 제거 2. 순서 리스트 숫자 변경 및 제거 1. 기본 리스트 불릿 변경 및 제거 기본 리스트의 불릿 모양은 list-style-type 속성의 값을 변경함으로써 바꿀 수 있습니다. 기본 리스트의 list-style-type의 속성 값은 다음과 같습니다. 값 설명 none 불릿 제거 disc 기본값, 채운 원 모양 (●) circle 비어있는 원 모양 (○) square 채운 사각형 모양 (■) 예시 아래 코드는 list-style-type의 값을 none으로 변경한 코드입니다. html 코드 기본 리스트 첫번째 목차 두번째 목차 세번째 목차 css 코드 li { list-style-type : none; } 결과 화면 불릿이 제거된 것을 확인하실 수 있습니다. 2.. 이전 1 2 3 4 5 다음
