choco's story

floatfloat 란?: 요소가 문서의 일반적인 흐름에서 벗어나게 띄워(float)주고, 자신을 포함하고 있는 컨테이너의 왼쪽 혹은 오른쪽에 배치되게 하는 속성float은 해당 속성을 가진 요소가 문서의 흐름에서 제외되는 속성이지만, 필요한 만큼의 공간은 차지합니다.속성값의미none기본값, 원래 상태left자신을 포함하고 있는 컨테이너의 왼쪽에 떠있음right자신을 포함하고 있는 컨테이너의 오른쪽에 떠있음&nbsp&nbspfloat 예시 첫 번째 태그 p 두 번째 태그 p 세 번째 태그 p 네 번째 태그 p 다섯 번째 태그 p float 옵션 추가 전입니다.각 div와 p 태그가 위에서부터 순서대로 배치된 형태입니다.여기에 float을 하나씩 추가해보도..

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..