EI소프트

body 외부 정렬

· 3년 전 · 1525
body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

 

  • width: 600px; — 이것은 body가 항상 600 pixels 의 너비를 갖도록 강제합니다.
  • margin: 0 auto; — 여러분이 margin 또는 padding 처럼 한 속성에 두개의 값을 설정할 때, 첫 번째 값은 요소의 상단과 하단 (이 예시에서는 0입니다) 에 영향을 주고, 두 번째 값은 좌측 과 우측 (여기서, auto 는 가능한 수평공간의 왼쪽과 오른쪽을 같게 나눠주는 특별한 값입니다) 에 영향을 줍니다. 여러분은 또한 하나, 셋, 또는 네개의 값을 사용할 수도 있습니다.
  • background-color: #FF9500; — 전과 같이, 이것은 요소의 배경색을 설정합니다. html 요소를 위한 짙은 파란색에 반대되도록 body 에는 붉은 빛을 띄는 오렌지색 같은 것을 사용했었습니다. 한번 시험해보세요. 흰색이나 여러분이 원하는 어떤 색이든 편하게 사용해보세요.
  • padding: 0 20px 20px 20px; — padding 에는 콘텐츠의 주위에 약간의 공간을 주기 위한 네 개의 값이 있습니다. 이번엔 body의 상단에 no padding, 그리고 왼쪽, 아래 그리고 오른쪽에 20 pixels 을 설정하고 있습니다. 상단, 우측, 하단, 좌측 순서로 값을 설정합니다.(12시부터 시계방향)
  • border: 5px solid black; — 이것은 간단하게 body 모든 면의 border 를 5 pixels 두깨의 실선으로 설정합니다.
|
댓글을 작성하시려면 로그인이 필요합니다.

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
CSS 2년 전 조회 1,922
HTML 2년 전 조회 1,347
기타 2년 전 조회 1,022
CSS 2년 전 조회 1,249
기타 3년 전 조회 2,361
CSS 3년 전 조회 2,084
CSS 3년 전 조회 2,099
반응형 3년 전 조회 1,371
반응형 3년 전 조회 4,444
웹접근성 3년 전 조회 1,870
반응형 3년 전 조회 2,181
CSS 3년 전 조회 1,669
HTML 3년 전 조회 1,817
HTML 3년 전 조회 1,505
CSS 3년 전 조회 1,526
CSS 3년 전 조회 1,827
CSS 3년 전 조회 2,216
CSS 3년 전 조회 1,803
기타 4년 전 조회 2,664
반응형 4년 전 조회 3,284
웹접근성 4년 전 조회 2,658
CSS 4년 전 조회 5,099
기타 4년 전 조회 8,793
CSS 4년 전 조회 3,396
웹접근성 5년 전 조회 3,804
CSS 5년 전 조회 4,332
기타 5년 전 조회 3,470
CSS 5년 전 조회 3,759
기타 5년 전 조회 3,277
기타 5년 전 조회 3,036