EI소프트

body 외부 정렬

· 2022-05-09 (월) 06:43:12 · 1835
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 두깨의 실선으로 설정합니다.
|
댓글을 작성하시려면 로그인이 필요합니다.

퍼블리셔팁

1,282건

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

+
분류 제목 글쓴이 날짜 조회
CSS 22-05-09 조회 1,836
CSS 22-04-29 조회 2,169
CSS 22-04-28 조회 2,546
CSS 22-03-14 조회 2,068
기타 21-12-23 조회 3,038
반응형 21-12-06 조회 3,609
웹접근성 21-12-06 조회 3,065
CSS 21-08-10 조회 5,528
기타 21-06-24 조회 9,358
CSS 21-06-16 조회 3,727
웹접근성 20-12-08 조회 4,196
CSS 20-09-16 조회 4,695
기타 20-09-10 조회 3,872
CSS 20-08-04 조회 4,109
기타 20-08-03 조회 3,626
기타 20-03-23 조회 3,379
CSS 20-01-14 조회 4,246
HTML 20-01-14 조회 4,874
기타 19-09-26 조회 8,437
웹접근성 19-05-25 조회 3,567
기타 19-03-26 조회 3,470
기타 19-03-17 조회 4,829
기타 19-02-20 조회 4,683
기타 19-02-12 조회 4,631
기타 19-02-12 조회 3,128
기타 19-02-12 조회 3,172
기타 19-02-07 조회 3,021
기타 19-02-07 조회 2,994
기타 19-02-07 조회 3,634
기타 19-02-04 조회 9,886