테스트 사이트 - 개발 중인 베타 버전입니다

body 외부 정렬

· 3년 전 · 1368
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 두깨의 실선으로 설정합니다.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
3349
3346
3345
3343
3342
3341
3329
3321
3319
3318
3317
3316
3315
3314
3313
3312
3311
3310
3306
3305
3304
3303
3302
3301
3300
3299
3298
3297
3296
3294