Appia의 IT세상

[초보HTML배우기 11]HTML - 이미지를 배경 설정하기 본문

Programming/HTML&CSS

[초보HTML배우기 11]HTML - 이미지를 배경 설정하기

Appia 2020. 7. 29. 07:23
반응형

[초보HTML배우기 11]HTML - 이미지를 배경 설정하기 

 

이번 포스팅에서는 HTML에 배경을 설정하는 방법에 대해서 한번 살펴보고자 합니다. HTML도 문서이다 보니, 배경을 설정할 수가 있습니다. 2가지 형태로 살펴보고자 합니다. 

 

1. 전체 배경에 대해서 설정하기 

2. 특정 Tag의 속성으로 배경 설정하기 

 

위의 2가지 형태에서는 background속성을 입력하시면 됩니다. background 속성은 다음과 같은 형태로 입력하시면 됩니다.

background = "이미지path/file 경로"

그럼 다음과 같이 먼저 진행해보겠습니다. 

 

<전체 배경에 대해서 설정하기>

먼저 HTML의 전체 배경에 대해서 설정하는 해보도록 하겠습니다. 먼저, 다음과 같이, HTML의 body의 background 의 설정을 해주시면 됩니다. 

<body background="이미지 Path">

위와 같은 형태로 입력하시면 됩니다. 그럼, 예제 코드를 한번 살펴보겠습니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body background="/imgs/img1.PNG">
    <p>오늘은 무엇이 맞을까요?</p>>
</body>
</html>
cs

위와 같이 body에 background속성을 적용하시면 됩니다. 이를 적용하시면 상단에 그림과 같은 형태로 출력이 됩니다. 

 

<특정 Tag의 속성으로 배경 설정하기>

이제 특정 Tag의 속성으로 입력이 가능합니다. 예를 들면 표의 배경등에 이미지를 배경으로 설정할 수 가 있습니다. 그럼 한번 살펴보겠습니다. 표를 토대로 관련된 예를 적용해보도록 하겠습니다. 표의 경우 다음과 같은 형태로 적용이 가능합니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table background = "/imgs/img1.PNG" width = "100%" height = "100">
        <tr><td>
           표의 배경 !!
        </td></tr>
     </table>
</body>
</html>
cs

위의 결과를 한번 실행하면 다음과 같은 형태가 나타납니다. 

위의 코드를 적용할 결과 

위와 같이 코드를 작성하해보면, 표의 배경으로 이미지가 적용이 되었습니다. 이를 바탕으로 배경에 이미지를 적용하실 수 있습니다. 다음 링크의 표 입력하는 방법을 참조하시면 도움이 되실 것이라고 생각이 듭니다. 

[초보HTML배우기 07]HTML - HTML에 표(Table) 입력하기

 

이번 포스팅에서는 [초보HTML배우기 11]HTML - 이미지를 배경 설정하기 라는 주제로 배경에 이미지를 적용하는 방법에 대해서 살펴봤습니다. 혹시 궁금하신 점이나 문의 사항이 있으시면 언제든지 댓글 및 방명록에 글 남겨주시길 바랍니다. 

반응형
저작자표시 비영리 변경금지

'Programming > HTML&CSS' 카테고리의 다른 글

[초보HTML배우기 13]HTML - Form, Checkbox만들기(input)  (0) 2020.08.04
[초보HTML배우기 12]HTML - Form - Text Input 생성하기 (input, textarea)  (0) 2020.07.31
[초보HTML배우기 10]HTML - 태그 항목 그룹화 하기(span, div)  (0) 2020.07.27
[초보HTML배우기 09]HTML - HTML에 하이퍼 링크(hyper-link)연결하기  (0) 2020.07.25
[초보HTML배우기 08]HTML - HTML에 리스트(List) 나열하기  (0) 2020.07.23
'Programming/HTML&CSS' Related Articles more
Comments