많은 초보자 조 판사 만 이해사이트를 만드는 본질에서 종종 html로 배경 그림을 만드는 방법이 궁금합니다. 일부 사람들이이 작업을 파악할 수 있다면 이미지를 모니터의 전체 너비로 늘릴 때 문제가 발생합니다. 동시에 모든 브라우저에서 사이트가 동일하게 표시되기를 원하므로 브라우저 간 호환성 요구 사항이 충족되어야합니다. HTML 태그와 CSS 스타일을 사용하여 배경을 설정할 수 있습니다. 각각은 가장 최적의 옵션을 선택합니다. 물론 CSS 스타일은 코드가 별도의 파일에 저장되고 사이트의 기본 태그에서 추가 열을 차지하지 않기 때문에 훨씬 편리하지만 먼저 사이트의 배경에서 이미지를 설정하는 간단한 방법을 고려할 것입니다.
배경을 만들기위한 기본 HTML 태그
그래서 우리는 그림을 만드는 방법에 대한 질문으로 넘어갑니다.HTML 전체 화면으로 배경. 사이트가 아름답게 보이려면 다소 중요한 세부 사항을 이해해야합니다. 그래디언트 배경을 만들거나 단색으로 채울 수는 있지만 배경에 그림을 삽입해야하는 경우 모니터의 전체 너비로 늘어나지 않습니다. 이미지는 처음에 사이트 페이지를 볼 수 있도록 확장 된 디자인으로 선택하거나 독립적으로 만들어야합니다. 배경 이미지가 준비된 후에야 이름이 "Images"인 폴더로 전송됩니다. 여기에는 사용 된 모든 그림, 애니메이션 및 기타 그래픽 파일이 저장됩니다. 이 폴더는 모든 html 파일이있는 루트 디렉토리에 있어야합니다. 이제 코드로 이동할 수 있습니다. 배경을 그림으로 바꾸는 코드 작성 옵션에는 여러 가지가 있습니다.
- 태그 속성을 작성하십시오.
- HTML 코드의 CSS 스타일을 통해.
- 별도의 파일로 CSS 스타일을 작성하십시오.
HTML에서 배경을 그림으로 만드는 방법을 결정하지만가장 최적의 방법에 대해 몇 마디 말하고 싶습니다. 태그 속성을 통한 첫 번째 방법은 더 이상 사용되지 않습니다. 두 번째 옵션은 매우 드문 경우에 사용되며 동일한 코드가 많이 있기 때문입니다. 그리고 세 번째 옵션이 가장 일반적이고 효과적입니다. HTML 태그 예제는 다음과 같습니다.
- 태그 속성 (본문)을 작성하는 첫 번째 방법index.htm 파일. (본문 배경 = "FolderName / PictureName.extension") (/ 본문) 형식으로 작성됩니다. 즉, 이름이 "Picture"이고 확장명이 JPG 인 그림이 있고 폴더를 "Images"라고하면 HTML 코드는 다음과 같습니다. (body background = "Images / Picture.jpg") ... (/ body) .
- 두 번째 기록 방법은 CSS 스타일에 영향을 주지만 index.htm과 동일한 파일로 작성됩니다. (바디 스타일 = "배경 : url ("../ Images / Picture.jpg ")").
- 그리고 세 번째 녹음 방법은 두 파일로 이루어집니다.다음 행은 문서에 (head) 태그에 index.htm이라는 이름으로 작성됩니다. (head) (link rel = "stylesheet"type = "text / css"href = "Path_to CSS_file") (/ head). 그리고 style.css라는 이름의 스타일 시트에서 우리는 이미 body {background : url (Images / Picture.jpg ")}이라고 씁니다.
HTML에서 배경을 그림으로 만드는 방법을 만들었습니다. 이제 전체 화면 너비에 걸쳐 이미지를 늘리는 방법을 이해해야합니다.
배경 이미지를 창 너비로 늘리는 방법
백분율 화면을 상상해보십시오.화면의 전체 너비와 길이는 100 % x 100 %입니다. 이미지를이 너비로 늘려야합니다. style.css 파일의 이미지에 선을 추가하면 이미지가 모니터의 전체 너비와 길이로 늘어납니다. 이것은 CSS 스타일로 어떻게 작성됩니까? 모든 것이 간단합니다!
몸
{
배경 : url (이미지 /Picture.jpg ")
배경 크기 : 100 %; / *이 항목은 대부분의 최신 브라우저에 적합합니다. * /
}
사진을 배경으로 만드는 방법을 알아 냈습니다html 전체 화면. index.htm 파일에 쓰는 다른 방법이 있습니다. 이 방법은 더 이상 사용되지 않지만 초보자에게는이를 이해하고 이해해야합니다. 태그 (헤드) (스타일)에서 div {background-size : cover; } (/ style) (/ head)이 항목은 창의 전체 너비에 걸쳐 배치 될 배경에 대한 특수 블록을 선택 함을 의미합니다. 우리는 웹 사이트 배경을 HTML 그림으로 만드는 두 가지 방법을 검토하여 이미지가 최신 브라우저에서 화면의 전체 너비로 확장되도록했습니다.
고정 배경을 만드는 방법
사진을 다음과 같이 사용하기로 결정한 경우미래의 웹 리소스의 배경에 따라 길이가 늘어나지 않고 미적 외관을 손상시키지 않도록 움직이지 않는 방법을 배워야합니다. HTML 코드를 사용하여이 작은 추가 내용을 작성하는 것은 쉽습니다. style.css 파일에 배경 뒤에 하나의 문구를 추가해야합니다 : url (Images / Picture.jpg ") fixed; 대신 세미콜론-position : fixed 뒤에 별도의 줄을 추가하십시오. 따라서 배경 이미지는 움직이지 않게됩니다. 사이트의 내용을 스크롤하면 텍스트 줄이 움직이고 있지만 배경은 그대로 유지되므로 html을 사용하여 여러 가지 방법으로 배경을 그림으로 만드는 방법을 배웠습니다.
HTML에서 테이블 작업
경험이없는 많은 웹 개발자들이 직면하고 있습니다테이블과 블록은 종종 html 테이블 배경에서 그림을 만드는 방법을 이해하지 못합니다. 모든 HTML 및 CSS 스타일 명령과 마찬가지로이 웹 프로그래밍 언어는 매우 간단합니다. 이 문제에 대한 해결책은 몇 줄의 코드를 작성하는 것입니다. 테이블 행 및 열 작성은 각각 (tr) 및 (td) 태그로 표시됩니다. 표의 배경을 이미지로 만들려면 (table), (tr) 또는 (td) 태그에 그림에 대한 링크가있는 간단한 문구를 추가해야합니다. background = 그림의 URL. 명확성을 위해 몇 가지 예를 제시합니다.
배경 대신 그림이있는 테이블 : HTML 예제
2x3 테이블을 그려서 배경 그림으로 만들어 봅시다."Images"폴더에 저장 됨 : (테이블 배경 = "Images / Picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr ) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ 테이블). 그래서 우리의 테이블은 그림의 배경으로 칠해집니다.
이제 2x3 크기의 동일한 판을 그립니다.번호가 1, 4, 5 및 6 인 열에 그림을 삽입합니다. (표) (tr) (td background = "Images / Picture.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 ( / td) (/ tr) (tr) (td background = "Images / Picture.jpg") 4 (/ td) (td background = "Images / Picture.jpg") 5 (/ td) (td background = "이미지 /Picture.jpg")6(/td) (/ tr) (/ 테이블). 확인한 후 배경이 전체 테이블이 아닌 등록한 셀에만 나타납니다.
크로스 브라우저 사이트
다음과 같은 것이 있습니다브라우저 간 웹 리소스 즉, 사이트의 페이지가 다른 유형 및 버전의 브라우저에서 동일하게 올바르게 표시됩니다. 이 경우 필요한 브라우저에 맞게 HTML 코드 및 CSS 스타일을 사용자 정의해야합니다. 또한 현대의 스마트 폰 개발 시대에 많은 웹 개발자는 모바일 버전과 컴퓨터 모양에 적합한 사이트를 만들려고 노력하고 있습니다.
