웹 사이트 레이아웃 : html로 배경 이미지를 만드는 방법

면밀히 조사하는 많은 초보자사이트를 만드는 본질적으로 html로 배경을 만드는 방법을 궁금해하기도합니다. 그리고 어떤 사람들은이 문제를 이해할 수 있다면 이미지를 모니터의 전체 너비로 늘리는 동안 여전히 문제가 있습니다. 이 경우 사이트를 모든 브라우저에서 동일한 방식으로 표시하기를 원하므로 브라우저 간 호환성 요구 사항을 충족해야합니다. HTML 태그와 CSS 스타일을 사용하는 두 가지 방법으로 배경을 설정할 수 있습니다. 누구나 자신에게 가장 적합한 옵션을 선택합니다. 물론 CSS 스타일은 코드가 별도의 파일에 저장되고 사이트의 기본 태그에서 불필요한 열을 차지하지 않기 때문에 훨씬 편리합니다. 그러나 사이트의 배경에 이미지를 설치하는 간단한 방법을 고려하기 전에 CSS 스타일이 훨씬 편리합니다.

배경을 만들기위한 기본 HTML 태그

그럼 그림을 만드는 방법에 대한 질문으로 넘어 갑시다.배경 전체 화면에 html로. 사이트가 아름답게 보이기 위해서는 그라디언트 배경을 만들거나 단색으로 페인트하면 충분하지만 배경에 그림을 삽입해야하는 경우 모니터의 전체 너비에 걸쳐 늘어나지 않습니다. 이미지는 처음에 선택되거나 사이트의 페이지가 표시되는 확장과 같은 디자인으로 독립적으로 만들어 져야합니다. 배경 이미지가 준비된 후에 만 이미지를 "이미지"폴더로 전송합니다. 여기에는 사용 된 모든 그림, 애니메이션 및 기타 그래픽 파일이 저장됩니다. 이 폴더는 모든 html 파일과 함께 루트 디렉토리에 있어야합니다. 이제 코드로 이동할 수 있습니다. 배경을 그림으로 변경하는 코드를 작성하는 몇 가지 옵션이 있습니다.

태그 속성을 작성하십시오.
HTML 코드의 CSS 스타일을 사용합니다.
별도의 파일에 CSS 스타일을 작성하십시오.

HTML에서 배경 그림을 렌더링 할 때와 마찬가지로, 그것은 당신에게 달려 있지만나는 그것이 어떻게 가장 최적 일지에 관해 몇 마디 말하고 싶다. tag 속성을 통해 작성하는 첫 번째 방법은 오랫동안 사용되지 않았습니다. 두 번째 옵션은 매우 드문 경우에만 사용됩니다. 동일한 코드를 많이 사용하기 때문입니다. 세 번째 옵션이 가장 일반적이며 효과적입니다. 다음은 HTML 예제 태그입니다.

태그 속성 (본문)을 처음으로 쓰는 방법은index.htm 파일 이 형식으로 작성됩니다 : (body background = "folder_name / name_pictures.extension") (/ body). 즉, "Picture"라는 이름의 그림과 JPG의 확장자가 있고이 폴더의 이름을 "Images"로 지정한 경우 HTML 코드는 다음과 같습니다 (body background = "Images / Picture.jpg") ... (/ body) .
두 번째 작성 방법은 CSS 스타일에 영향을 미치지 만 index.htm과 같은 파일에 작성됩니다. (body 스타일 = "배경 : url ("../ Images / Picture.jpg ")").
세 번째 녹음 방법은 두 개의 파일로 이루어집니다. index.htm이라는 문서에서 head 태그에 다음 태그가 작성됩니다. (head) (링크 rel = "stylesheet"type = "text / css"href = "CSS_file의 경로") (/ head). style.css라는 이름의 스타일 파일에는 body {background : url (Images / Picture.jpg ")}가 이미 있습니다.

배경 그림을 만들기 위해 HTML에서와 같이, 우리는 분해했다. 이제 이미지를 전체 화면 너비로 늘리는 방법을 이해해야합니다.

배경 이미지를 창의 너비로 늘리는 방법

우리의 화면을 백분율로 상상해보십시오. 화면의 전체 너비와 길이는 100 % x 100 %가됩니다. 우리는이 너비로 이미지를 늘려야합니다. 이미지에 이미지에 style.css 파일을 추가하면 이미지가 모니터의 전체 너비와 길이로 늘어납니다. 어떻게 CSS 스타일로 작성됩니까? 그것은 간단합니다!

몸

{

배경 : URL (Images / Picture.jpg ")

background-size : 100 %; / *이 항목은 대부분의 최신 브라우저에 적합합니다 * /

}

그래서 우리는 그림 배경을 만드는 방법을 알아 냈습니다.HTML 전체 화면. index.htm 파일에 작성하는 방법도 있습니다. 이 방법은 시대에 뒤떨어 지지만 초보자는 이해하고 이해할 필요가 있습니다. 태그 (머리) (스타일) div {background-size : cover; } (/ style) (/ head)이 엔트리는 우리가 윈도우의 전체 너비에 걸쳐 배치 될 배경을위한 특별한 블록을 할당한다는 것을 의미한다. 우리는 2 가지 방법으로 사이트 html 이미지의 배경을 만드는 방법을 보았습니다. 그래서 이미지는 최신 브라우저에서 화면의 전체 너비에 걸쳐 펼쳐집니다.

고정 된 배경을 만드는 방법

사진을 다음과 같이 사용하기로 결정한 경우미래의 웹 리소스의 배경, 그럼 당신은 단지 그것이 너무 길게 늘어나지 않는 미학 보이는 것을 망칠 수 있도록 그것을 만드는 방법을 찾아야합니다. 간단히 HTML 코드를 사용하여이 작은 추가를 등록하십시오. background : url (Images / Picture.jpg ")가 고정 된 후 style.css 파일에 단일 구를 추가하거나 세미콜론 위치 뒤에 고정 된 별도의 줄을 추가합니다. 고정되어 따라서 배경 이미지가 고정됩니다. 사이트에서 내용을 스크롤하면 텍스트 줄이 움직이고 배경이 그대로 유지되므로 여러 가지 방법으로 html로 배경 이미지를 만드는 방법을 배웠습니다.

HTML로 테이블 작업하기

경험이 많지 않은 많은 웹 개발자테이블과 블록은 종종 HTML에서 그림을 배경으로 만드는 방법을 이해하지 못합니다. 모든 HTML 및 CSS 스타일 명령과 마찬가지로이 웹 프로그래밍 언어는 매우 간단합니다. 그리고이 문제에 대한 해결책은 몇 줄의 코드를 작성하는 것입니다. 테이블 행과 열의 맞춤법을 각각 tags (tr) 및 (td)라고합니다. 이미지의 형태로 테이블의 배경을 만들려면 태그 (테이블), (tr) 또는 (td)에 그림에 대한 링크가있는 간단한 구를 추가해야합니다. background = 이미지의 URL. 명확성을 위해 몇 가지 예를 제시합니다.

그림 대신 배경이있는 표 : HTML 예제

2x3 테이블을 그려서 배경 그림으로 만들어 보겠습니다."이미지"폴더에 저장 : (표 배경 = "이미지 / Picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr (td) (td) (td) (td) (td) (td) (/ td) (/ 테이블) 그래서 우리의 테이블은 그림의 배경으로 칠해질 것입니다.

이제 2x3 크기의 동일한 태블릿을 그릴 것입니다.1, 4, 5, 6의 번호가 매겨진 막대에 그림을 붙여 넣습니다. (table) (tr) (td background = "Images / Picture.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 / td) (td background = "Images / Picture.jpg") 4 (/ td) (td background = "Images / Picture.jpg") 5 /Picture.jpg")6(/td) (/ tr) (/ 테이블). 보고 난 후에 우리는 전체 테이블이 아니라 등록 된 셀에만 배경이 나타남을 알 수 있습니다.

크로스 브라우저 사이트

그런 것도있다.크로스 브라우저 웹 리소스. 즉, 사이트의 페이지가 다양한 유형 및 버전의 브라우저에서 동등하게 잘 표시됩니다. 동시에 필요한 브라우저에 맞게 HTML 코드 및 CSS 스타일을 사용자 정의해야합니다. 또한 스마트 폰 개발의 현대 시대에 많은 웹 개발자는 모바일 버전과 컴퓨터보기에 모두 적합한 웹 사이트를 만들려고 노력하고 있습니다.