반응형 전체 글25 간단한 이미지 슬라이드 / 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. 접을 수 있는 아코디언 /Accordion Accordion 아코디언은 많은 양의 콘텐츠 숨기기와 표시 사이를 전환하려는 경우에 유용합니다. https://jshweb.w3spaces.com/saved-from-Tryit-2023-06-17.html 첫번째이미지와 같이 아코디언 메뉴가 생성되고, 섹션1을 누르면 아코디언메뉴가 열립니다. [CODE] .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #.. 2023. 6. 17. HTML 블록 및 인라인 요소 / Block and Inline 모든 HTML 요소에는 유형에 따라 기본 표시 값이 있습니다. 표시 값에는 블록과 인라인의 두 가지가 있습니다. block & inline 블록(black)은 , 태그의 기본 요소 입니다. 구분 또는 단락을 정의합니다. 인라인(inline)은 태그의 기본 요소 입니다. 옆으로 달라붙는 요소이며, 단락을 구분하지 않습니다. TIP : 을 이용하여 block 요소와 inline 요소를 병행하며 사용할 수 있습니다. 2023. 6. 17. HTML 파비콘 / Favicon 파비콘은 브라우저 탭의 페이지 제목 옆에 표시되는 작은 이미지입니다. HTML에 Favicon을 추가하는 방법 원하는 이미지를 파비콘으로 사용할 수 있습니다. https://www.favicon.cc 와 같은 사이트에서 나만의 파비콘을 만들 수도 있습니다 . Tip: 파비콘은 작은 이미지이므로 대비가 높은 단순한 이미지여야 합니다. 아래와 같이 브라우저 탭의 페이지 제목 왼쪽에 파비콘 이미지가 표시됩니다. 웹사이트에 파비콘을 추가하려면 파비콘 이미지를 웹 서버의 루트 디렉터리에 저장하거나 이미지라는 루트 디렉터리에 폴더를 만들고 이 폴더에 파비콘 이미지를 저장합니다. 파비콘 이미지의 일반적인 이름은 "favicon.ico"입니다. 2023. 6. 15. HTML 이미지 / Img HTML 태그는 웹 페이지에 이미지를 삽입하는 데 사용됩니다. 이미지는 기술적으로 웹 페이지에 삽입되지 않습니다. 태그 는 참조된 이미지를 보관할 공간을 만듭니다. 태그 가 비어 있고 속성만 포함하며 닫는 태그가 없습니다. 태그 에는 두 가지 필수 속성이 있습니다. src : 이미지의 경로를 지정합니다. alt : 이미지의 대체 텍스트를 지정합니다. 웹상에서 alt 값은 보이지 않습니다. 웹접근성에 용이하도록 로봇이 읽어줍니다. 이미지에 크기 또한 설정이 가능합니다. 감사합니다! 2023. 6. 12. 이전 1 2 3 다음 반응형
