html이미지4 HTML <picture> 요소 HTML 요소를 사용하면 다양한 장치 또는 화면 크기에 대해 서로 다른 사진을 표시할 수 있다. HTML 요소 HTML 요소는 웹 개발자가 이미지 리소스를 지정할 때 더 많은 유연성을 제공한다. 요소에는 각각 srcset 속성을 통해 서로 다른 이미지를 참조하는 하나 이상의 요소가 포함됩니다. 이렇게 하면 브라우저는 현재 보기 및/또는 장치에 가장 적합한 이미지를 선택할 수 있습니다. 각 요소에는 이미지가 가장 적합한 시기를 정의하는 media 속성이 있습니다. picture 요소 다양한 뷰포트 크기로 로드되는 다양한 버전의 사진을 보려면 브라우저 크기를 조정합니다. 브라우저는 미디어 쿼리가 사용자의 현재 뷰포트 너비와 일치하는 첫 번째 소스 요소를 찾습니다, 그리고 srcset 특성에 지정된 이미지를 .. 2023. 5. 2. HTML 배경이미지(Background Images) 배경 이미지는 거의 모든 HTML 요소에 대해 지정할 수 있다. HTML 요소에서 배경이미지 속성 HTML 요소에 배경 이미지를 추가하려면, HTML style 속성과 CSS background-image 속성을 사용한다: 배경이미지 a p 요소에 대한 배경이미지: 배경 이미지를 지정할 수 있습니다 표시되는 모든 HTML 요소에 대해. 이 예에서는 배경 이미지 요소에 대해 지정되었습니다. 기본적으로 background-image 방향으로 반복됩니다 요소보다 작은 경우 지정된 위치에 있습니다. 크기를 조정해 보십시오 브라우저 창에서 어떻게 하는지 확인합니다 배경 이미지가 동작합니다.. 배경이미지 a p 요소에 대한 배경이미지: 배경 이미지를 지정할 수 있습니다 표시되는 모든 HTML 요소에 대해. 이 예에.. 2023. 5. 1. HTML 이미지(Image) 이미지는 웹 페이지의 디자인과 모양을 개선할 수 있다. HTML 이미지 HTML 이미지 문법 HTML 태그는 웹 페이지에 이미지를 포함하는 데 사용된다. 이미지는 기술적으로 웹 페이지에 삽입되지 않으며, 이미지는 웹 페이지에 연결된다. 태그는 참조된 이미지에 대한 고정 공간을 만든다. 태그가 비어 있고 속성만 포함되어 있으며 닫는 태그가 없다. 태그에는 두 가지 필수 특성이 있다: src - 이미지의 경로를 지정한다 alt - 이미지의 대체 텍스트를 지정한다. img 문법 src 속성 필수 src 특성은 이미지의 경로(URL)를 지정한다. 참고: 웹 페이지가 로드될 때 웹 서버에서 이미지를 가져와 페이지에 삽입하는 것은 브라우저이다. 따라서 이미지가 실제로 웹 페이지와 관련하여 동일한 위치에 유지되는지 .. 2023. 4. 29. HTML 기본 예제 두번째 시간입니다. 이번에는 기본 HTML 예제를 볼 것이다. HTML 문서 HTML문서는 로 시작해야만 한다. HTML문서는 로 시작하고 로 끝난다. HTML문서의 보이는 부분은 This is a link 링크의 목적지는 'href' 속성에 정의된다.속성은 HTML 요소에 관련한 추가적인 정보를 제공하는데 사용된다. 'This is a link' 글자를 클릭하면 네이버 사이트로 이동한다. 다음 장에 속성에 관련하여 더 공부할 것이다. HTML 이미지 HTML이미지는 태그로 정의된다.소스 파일(src), 대안문자(alt), width와 height는 속성으로 제공된다. 예제 HTML소스를 보는 방법 크롬 브라우저에서는 오른쪽 마우스를 클릭하여 '페이지 소스 보기'를 클릭하여 소스를 본다.엣지 브러우저에서.. 2023. 4. 11. 이전 1 다음
