반응형 전체 글29 HTML5/CSS3 - 목록태그 순서없는목록, 순서있는목록, 주제와 그의 내용. 뭐 그런 태그들. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum dolor sit amet sit veroeros sed et blandit consequat sed veroeros lorem et blandit adipiscing feugiat phasellus tempus hendrerit, tortor vi.. 2023. 7. 8. HTML Forms / 폼 양식 HTML 폼은 웹 페이지에서 사용자 입력을 수집하는 데 사용되는 웹 개발 기술입니다. 폼은 사용자에게 텍스트 입력, 드롭다운 목록 선택, 체크박스 선택과 같은 다양한 방법으로 정보를 제공할 수 있습니다. 폼은 또한 사용자가 파일을 업로드하거나 버튼을 클릭하여 작업을 수행하는 데 사용할 수 있습니다. HTML 폼은 태그로 표시됩니다. 태그는 폼의 이름과 제출 방법을 지정하는 속성을 포함할 수 있습니다. 폼의 이름은 웹 서버에서 폼 데이터를 식별하는 데 사용됩니다. 폼 제출 방법은 폼 데이터가 웹 서버로 전송되는 방법을 지정합니다. HTML 폼은 다음과 같은 다양한 입력 요소를 포함할 수 있습니다. 태그: 텍스트 입력, 숫자 입력, 이메일 주소 입력 등 다양한 유형의 입력을 허용하는 요소입니다. 태그: 사용.. 2023. 7. 1. 무료 사이트맵(site map) 생성 사이트 검색엔진에 사이트등록을 진행할때 사이트맵을 등록하는것은 필수입니다. 웹사이트의 페이지, 동영상 및 기타 파일과 그 관계에 관한 정보를 제공하는 파일입니다. Google과 같은 검색엔진은 이 파일을 읽고 사이트를 더 효율적으로 크롤링합니다. 사이트맵을 사용하면 다음과 같은 이점이 있습니다. - 검색엔진이 웹사이트를 더 빨리 크롤링하고 인덱싱할 수 있습니다. - 검색엔진이 웹사이트의 중요한 페이지를 더 잘 이해할 수 있습니다. - 검색엔진이 웹사이트의 페이지를 더 잘 랭크할 수 있습니다. Online XML Sitemap Generator https://www.web-site-map.com/ Free XML Sitemap Generator - Online Tool Use our online tool to c.. 2023. 6. 29. 간단한 모달 팝업 이미지 / Image Modal 이미지를 클릭했을때 팝업처럼 자연스럽게 나타나는 모달 이미지 예시입니다. 웹사이트를 만들때 정보를 더 주기 위하여 한번씩 사용하는 모달 이미지이죠. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_img W3Schools online HTML editor The W3Schools online code editor allows you to edit code and view the result in your browser www.w3schools.com 아래 코드를 직접 입력하여 테스트 해보시면 웹사이트에 좀 더 풍족한 내용을 넣을 수 있습니다. [html code] 1 2 3 4 5 6 7 8 9 10 Image Modal × Col.. 2023. 6. 28. 간단한 이미지 슬라이드 / Slideshow 복잡하지 않은 간단한 이미지 슬라이드 입니다. 출처 : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow W3Schools online HTML editor The W3Schools online code editor allows you to edit code and view the result in your browser www.w3schools.com [html code] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 1 / 3 Caption Text 2 / 3 Caption Two 3 / 3 Caption Three .. 2023. 6. 24. HTML onclick 페이지 이동시키기 a링크를 사용하지 않고 HTML에 태그로 페이지 이동을 할 수 있습니다. 실무에서 작업하다보면 이 작업을 사용하는 순간이 종종 나타나곤 합니다. 첫번째 일반적인 onclick를 이용한 방법 1 네이버 이동 cs 두번째 새창으로 페이지 열기 1 새창 이동 cs 세번째 팝업으로 새창 열기 1 네이버 새창 열기 cs 2023. 6. 24. CSS를 추가하는 방법 CSS를 삽입하는 세 가지 방법 스타일 시트를 삽입하는 방법에는 세 가지가 있습니다. · 외부 CSS · 내부 CSS · 인라인 CSS 외부 CSS 외부 스타일 시트를 사용하면 파일 하나만 변경하여 전체 웹 사이트의 모양을 변경할 수 있습니다. 각 HTML 페이지는 헤드 섹션 내부의 요소 내부에 외부 스타일 시트 파일에 대한 참조를 포함해야 합니다. ex) 외부 스타일은 HTML 페이지의 섹션 내 요소 내에서 정의됩니다. 외부 스타일 시트는 모든 텍스트 편집기에서 작성할 수 있으며 .css 확장자로 저장해야 합니다. 외부 .css 파일에는 HTML 태그가 포함되어서는 안 됩니다. 내부 CSS 단일 HTML 페이지에 고유한 스타일이 있는 경우 내부 스타일 시트를 사용할 수 있습니다. 내부 스타일은 요소 내.. 2023. 6. 19. CSS 구문 / Syntax CSS 규칙은 선택기와 선언 블록으로 구성됩니다. CSS 구문 선택기는 스타일을 지정할 HTML 요소를 가리킵니다. 선언 블록에는 세미콜론으로 구분된 하나 이상의 선언이 포함됩니다. 각 선언에는 콜론으로 구분된 CSS 속성 이름과 값이 포함됩니다. 여러 CSS 선언은 세미콜론으로 구분되며 선언 블록은 중괄호로 묶입니다. ex) 이 예시는 모든 요소는 파란색 텍스트 색상으로 가운데 정렬됩니다. ※ 예시설명 - p CSS의 선택기입니다(스타일을 지정하려는 HTML 요소를 가리킴: ). - color는 속성이고 blue속성 값입니다. - text-align는 속성이고 center속성 값입니다. 2023. 6. 19. 탭메뉴 / Tab Tab 탭은 단일 페이지 웹 애플리케이션 또는 다양한 주제를 표시할 수 있는 웹 페이지에 적합합니다. https://jshweb.w3spaces.com/tab.html [CODE] /* Style the tab */ .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* Style the buttons inside the tab */ .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; } /* .. 2023. 6. 17. 이전 1 2 3 4 다음 반응형
