공간 관련
CSS에서는 박스모델을 기준으로 요소의 공간에 안쪽여백을 주거나, 가로, 세로 높이를 조절하거나 다른 요소와의 간격조정을 위해 바깥 여백 등을 조절해 줄 수 있습니다.
박스모델 관련해서는 [HTML/CSS] Block, Inline 요소와 CSS Box model 에서 다루고 있습니다.
width
요소의 너비를 조정하는 속성 입니다.
기본적으로, 박스모델에서 콘텐츠 영역의 너비를 조정합니다.
선택자 {width : 크기; | 백분율; | auto;}크기: px, em, vh, vw 등의 크기 단위로 사용합니다.백분율: 부모요소에 대한 백분율 단위로 사용합니다.auto: 해당요소의 콘텐츠 양에 따라 자동으로 설정됩니다. (기본값)
height
요소의 높이를 조정하는 속성 입니다.
기본적으로, 박스모델에서 콘텐츠 영역의 높이를 조정합니다.
선택자 {height : 크기; | 백분율; | auto;}크기: px, em, vh, vw 등의 크기 단위로 사용합니다.백분율: 부모요소에 대한 백분율 단위로 사용합니다.auto: 해당요소의 콘텐츠 양에 따라 자동으로 설정됩니다. (기본값)
box-sizing
요소에 대해 width, height 속성이 조정할 너비와 높이 영역을 결정합니다.
선택자 {box-sizing: content-box; | border-box;}content-box: 콘텐츠 영역에 대해서만 너비와 높이를 설정합니다. (기본값)border-box: 콘텐츠+패딩+보더 영역까지 모두 합쳐서 너비와 높이를 결정합니다.
💡
content-box와border-box차이를 한눈에 보기!
content-box일 경우 딱, 콘텐츠 요소 크기만큼에 대해서만 너비를 조정하기 때문에 실제 요소의 너비는 콘텐츠의 너비+패딩+보더의 두께를 포함해줘야한다.
border-box일 경우는 보더까지 포함한 모든 요소의 너비를 조정해줄 수 있기 떄문에 지정한 너비 내에서 패딩, 보더의두께, 콘텐츠의 너비가 결정된다.
box-shadow
박스모델에 대해 그림자 효과를 주는 속성 입니다.
선택자 {box-shadow: 수평거리 수직거리 흐림정도 번짐정도 색상 inset여부;}수평거리: 그림자가 가로로 얼마나 떨어져있는지, 양수는 오른쪽으로 음수는 왼쪽으로 그림자를 이동시킵니다. (필수값)수직거리: 그림자가 세로로 얼마나 떨어져있는지, 양수는 아래쪽으로 음수는 위쪽으로 그림자를 이동시킵니다. (필수값)흐림정도: 그림자의 진하기를 표현하며 0이상 숫자로 값이 커질수록 흐려집니다. 미입력시 기본값은 0 입니다.번짐정도: 그림자가 영역에 대해 퍼짐 정도를 조정합니다. 양수는 퍼지게 음수는 축소되게 표현합니다. 미입력시 기본값은 0 입니다.색상: 그림자의 색상을 표시합니다. 미입력시 기본값은 검정색 입니다.inset: 해당 값 설정시 그림자가 요소의 안쪾으로 표시됩니다.
padding
박스모델 내 안쪽 여백, 패딩을 조정해주는 속성 입니다.
선택자 {padding: 크기;}크기: px, em, vh, vw 등의 크기 단위로 사용합니다.백분율: 부모요소에 대한 백분율 단위로 사용합니다.auto:display속성에 따라 자동으로 여백을 갖습니다.
margin
박스모델 바깥쪽 여백, 마진을 조정해주는 속성 입니다.
선택자 {margin: 크기;}크기: px, em, vh, vw 등의 크기 단위로 사용합니다.백분율: 부모요소에 대한 백분율 단위로 사용합니다.auto:display속성에 따라 자동으로 여백을 갖습니다.
padding,margin속성의 경우 [HTML/CSS] Block, Inline 요소와 CSS Box model 에서 자세하게 다루고 있습니다.
display
html 요소들은 모두 블럭요소 또는 인라인요소의 성격을 갖습니다.
display속성은 기본적으로 요소들이 갖고있는 해당 성격을 변경해줄 수 있습니다.
선택자 {display: 키워드;}block: 블럭요소로 만들어줍니다.inline: 인라인요소로 만들어줍니다.inline-block: 인라인요소이면서 블럭요소의 성격(마진,패딩 설정가능)을 갖도록 만들어줍니다.none: 해당 요소를 화면에 표시하지 않게 합니다.
위치 관련
요소의 위치에 대해 설정할 수 있는 속성들 입니다.
float
요소를 띄워서 원하는 방향으로 위치를 조정해주는 속성입니다.
주로 본문 옆에 이미지 등을 딱 붙여서 배치해둘 때 등의 경우 사용합니다.
선택자 {float: left; | right; | none;}none: 부모요소를 따라갑니다. (기본값)left: 요소를 왼쪽으로 띄웁니다.right: 요소를 오른쪽으로 띄웁니다.
💡 요소를 띄운다(floating)?
띄운다는 표현은 부모요소 내에 위치하던 상황에서 공중으로 띄어져있는것처럼 영역을 잡고있다는 뜻으로 다음과 같은 특징을 같습니다.
① 부모요소에서 떨어져 띄워져 있는 상태로 부모요소가 해당float요소의 영역을 인식하지 못함
박스1, 박스2는 현재 float 설정 중으로 부모영역에서 띄어져있기 때문에 부모는 영역의 세로 높이를 잡지 못하는 상황을 확인 할 수 있습니다.
②float요소 공중에 떨어져있기 떄문에 다른요소들과 영역 공유 가능. 단, 콘텐츠 요소는 기본적으로는 겹치지 않음
박스1과 박스2는float: left;설정이 되어있어서 현재 부모요소에서 동 떨어져있습니다.
다만,float특성 상 영역에 대해서는 공유하나 콘텐츠끼리는 겹치지 않게 표현되기 때문에 box1,2(float O)와 box3,4(float X) 끼리 영역은 겹치나 텍스트는 겹치지 않는 모습입니다.
③float요소 다음에 오는 요소들에도 전부 영향을 미침
이처럼float를 사용하면 그 다음 작성되는 요소들에도 영향이 있기 때문에float의 영향을 제거하기 위해서는clear속성을 사용해줘야합니다.
위 그림을 보면 박스3에clear: left;가 설정되어float속성에 더 이상 영향을 받지 않고 본인의 영역을 정상적으로 차지하고 있는 것을 확인할 수 있습니다.
clear
위에서 나온 float속성의 영향을 제거하는 속성입니다.
선택자 {clear: left; | right; | both;}left:float: left;를 해제합니다.right:float: right;를 해제합니다.both:float: left;와float: right;를 해제합니다.
position
요소의 배치방법을 정해주는 속성입니다.
선택자 {position: static; | relative; | absolute; | fixed;}static: 문서의 흐름에 맞게 배치됩니다. (기본값)relative: 기존위치 기준으로 요소의 위치값을 지정할 수 있습니다.absolute: 부모 요소 중position: relative;가 설정된 가장 가까운요소 기준으로 요소의 위치값을 지정할 수 있습니다.fixed: 브라우저 창을 기준으로 요소의 위치값을 지정할 수 있습니다.
💡
position: absolute;의 기준위치
position: absolute;의 경우 본인의 부모 요소 중position: relative;가 설정된 가장 가까운요소 기준으로 요소의 위치값을 지정할 수 있습니다.
단, 부모 요소를 쭉 올라가도position: relative;가 설정된 요소가 없을 시는 결국 최상단 부모요소인<body>기준으로 위치값을 설정하게 됩니다.
left, right, top, bottom
position 속성으로 정한 배치방법에 따라 요소의 위치값을 지정해주는 속성 입니다.
선택자 {
position: 값;
left: 크기;
top: 크기;
}left: 크기;: 기준위치에 따라서 왼쪽으로 얼마나 이동할지 지정합니다.right: 크기;: 기준위치에 따라서 오른쪽으로 얼마나 이동할지 지정합니다.top: 크기;: 기준위치에 따라서 위쪽으로 얼마나 이동할지 지정합니다.bottom: 크기;: 기준위치에 따라서 아래쪽으로 얼마나 이동할지 지정합니다.
배경 관련
요소의 배경 색상, 이미지 등을 설정해줄 수 있는 속성 입니다.
background-clip
요소의 배경에 대해 박스모델 기준 어디까지 적용시켜줄지 범위를 결정하는 속성 입니다.
선택자 {background-clip: border-box; | padding-box; | content-box;}border-box: 박스모델의 가장 외곽인 보더까지 배경 영역을 설정해줍니다. (기본값)padding-box: 패딩 영역까지만 배경 영역을 설정해줍니다.content-box: 콘텐츠 영역에만 배경 영역을 설정해줍니다.
background-color
요소의 배경에 대해 색상을 적용해줄 수 있는 속성 입니다.
선택자 {background-color: 16진수; | rgb/rgba; | hsl/hsla; | 색상명;}16진수:#RRGGBB로 이루어진 16진수 표기법 입니다.rgb/rgba:rgb(rrr, ggg, bbb)또는rgb(rrr, ggg, bbb, alpha)로 표기합니다.hsl/hsla:hsl(hue, saturation%, lightness%)또는hsl(hue, saturation%, lightness%, alpha)로 표기합니다.색상명: 영문으로 표기하며,black,red,blue등의 영문 색상명 입니다.
background-image
요소의 배경에 대해 이미지를 적용해줄 수 있는 속성 입니다.
선택자 {background-image: url(이미지파일 경로);}background-repeat
배경을 이미지로 설정한 경우 해당 이미지의 반복여부 및 반복방법에 대해 설정할 수 있는 속성 입니다.
선택자 {background-repeat: repeat; | repeat-x; | repeat-y; | no-repeat;}repeat: 영역 안에 가득 찰 때까지 x, y축으로 반복합니다. (기본값)repeat-x: 영역 안에서 너비에 가득 찰 때까지 x축으로 반복합니다.repeat-y: 영역 안에서 높이에 가득 찰 때까지 y축으로 반복합니다.no-repeat: 한번만 표시하고 반복을 하지 않습니다.
background-size
배경을 이미지로 설정한 경우 해당 이미지의 사이즈를 설정할 수 있습니다.
선택자 {background-size: auto; | contain; | cover; | 크기; | 백분율;}auto: 해당 이미지의 원래 크기로 설정합니다. (기본값)contain: 해당 이미지가 요소 내 모두 들어올 수 있도록 설정합니다.cover: 해당 이미지가 요소를 모두 다 덮도록 설정합니다.크기: 이미지의 너비, 높이의 크기를 직접 표시합니다. 하나만 작성 시 너비값으로 인식 후 높이는 이미지의 비율에 맞춰 자동으로 설정 합니다.백분율: 이미지의 크기를 해당 요소에 대해 백분율로 표시합니다.
💡
contain과cover는 무슨 차이가 있을까?
contain의 경우, 이미지의 가로, 세로 모두 요소 내 영역 안으로 들어오도록 설정됩니다. 따라서 이미지 크기와 요소의 크기에 따라 요소에 이미지가 가득차지 않고 공백이 있을 수 있습니다.
cover의 경우, 요소 영역 안으로 이미지의 비율을 깨지않으면서 가득 차도록 설정됩니다. 따라서 이미지의 크기와 요소의 크기에 따라 이미지가 짤릴 수 있습니다.
background-position
배경을 이미지로 설정한 경우 요소 내 이미지의 위치를 설정할 수 있습니다.
선택자 {background-position: 수평위치 수직위치;}수평위치: 요소 내에서 수평 위치를 설정합니다.left: 요소의 좌측 끝에서부터 이미지가 위치합니다.center: 요소의 가운데 이미지가 위치합니다.rigth: 요소의 우측 끝에서부터 이미지가 위치합니다.크기,백분율: 요소의 왼쪽기준 입력한 크기/백분율 만큼의 지점부터 이미지가 시작합니다.
수직위치: 요소 내 수직 위치를 설정합니다.top: 요소의 상단에서부터 이미지가 위치합니다.center: 요소의 가운데 이미지가 위치합니다.bottom: 요소의 하단에서부터 이미지가 위치합니다.크기,백분율: 요소의 상단기준 입력한 크기/백분율 만큼의 지점부터 이미지가 시작합니다.
background-origin
배경을 이미지로 설정한 경우 배경이미지를 박스모델 기준 어디서 부터 시작점을 줄지를 결정하는 속성 입니다.
선택자 {background-origin: border-box; | padding-box; | content-box;}border-box: 박스모델의 가장 외곽인 보더의 좌측 상단에서 부터 배경 이미지를 설정해줍니다.padding-box: 패딩 영역 좌측 상단에서 부터 배경 이미지를 설정해줍니다. (기본값)content-box: 콘텐츠 영역 좌측 상단에서 부터 배경 이미지를 설정해줍니다.
💡
background-clip과background-origin차이점
background-clip의 경우 배경 이미지를 포함한 배경 자체의 영역을 결정해주는 속성이라면,background-origin은 배경 이미지의 시작점을 결정해주는 속성입니다.
background-attachment
배경이미지가 들어간 요소에 스크롤이 생길때 배경이미지의 스크롤 동작여부를 설정합니다.
선택자 {background-attachment: scroll; | local; | fixed;}scroll: 배경영역을 해당 요소 박스모델 크기 자체로 고정 합니다.(기본값)local: 배경영역을 해당 요소의 스크롤 가능영역에 고정 합니다.fixed: 배경영역을 뷰포트 내 해당요소의 영역으로 고정합니다.
💡
scroll과local의 차이점<head> <style> body { height: 1000px; } .box { width: 960px; height: 2000px; background: url(/images/image1.jpeg); background-size: contain; background-attachment: scroll; overflow: scroll; border: 1px solid black; } </style> </head> <body> <div class="box"> 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. </div> </body>위 코드를 기준으로
background-attachment속성을scroll로 했을때는 요소 내 스크롤 시에는 배경이 고정 됨을 확인할 수 있습니다. 즉, 요소의 크기만큼에 배경이 고정됨을 의미합니다.
local로 할 경우, 요소 내 스크롤 시에도 배경이 스크롤 됨을 알 수 있습니다. 즉, 요소의 스크롤 가능 영역에 배경이 고정됨을 의미합니다.
background
위 설명한 backgroun 관련 속성들 중 backgroun-size 제외 모두 한 속성으로 작성할 수 있습니다.
값 사이는 공백으로 구분합니다.
선택자 {background: url(이미지경로) attachment값 origin값}참고
Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석 - 고경희
위 책을 공부하며 작성하고 있습니다!
