본문 바로가기

HTML🔨/html&css 폼요소12

input type text 추가요소 커스텀 커스텀에 필요한 css input { width: 100%; height: 52px; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--reed-gray100); } input:focus { outline: 1px solid var(--reed-gray300); } input::placeholder { color: var(--reed-gray300); } input:focus > 인풋 박스를 클릭하고나면 나오는 아웃라인 효과 input::placeholder > 클릭전 나오는 기본 문구 color 변경 2023. 9. 17.

css form input type="file" 첨부파일올리기 문의하기에서 첨부파일을 올릴수있도록 폼을 만들어보자 기존에 text 요소에 공통 클래스로 지정되어있는 디자인을 file 영역에만 해당하지않도록 :not 부정선택자를 준 모습 .inquiry_page .inquiry_area input[type=text]:not(.input_file) { width: 100%; height: 45px; background: #f8f8f8; border: none; padding: 0 15px; } 1. html 테이블안에 코드 작성 첨부파일 파일선택 ※ 등록 가능 확장자 : pdf,docx,pptx,xlsx,jpg,jpeg,gif,png / 최대 5MB 텍스트 문단 p와 떨어뜨려 주기 위해서 div file_wrap을 감는다. 기본 input 으로 file 만 지정했을떄 .. 2022. 10. 10.

css text area 고정내용입력 (placeholder 줄바꿈태그 
 ) 내용입력 부분 미리 텍스트가 들어가있고 줄바꿈이 되도록 해보자! html 멀티라인 일반 텍스트 편집 컨트롤 사용자가 textarea 태그의 박스크기, 사이즈를 수정하지못하도록 resize속성값 지정 textarea는 속성은 한줄로 작성해야함 rows textarea 의 속성 / 최초입력 가능 줄수 지정 placeholder textarea 의 속성 입력필드에 사용자의 이해를 돕도록 짦은 도움말을 사전명시 사용자 입력시 사라짐 내용입력시 한줄로 작성하되 줄바꿈시 사용 resize /* textarea 리사이즈기능 빼기 */ textarea {resize: none} 1.html 작성 rows 속성은 최초 입력가능 줄수로 1로 입력시 이렇게 좁게 나온다. rows 속성 10줄지정시 2 . css로 꾸미기 글.. 2022. 10. 10.

css 이메일 select option박스 만들기 아래 문의하기의 이메일 부분을 만들어보자 초기화코드로 form 디자인 없애기 /* legend,caption,메뉴제목,섹션제목 블라인드 */ legend, caption, .blind { position: absolute; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; width: 1px; height: 1px } /* 칸의 선을 합치기, 칸의 간격없애기, 가로를 늘려줌 */ table {border-collapse: collapse; border-spacing: 0; width: 100%; table-layout: fixed;} 초기화 코드가 사용된 백지상태에선 폼요소들이 이렇게 나온다. 문의작성하기 문의하기테이블 이메일 @ 직접 입력 naver.com .. 2022. 10. 10.

css form input type="text" readonly 문의하기 만들기 초기화코드로 form 디자인 없애기 /* legend,caption,메뉴제목,섹션제목 블라인드 */ legend, caption, .blind { position: absolute; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; width: 1px; height: 1px } /* 칸의 선을 합치기, 칸의 간격없애기, 가로를 늘려줌 */ table {border-collapse: collapse; border-spacing: 0; width: 100%; table-layout: fixed;} 예제코드 문의작성하기 문의하기테이블 이름 연락처 readonly 이름 부분이 먼저 들어가있고 사용자가 쓸수 없도록 미리 지정해준다 (title 미적용시 웹 접근성 경고).. 2022. 10. 10.

css radio 만들기 폼요소의 input 타입 radio 를 만들어 보자 checkbox는 중복 선택이 가능하며 radio 버튼은 단일 선택만 가능! 1. html 작성 가로로 배치할수 있도록 div wrap을 사용해 그룹으로 감아준다. 시각장애인용 웹 접근성을 위해 class명 bilnd 글자를 선택해도 체크 될수 있도록 label for 지정 같은 그룹의 name은 같게 id명은 순서대로 label과 꼭 일치하게 만든다. 딸기 사과 메론 2. 공통클래스 기존 디자인 초기화 해주기 /* 폼요소의 높이가 다를때 요소끼리 세로정렬시킴, ios 둥근모서리, 기본스타일 제거 */ /* border-radius:0 -> iOS에서 테두리가 둥글게 나오므로 빼줌 */ /* -webkit-appearance: none -> iOS에서 .. 2022. 10. 10.

html form , input 요소 정리 폼요소css 문서의 구획 지정 로그인, 회원가입, 글쓰기 등등 웹페이지 내에서 사용자로부터 입력을 받을 떄 사용한다. 서버로 데이터를 전달에 처리할수 있도록 기능 폼 입력양식 2022. 10. 10.

html lavel for 폼 양식에 이름지정 태그 label은 폼의 양식에 이름을 붙이는 태그 주요 속성은 for label의 for의 값과 양식의 id 값이 같으면 연결 label 클릭시 연결된 양식에 입력 또는 체크, 체크해제 먼저 체크박스를 만들어주자 개인정보수집 및 이용에 동의합니다. 이럼 체크박스는 나오나 박스를 클릭해야만 체크가 된다. 이떄 label로 이름표를 붙여 텍스트 선택시 체크가 가능하게끔 만들어준다. 개인정보수집 및 이용에 동의합니다. label로 연결해준 코드 2022. 10. 9.

문의작성하기 readonly / input input type="text" 에 글씨 미리적용 문의 작성하기 폼필레 이미 글씨가 들어가이씀 이름이 이미 들어가있음 2022. 10. 6.

css scrllbar 공통클래스로 스크롤 변경(커스텀스크롤바) 이렇게 글이 많은 박스요소일경우 스크롤을 만들어주어 내용을 담아보자! 1.html , div class 지정 먼저 html로 text 영역을 감고있는 부모에 css 클래스로 변경 가능하도록 이름지정 2. css공통이 아닌 개별 css로 제작 스크롤 변경은 이 개인정보 수집에만 들어가는 디자인으로, 웹사이트 전체에 적용되는 디자인이 아니다. 그러므로 기본 공통css 인 common 시트가 아닌 개인정보 수집이 들어가는 개별 css 시트에 스크롤 변경을 해준다. 스크롤 지정전 text box 모양 .inquiry_page .agree_wrap .txt_scroll { height: 154px; overflow: auto; } layout.css에 페이지 네임을 지정 스크롤영역 크기 지정 height:154p.. 2022. 10. 6.

css checkbox 만들기 글자부분(label) 를 클릭해도 체크 되는 체크박스를 공통 클래스로 만들어 보자 ! 왜 공통클래스를 줄까? 저 동그라미 체크박스는 이 페이지에서만 쓰이는게 아닌 홈페이지 전체에서 계속 쓰일 디자인이기 때문에..! 1. html 로 check box 생성 개인정보수집 및 이용에 동의합니다. (필수) 기존 텍스트박스를 포함한 agree_area 안 agree_wrap 안에 html의 input 태그 타입을 checkbox로 지정해준다. (또한 글자를 클릭하면 체크박스에 표시가 되도록 label을 같이 지정) - 라벨을 누르면 체크박스가 체크되어야함 - 이때 오른쪽 박스는 flat으로 띄워줘야 하므로 이름을 다르게 지정 이때 초기화 코드를 삭제해 주어야 체크박스를 볼수 있음 폼요소의 높이가 다를때 요소끼리 .. 2022. 10. 6.

css input 과 label 사용시 문법 주의사항 input 과 label 사용시 주의사항 label 사용시 주의 폼의 설명부분 으로 input 과 같이 쓰인다 ( label 글씨를 클릭하면 lnput 에 체크 되도록 ) 이떄 label태그안에 넣는 방식은 비표준이므로 추천하지 않는다. (인라인 에는 인라인 요소 안에만 가능하기 때문) inline 요소안에 inline 문법적으로 불가 그러나 같이쓰면 클릭가능 기능구현에는 문제가 없으나 문법적으로 안됨 표준방식 예시 제작문의 참고링크 https://webdir.tistory.com/435 폼 필드(input type="file") 디자인 #4 폼 필드 디자인중 마지막을 장식할 파일 필드에 대한 내용입니다. 이 또한 브라우저 호환에 어려움을 겪곤 하는데, 관련해서 대안책들을 알아봅니다. 파일 필드 디자인 .. 2022. 10. 6.

이전 1 다음

티스토리툴바