CSS-2

박스를 구성하는 요소

• border : 테두리
• padding : 안쪽 여백
• margin : 바깥쪽 여백

border

테두리는 심미적으로도 필요하지만, 개발 시 각 영역이 해당하는 크기를 알기 위해서 보통 레이아웃을 만들 때 크기를 시각적으로 보이도록 만든다.

p {
  border : 1px solid #color;
  }

border는 두께, 스타일, 색상 순으로 입력하며, 색상은 HEX 또는 사전 지정된 색상 이름을 사용한다.

margin, padding

p {
   margin : 10px 20px 30px 40px;
  }

• margin과 padding은 위, 오른쪽, 아래, 왼쪽 (시계방향) 순서로 입력한다.
• 값을 2개 넣으면 (위, 아래), (왼쪽, 오른쪽)으로 적용된다
• 값을 1개 넣으면 모든 방향에 적용된다
• 음수도 적용 가능하다. 다른 엘리먼트와 겹치거나 화면 밖으로 뺄 수도 있다

넘치는 컨텐츠 처리

박스보다 컨텐츠가 더 크면 빠져나오는게 기본 동작이다
그럴 땐 셀렉터 내용에 명령어를 추가하면 속성을 변경할 수 있다.

overflow : auto; 상하좌우 자동 스크롤
overflow : hidden; 스크롤하지 않고 내용을 가림
overflow-x나 -y를 사용하면 한쪽 축으로만 스크롤되도록 할 수 있다

박스 사이즈 처리

박스의 너비는 콘텐츠 영역 + 테두리 두께 + 여백으로 구성된다
이걸 안쪽 박스에 100%를 때리면 밖으로 다 튀어나간다

#container {
   width : 300px;
   padding : 10px;
   background-color : yellow;
   border : 2px solid red
   }
#inner {
   width : 100%;
   padding : 200px;
   border : 2px solid green;
   background-color : lightgreen;
   padding : 30px;
   }

이렇게 사이즈를 설정했다면
container은 324px의 크기를, inner는 364px의 크기를 갖는다.
안쪽 박스가 컨테이너보다 더 커서 사이즈가 엉망진창이 되는데,
이럴 때 의도대로 박스 사이즈를 설정하려면

* {
   box-sizing : border-box;
  }

이렇게 코드를 추가하면 모든 여백과 테두리를 포함한 값을 300px(예시)로 계산한다.

• 여기서 * 셀렉터는 html의 모든 태그, 모든 영역에 적용한다는 뜻