반응형 html8 탭메뉴 / 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 파비콘 / Favicon 파비콘은 브라우저 탭의 페이지 제목 옆에 표시되는 작은 이미지입니다. HTML에 Favicon을 추가하는 방법 원하는 이미지를 파비콘으로 사용할 수 있습니다. https://www.favicon.cc 와 같은 사이트에서 나만의 파비콘을 만들 수도 있습니다 . Tip: 파비콘은 작은 이미지이므로 대비가 높은 단순한 이미지여야 합니다. 아래와 같이 브라우저 탭의 페이지 제목 왼쪽에 파비콘 이미지가 표시됩니다. 웹사이트에 파비콘을 추가하려면 파비콘 이미지를 웹 서버의 루트 디렉터리에 저장하거나 이미지라는 루트 디렉터리에 폴더를 만들고 이 폴더에 파비콘 이미지를 저장합니다. 파비콘 이미지의 일반적인 이름은 "favicon.ico"입니다. 2023. 6. 15. HTML 이미지 / Img HTML 태그는 웹 페이지에 이미지를 삽입하는 데 사용됩니다. 이미지는 기술적으로 웹 페이지에 삽입되지 않습니다. 태그 는 참조된 이미지를 보관할 공간을 만듭니다. 태그 가 비어 있고 속성만 포함하며 닫는 태그가 없습니다. 태그 에는 두 가지 필수 속성이 있습니다. src : 이미지의 경로를 지정합니다. alt : 이미지의 대체 텍스트를 지정합니다. 웹상에서 alt 값은 보이지 않습니다. 웹접근성에 용이하도록 로봇이 읽어줍니다. 이미지에 크기 또한 설정이 가능합니다. 감사합니다! 2023. 6. 12. HTML 주석 / Comments HTML 주석은 브라우저에 표시되지 않지만 HTML 소스 코드를 문서화하는 데 도움이 될 수 있습니다. 다음 구문을 사용하여 HTML 소스에 주석을 추가할 수 있습니다. ※ 시작 태그에는 느낌표(!)가 있지만 종료 태그에는 없습니다. 둘 이상의 줄을 숨길 수도 있습니다. 줄 수는 무관합니다. 디스플레이에서 숨겨집니다. 주석은 오류를 검색하기 위해 HTML 코드 줄을 한 번에 하나씩 주석 처리할 수 있기 때문에 HTML 디버깅에도 유용합니다. 2023. 6. 11. HTML 텍스트 서식 / Text Formatting HTML에는 특별함을 줄 수 있는 텍스트를 정의하기 위한 여러 요소가 포함되어 있습니다. 서식 지정 요소는 특수 유형의 텍스트를 표시하도록 설계되었습니다. 굵은 텍스트 중요 텍스트 기울임꼴 텍스트 강조된 텍스트 표시된 텍스트 더 작은 텍스트 삭제된 텍스트 삽입된 텍스트 아래 첨자 텍스트 위첨자 텍스트 차근차근 하나씩 따라해보시면 아하~ 하고 바로 습득되실껍니다. 2023. 6. 11. HTML 제목 / Headings HTML 제목은 웹 페이지에 표시하려는 제목 또는 부제입니다. HTML 제목은 to 태그 로 정의됩니다 . 가장 중요한 제목을 정의합니다. 가장 덜 중요한 표제를 정의합니다. HTML에서 제목이 중요합니다. 검색 엔진은 제목을 사용하여 웹 페이지의 구조와 콘텐츠를 인덱싱합니다. 사용자들은 제목으로 페이지를 훑어봅니다. 문서 구조를 표시하려면 제목을 사용하는 것이 상당히 중요합니다. h1이 제일 큰 제목이라고 생각하시면 됩니다. 2023. 6. 11. HTML Cheat Sheet HTML에는 여러 태그 명령어들이 있습니다. 한창 예전에 공부할때 도움이 되었던 태그표입니다. 공부를 할때 매번 구글링에서 찾기 번거로움이 있다면 이 표를 확인 후 진행하면 좀 더 빠르게 원하는 태그를 찾을 수 있어요. 2023. 6. 11. 이전 1 다음 반응형
