반응형 css310 접을 수 있는 아코디언 /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. HTML 속성 / Attributes - 모든 HTML 요소는 속성을 가질 수 있습니다. - 속성은 요소에 대한 추가 정보를 제공합니다. - 속성은 항상 시작 태그 에 지정됩니다. - 속성은 일반적으로 name="value" 와 같은 이름/값 쌍으로 제공됩니다. href 속성 태그 는 하이퍼링크를 정의합니다. 속성 href은 링크가 이동하는 페이지의 URL을 지정합니다. src 속성 태그 는 HTML 페이지에 이미지를 삽입하는 데 사용됩니다. 속성 src은 표시할 이미지의 경로를 지정합니다. 속성 에 URL을 지정하는 방법에는 두 가지가 있습니다. 1. 절대 URL 다른 웹사이트에서 호스팅되는 외부 이미지로 연결됩니다. 예: src="https://haku-design.co.kr/img/sample.jpg" . 참고: 사용 허가를 받지 않으.. 2023. 6. 11. HTML 기본 / Basic Examples 안녕하세요. Haku 입니다. 오늘은 몇 가지 기본 HTML 예제를 준비했습니다. 아직 배우지 않은 태그를 사용하더라도 걱정하지 마세요. HTML 문서 모든 HTML 문서는 문서 유형 선언으로 시작해야 합니다 . HTML 문서 자체는 로 시작하고 로 끝납니다 . HTML 문서의 보이는 부분은 ~ 사이입니다 . 선언 선언 은 문서 유형을 나타내며 브라우저가 웹 페이지를 올바르게 표시하도록 도와줍니다. 페이지 상단(HTML 태그 앞)에 한 번만 나타나야 합니다. 선언 은 대소문자를 구분하지 않습니다. HTML 제목 HTML 제목은 to 태그 로 정의됩니다 . 가장 중요한 제목을 정의합니다. 가장 덜 중요한 제목을 정의합니다. 감사합니다. 2023. 6. 11. 이전 1 2 다음 반응형
