<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
body {
background-image: url(img.jpg); /*외부파일의 경로를 css로 지정할 때 url 함수 사용 */
background-size: contain; /*너비, 높이. "크기단위"의 값을 입력해주거나 "cover" "contain" 등의 키워드
100% 또는 cover 입력하면 '너비'를 꽉채우게 됨. (반복됨)
contain은 body내부에 있는 요소에 높이가 맞춰지게 됨. (반복됨) 이전에 body태그 내부에 뭔가가 있어야함.(높이 지정) = 이미지의 높이가 정확하게 내용물(h1)과 일치.(contain은 잘 안쓰임)
반복이 가능한 패턴을 가진 배경을 사용할 때 background-size 속성과 함께 많이 사용.*/
background-repeat: no-repeat;
/*repeat-x키워드: x축 방향으로만 반복이 일어남. // repeat-y: y축 방향으로 반복. // repeat: x축 y축 전체로 반복.*/
background-attachment: fixed ;
/*백그라운드를 배경에 어떠한 형태로 붙여놓을지 지정하는 속성. scroll(스크롤 시 이미지도 딸려올라감) 또는 fixed(스크롤을 내려도 이미지는 고정되고 body태그 글자만 움직임).*/
background-position: bottom left ;
/*"X위치와 Y위치" 이미지를 어느쪽에 붙일거냐는 키워드. 최대 2개 쓸수있음. 사실 X축크기, Y축크기 픽셀로 지정해서 쓰는 경우가 더 많다. 10px 10px ->이후 "스프라이트 이미지"를 다루면서 설명*/
background-color: burlywood /*이미지가 아직 불러와지지 않은 상태에서(로딩 중)에 그냥 흰색으로 두면 어색해서 이미지랑 비슷한 느낌의 색으로 배경색 깔기.*/
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>Aliquip ea exercitation esse est mollit enim exercitation. Ea et sint incididunt id ipsum non officia id. Sint id cupidatat labore duis. Aliqua cillum commodo mollit proident minim labore veniam incididunt velit commodo magna dolor ea. Minim pariatur elit aliquip adipisicing ut pariatur. Sit tempor sit magna cillum dolor cupidatat cillum sunt labore ad cupidatat ea. Anim do Lorem velit fugiat eiusmod veniam proident.</p>
<p>Est excepteur labore do anim veniam. Esse in ipsum ullamco irure sit. Reprehenderit amet non aliqua.</p>
<p>Commodo pariatur reprehenderit ipsum nulla exercitation anim do id labore est duis ad sit ad. Et consequat est anim id excepteur laborum labore minim amet dolor dolore Lorem magna. Anim deserunt consequat et incididunt consequat labore minim elit eu elit eiusmod amet anim ullamco. Sit cillum dolore dolor sit magna in culpa adipisicing veniam commodo voluptate tempor ut. Duis ipsum aliquip enim anim dolore aliqua velit dolore adipisicing duis amet id non. Nisi nostrud enim commodo non consequat.</p>
<p>Qui Lorem pariatur laboris sit quis cupidatat. Labore id veniam proident fugiat eiusmod nostrud dolore dolor. Ea mollit fugiat proident aliqua consectetur velit incididunt ea elit consectetur ipsum laboris minim cupidatat. Ea sint esse adipisicing id non do tempor occaecat laboris esse ipsum minim. Reprehenderit laboris laboris aute nulla eiusmod laborum sunt deserunt ut do do ipsum. Ex non commodo sint amet commodo aute labore.</p>
<p>Pariatur aliqua aliqua excepteur occaecat magna ullamco sunt aute sit id est in. Deserunt enim nisi quis consectetur nostrud incididunt ipsum mollit culpa aliquip nisi. Laborum occaecat eu aliquip sint. Proident officia dolore ipsum ut sunt commodo aliqua eiusmod ullamco aute sint. Labore ea quis occaecat excepteur irure irure.p>
<p>Ut amet labore adipisicing culpa anim. Anim sit ex proident consectetur elit cupidatat in pariatur nulla ex aliquip. Aliqua ipsum ad est duis excepteur do eu magna mollit.</p>
<p>Enim exercitation irure ullamco ut dolor amet amet. Consectetur sunt sit nostrud sunt adipisicing. Consequat esse exercitation do quis fugiat Lorem in occaecat id cupidatat labore. Proident non ad consequat veniam dolore duis eiusmod. Minim fugiat consequat labore eiusmod voluptate non aute irure ad.</p>
<p>Tempor officia aliqua aliquip labore. Consequat laboris quis exercitation occaecat aliquip do enim amet ipsum. Pariatur elit cillum Lorem minim sit ea laboris pariatur elit exercitation cupidatat elit. Dolor elit et eiusmod irure aliquip deserunt cupidatat ad sunt deserunt. In ea incididunt anim tempor eu veniam non do magna excepteur duis cupidatat exercitation ea. Nostrud dolor cupidatat laborum incididunt fugiat do deserunt nisi.</p>
<p>Aliquip ea exercitation esse est mollit enim exercitation. Ea et sint incididunt id ipsum non officia id. Sint id cupidatat labore duis. Aliqua cillum commodo mollit proident minim labore veniam incididunt velit commodo magna dolor ea. Minim pariatur elit aliquip adipisicing ut pariatur. Sit tempor sit magna cillum dolor cupidatat cillum sunt labore ad cupidatat ea. Anim do Lorem velit fugiat eiusmod veniam proident.</p>
<p>Est excepteur labore do anim veniam. Esse in ipsum irure sit. Reprehenderit amet non aliqua laborum.</p>
<p>Commodo pariatur reprehenderit ipsum nulla exercitation anim do id labore est duis ad sit ad. Et consequat est anim id excepteur laborum labore minim amet dolor dolore Lorem magna. Anim deserunt consequat et incididunt consequat labore minim elit eu elit eiusmod amet anim ullamco. Sit cillum dolore dolor sit magna in culpa adipisicing veniam commodo voluptate tempor ut. Duis ipsum aliquip enim anim dolore aliqua velit dolore adipisicing duis amet id non. Nisi nostrud enim commodo non consequat.</p>
<p>Qui Lorem pariatur laboris sit quis cupidatat. Labore id veniam proident fugiat eiusmod nostrud dolore dolor. Ea mollit fugiat proident aliqua consectetur velit incididunt ea elit consectetur ipsum laboris minim cupidatat. Ea sint esse adipisicing id non do tempor occaecat laboris esse ipsum minim. Reprehenderit laboris laboris aute nulla eiusmod laborum sunt deserunt ut do do ipsum. Ex non commodo sint amet commodo aute labore.</p>
<p>Pariatur aliqua aliqua excepteur occaecat magna ullamco sunt aute sit id est in. Deserunt enim nisi quis consectetur nostrud incididunt ipsum mollit culpa aliquip nisi. Laborum occaecat eu aliquip sint. Proident officia dolore ipsum ut sunt commodo aliqua eiusmod ullamco aute sint. Labore ea occaecat excepteur irure irure.</p>
<p>Ut amet labore adipisicing culpa anim. Anim sit ex proident consectetur elit cupidatat in pariatur nulla ex aliquip. Aliqua ipsum ad est duis excepteur do eu magna mollit.</p>
<p>Enim exercitation irure ullamco ut dolor amet amet. Consectetur sunt sit nostrud sunt adipisicing. Consequat esse exercitation do quis fugiat Lorem in occaecat id cupidatat labore. Proident non ad consequat veniam dolore duis eiusmod. Minim fugiat consequat labore eiusmod voluptate non aute irure ad.</p>
<p>Tempor officia aliqua aliquip labore. Consequat laboris quis exercitation occaecat aliquip do enim amet ipsum. Pariatur elit cillum Lorem minim sit ea laboris pariatur elit exercitation cupidatat elit. Dolor elit et eiusmod irure aliquip deserunt cupidatat ad sunt deserunt. In ea incididunt anim tempor eu veniam non do magna excepteur duis cupidatat exercitation ea. Nostrud dolor cupidatat laborum incididunt fugiat do deserunt nisi.</p>
</body>
</html>
'Programming > html5 & css3' 카테고리의 다른 글
| css3 / 위치속성 - 상하좌우, position: absolute, relative, height, z-index, overflow (0) | 2019.08.21 |
|---|---|
| css3 / font 속성 (0) | 2019.08.21 |
| CSS3 / border 속성 (0) | 2019.08.21 |
| CSS3 / 박스box 속성 - margin, padding, box-sizing (0) | 2019.08.21 |
| CSS3 / 가시속성 - display 속성 (0) | 2019.08.21 |
