EI소프트

body 외부 정렬

· 2022-05-09 (월) 06:43:12 · 1858
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에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
레이아웃 23-06-12 조회 2,332
웹접근성 23-06-09 조회 2,837
레이아웃 23-06-08 조회 2,214
레이아웃 23-06-08 조회 3,971
기타 23-05-30 조회 1,684
레이아웃 23-05-23 조회 2,082
레이아웃 23-05-24 조회 1,639
레이아웃 23-05-25 조회 2,530
레이아웃 23-05-26 조회 2,072
HTML 23-05-11 조회 2,328
HTML 23-04-23 조회 1,501
HTML 23-03-16 조회 1,746
HTML 23-03-14 조회 1,727
HTML 23-03-14 조회 2,480
CSS 23-03-13 조회 1,837
CSS 23-03-13 조회 2,357
CSS 23-03-02 조회 2,299
HTML 23-02-26 조회 1,736
기타 23-02-26 조회 1,382
CSS 23-02-19 조회 1,590
기타 23-02-03 조회 2,784
CSS 23-01-03 조회 2,465
CSS 22-12-17 조회 2,462
반응형 22-10-22 조회 1,757
반응형 22-09-06 조회 4,933
웹접근성 22-06-29 조회 2,222
반응형 22-06-29 조회 2,580
CSS 22-06-29 조회 2,064
HTML 22-06-09 조회 2,274
HTML 22-05-11 조회 1,856