choco's story

background배경(background)은 콘텐츠의 배경을 정의합니다.단축 속성이며 색상, 이미지, 반복 등 다양한 하위 속성을 추가할 수 있습니다.아래 표는 배경의 하위 속성 중 일부입니다.하위 속성역할background-color배경 색상 정의background-image배경 이미지 정의background-position배경 이미지의 초기 위치 정의background-size배경 이미지의 크기 정의background-repeat배경 이미지의 반복 방법 정의&nbsp&nbsp&nbspbackground 사용 예시 깃허브 깃허브 아이콘을 이미지로 해서 400px * 300px 크기의 div안에 넣었습니다.그러나 이미지의 기본 크기가 매우 커서 div 안에 다 담기지 않는 모습입니다. 이..

box-sizingbox-sizing 이란?: 해당 요소의 너비(width)와 높이(height)를 계산하는 방법을 지정하는 속성너비와 높이가 같더라도, box-sizing 속성값에 따라 크기가 달라질 수 있습니다.아래는 해당 box-sizing 속성값을 정리한 표입니다.속성값의미content-box기본값, 너비와 높이가 콘텐츠 영역만을 포함&nbspborder-box너비와 높이가 안쪽 여백과 테두리까지 포함만약 200px * 20px의 너비와 높이 콘텐츠인 경우...content-box : 내부 콘텐츠 영역 크기만 200px * 20pxborder-box : border와 padding까지 합하여 200px * 20px이렇게 값이 계산되어 나타납니다.아래 예시를 통해 어떤 식으로 값이 적용되는지 확인해..

padding 과 marginpadding과 margin이 정확히 어떤 영역의 공백을 뜻하는지는 아래 이미지를 보면 쉽게 이해할 수 있습니다.테두리 선인 border를 기준으로 안쪽에 있는 여백을 padding, 바깥쪽에 있는 여백을 margin이라고 합니다.이러한 여백은 둘 padding과 margin 둘 다 상하좌우 네 개의 면에 전부 존재하는 영역입니다.그런데 이 여백을 어느 부분에는 적용하고, 어디는 아예 없애고 싶은데 어떻게 할 수 있을까요?아래 두 개의 방법을 사용하면 각각 여백을 주는 것이 가능합니다.하위 속성 정의여러 값을 한 번에 정의하위 속성 정의padding과 margin 모두 상하좌우 여백을 정의할 수 있는 개별 속성이 있습니다.각 속성 옆에 top, bottom, left, rig..