반응형 HTML강좌12 홈페이지 만들때 무료 이미지 사이트 (상업용 가능) 무료 이미지 다운로드 필요한 경우가 종종 있습니다. 회사에서 업무용 문서를 작성하거나, 학교 과제, 개인 포트폴리용 홈페이지등을 제작할때 고품질의 이미지가 필요한 경우가 많쵸. 흔히들 구글이나 네이버에서 이미지를 검색해서 이미지를 다운로드하거나 캡쳐해서 많이들 사용합니다. 하지만 이런 캡쳐 이미지들은 저작권 위반에 걸려서 막대한 손해배상이나 벌금을 내야 할 수 있습니다. 저작권 걱정없이 마음대로 무료 이미지 다운 받아 쓸 수 있는 사이트 3 곳을 소개합니다. 1. 무료 이미지 사이트 Unsplash 무료 이미지 사이트로 최근 가장 인기 있는 곳입니다. 20만 명 이상의 사진 작가가 찍은 200만 장 이상의 고품질 사진을 다운로드 할 수 있습니다. 상업용으로도 아무 제한없이 사용가능합니다. 출처 표기도 필.. 2023. 7. 15. 간단한 모달 팝업 이미지 / 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. HTML onclick 페이지 이동시키기 a링크를 사용하지 않고 HTML에 태그로 페이지 이동을 할 수 있습니다. 실무에서 작업하다보면 이 작업을 사용하는 순간이 종종 나타나곤 합니다. 첫번째 일반적인 onclick를 이용한 방법 1 네이버 이동 cs 두번째 새창으로 페이지 열기 1 새창 이동 cs 세번째 팝업으로 새창 열기 1 네이버 새창 열기 cs 2023. 6. 24. CSS 구문 / Syntax CSS 규칙은 선택기와 선언 블록으로 구성됩니다. CSS 구문 선택기는 스타일을 지정할 HTML 요소를 가리킵니다. 선언 블록에는 세미콜론으로 구분된 하나 이상의 선언이 포함됩니다. 각 선언에는 콜론으로 구분된 CSS 속성 이름과 값이 포함됩니다. 여러 CSS 선언은 세미콜론으로 구분되며 선언 블록은 중괄호로 묶입니다. ex) 이 예시는 모든 요소는 파란색 텍스트 색상으로 가운데 정렬됩니다. ※ 예시설명 - p CSS의 선택기입니다(스타일을 지정하려는 HTML 요소를 가리킴: ). - color는 속성이고 blue속성 값입니다. - text-align는 속성이고 center속성 값입니다. 2023. 6. 19. 접을 수 있는 아코디언 /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. HTML 주석 / Comments HTML 주석은 브라우저에 표시되지 않지만 HTML 소스 코드를 문서화하는 데 도움이 될 수 있습니다. 다음 구문을 사용하여 HTML 소스에 주석을 추가할 수 있습니다. ※ 시작 태그에는 느낌표(!)가 있지만 종료 태그에는 없습니다. 둘 이상의 줄을 숨길 수도 있습니다. 줄 수는 무관합니다. 디스플레이에서 숨겨집니다. 주석은 오류를 검색하기 위해 HTML 코드 줄을 한 번에 하나씩 주석 처리할 수 있기 때문에 HTML 디버깅에도 유용합니다. 2023. 6. 11. 이전 1 2 다음 반응형
