본문 바로가기

HTML🔨24

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.

html 변천사 html 변천사 1. 기존 html,css,js 로만 작업한 버전 단점- 사용자 환경에 일일히 대응할 수가 없다. 2. ejs (embededjs) js 안에 html를 템플릿을 만들어서 찍어낸다. 사용자 환경에 맞추어 일일히 만들어준다 (시간이 오래걸림) 3. spa (싱글페이지) html 하나와 js 파일을 뭉쳐서 넣어준다 js 파일안에 화면을 만드는것에 필요한것들이 들어가있다. 기존엔 클라이언트가 서버에 화면을요청하면 서버에서 하나하나 만들어서 응답함(ejs 버전) 하지만 spa 화면구동에 필요한 js 다 들어가있으므로 서버를 안거쳐도됨. 응답이 빠름 기존에 서버에서 만들었던 작업을 클라이언트로 넘김 단 문제점 '검색엔진' 네이버,다음,구글..... 사이트 검색시 내가 검색한 키워드에 맞춰 띄어줌 .. 2023. 9. 2.

dl, dt, dd 구조 (제목. 내용하나이상) dl 은 dt dd 가 한가지 이상씩 있을때만 dl, dt, dd 를 사용한다. 제목 > 내용구조일떄 dl 안 div 불가. dd, dt 안에 div 가능 넥슨게임즈 SEOUL 서울특별시 강남구 남부순환로 2621 디앤오 강남빌딩 5층 넥슨게임즈 PANGYO 경기 성남시 분당구 판교로 256번길 25 판교 테크노벨리 2022. 12. 15.

html h2 배경 이미지 정리 로고 html 총 제목느낌 / 서브페이지 제목 / 내용이 하나이기에 위에 한번만 사용 / 나머지강조는 em, strong 메인페이지에서 섹션별 내용에따라 여러번씩 사용할 수있음 컬럼제목 h3 h4는 없음 로고 html 총 제목 느낌 서브페이지 제목 서브내용이 하나이기에 위에 한번만 사용 / 나머지강조는 em, strong 메인페이지서는 섹션별 내용에따라 여러번씩 사용 가능 컬럼제목 섹션별 작은 제목 사용안함 안에 img 가능? button inline-block, img도 inlin-block 으로 가능하지만 block요소 불가능 브라우저마다 이미지와 버튼의 간격이 달라짐 버튼은 클릭으로 기능을 구형, 배경이미지로 버튼디자인에 맞춰 아이콘 크기 조정 = 자바.제이쿼리 기능구현할때 (toggle) 사용 f.. 2022. 11. 24.

html 네이버 지도 넣기 id 생성 2022. 11. 7.

html 상단 용어정리 " data-og-url="https://guide-page.dothome.co.kr/404.html" data-og-image="https://blog.kakaocdn.net/dna/Vn0Po/hyP74j9Cmm/AAAAAAAAAAAAAAAAAAAAAB_G7DeX8mqylZXl3dew7EXYaReL4wcsJEbLhkRPPauD/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1759244399&allow_ip=&allow_referer=&signature=Istq6FoNYjEO3XCrtMRLUvaesdU%3D target="_blank" data-source-url="http://hyojin7794.dothome.co.kr/subway/images/subway_og.png">"> 닷홈 | 페이지를 표시할 수 없습니다. 도메인 25% 할인쿠폰 제공 최대 할인가! 13,500원 닷홈 도메인 연결시 무제한 웹호스팅 무료제공 guide-page.dothome.co.kr 2022. 10. 12.

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.

이전 1 2 다음

티스토리툴바