/*Margin : 테두리(Border) 바깥에 위치하는 요소의 외부 여백 영역이다.
margin 프로퍼티 값은 마진 영역의 두께를 의미한다.
기본적으로 투명(transparent)하며 배경색을 지정할 수 없다.*/
/*Border : 테두리 영역으로 border 프로퍼티 값은 테두리의 두께를 의미한다.*/
/*Padding : 테두리(Border)
안쪽에 위치하는 요소의 내부 여백 영역이다.
padding 프로퍼티 값은 패딩 영역의 두께를 의미하며
기본색은 투명(transparent)이다. 요소에 적용된 배경의 컬러, 이미지는 패딩 영역까지 적용된다.*/
/*Content : 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역이다.
width, height 프로퍼티를 갖는다.*/
div {
/* 배경색의 지정: 콘텐츠 영역과 패딩 영역에 적용된다. */
background-color: lightgrey;
/* 콘텐츠 영역의 너비 */
/*width 와 height 프로퍼티는 요소의 너비와 높이를 지정하기 위해 사용된다.
이때 지정되는 요소의 너비와 높이는 콘텐츠 영역을 대상으로 한다.*/
/*이는 box-sizing 프로퍼티에 기본값인 content-box 가 적용되었기 때문이다.
box-sizing 프로퍼티에 border-box 를 적용하면 콘텐츠 영역, padding, border 가 포함된 영역을
width / height 프로퍼티의 대상으로 지정할 수 있다.*/
/* width 와 height 로 지정한 콘텐츠 영역보다 실제 콘텐츠가 크면 콘텐츠 영역을 넘치므로
overflow:hidden 을 지정하여 넘친 콘첸를 감출 수 있다.*/
/*width 와 height 프로퍼티를 비롯한 모든 박스모델 관련
프로퍼티(margin, padding, border, box-sizing 등)는 상속되지 않는다.*/
width: 300px;
/* 패딩 영역의 두께 */
padding: 25px;
/* 테두리: 두께 형태 색상 */
border: 25px solid navy;
/* 마진 영역의 두께 */
margin: 25px;
}
.content-box {
width: 600px;
border: 10px solid;
padding: 50px;
margin: 50px;
background-color: red;
}
.border-box {
/*코드 18 ~ 22*/
box-sizing: border-box;
width: 600px;
border: 10px solid;
padding: 50px;
margin: 50px;
background-color: red;
}
div {
border: 5px solid red;
/*margin-top: 40px;*/
/*margin-right: 30px;*/
/*margin-bottom: 20px;*/
/*margin-left: 10px;*/
margin: 40px 30px 20px 10px;
/*padding-top: 10px;*/
/*padding-right: 20px;*/
/*padding-bottom: 30px;*/
/*padding-left: 40px;*/
padding: 10px 20px 30px 40px;
/*margin-top: 25px;*/
/*margin-right: 50px; margin-left: 50px;*/
/*margin-bottom: 75px*/
margin: 25px 50px 75px;
/*margin-top: 25px; margin-bottom: 25px;*/
/*margin-right: 50px; margin-left: 50px;*/
margin: 25px 50px;
/*margin-top: 25px; margin-right: 25px; margin-bottom: 25px; margin-left: 25px;*/
margin: 25px;
/*margin 프로퍼티에 auto 키워드를 설정하면 해당 요소를 브라우저 중앙에 위치 시킬 수 있다.*/
margin: 0 auto;
/*요소 너비가 브라우저 너비보다 크면 가로 스크롤바가 만들어지기 때문에 max-width 를 통해 해결*/
max-width: 600px;
/*max-width 프로퍼티는 요소 너비의 최대값을, min-width 프로퍼티는 요소 너비의 최소값을 지정한다.
max-width: 300px;의 경우, 브라우저의 너비가 300px 보다 작아지면
요소 너비는 브라우저의 너비에 따라서 작아진다.
min-width: 300px;의 경우 브라우저의 너비가 300px 보다 작아져도
요소 너비는 지정 너비(300px)을 유지한다.*/
}
p {
background: palegreen;
padding: 10px;
}
/*border-style 프로퍼티는 테두리 선의 스타일을 지정한다.*/
p.dotted { border-style: dotted; }
p.dashed { border-style: dashed; }
p.solid { border-style: solid; }
p.double { border-style: double; }
p.groove { border-style: groove; }
p.ridge { border-style: ridge; }
p.inset { border-style: inset; }
p.outset { border-style: outset; }
p.none { border-style: none; }
p.hidden { border-style: hidden; }
p.mix { border-style: dotted dashed solid double; }
p {
background: palegreen;
padding: 10px;
}
/*프로퍼티 값의 갯수에 따라 4개 방향(top, right, left, bottom)에 대하여 지정이 가능하다.*/
p.d1 {
/* four sides */
border-style: dashed;
}
p.d2 {
/* horizontal | vertical */
border-style: dotted solid;
}
p.d3 {
/* top | horizontal | bottom */
border-style: hidden double dashed;
}
p.d4 {
/* top | right | bottom | left */
border-style: none solid dotted dashed;
}
/*border-width 프로퍼티는 테두리의 두께를 지정한다. 프로퍼티 값의 갯수에 따라 */
/*4개 방향(top, right, left, bottom)에 대하여 지정이 가능하다.*/
/*border-width 프로퍼티는 border-style 과 함께 사용하지 않으면 적용되지 않는다.*/
p {
background: palegreen;
padding: 10px;
border-style: solid
}
p.one {
border-width: thin; /* 1px */
}
p.two {
border-width: medium; /* 3px */
}
p.three {
border-width: thick; /* 5px */
}
p.four {
border-width: 15px;
}
p.five {
border-width: 2px 10px 4px 20px;
}
p {
background: palegreen;
padding: 10px;
border-style: solid;
}
p.one {
border-color: red;
}
p.two {
border-color: green;
}
p.three {
border-color: red green blue yellow;
}
.border-rounded {
/* 4 꼭지점에 대해 Radius 지정 */
/*원의 반지름이 20px*/
border-radius: 20px;
/* 위 코드는 아래의 shorthand 이다.
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px; */
/*각각의 모서리를 개별적으로 설정*/
/*border-radius: 10px 40px 40px 10px;*/
}
.border-circle {
border-radius: 50%;
}
.border-football {
/* top-left & bottom-right | top-right & bottom-left */
border-radius: 15px 75px;
/*두개의 반지름을 지정하여 타원형 둥근 모서리*/
/*border-top-left-radius: 50px 25px;*/
/*x 반지름 y 반지름*/
}
.border-rounded {
border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
/*border-top-left-radius: 10px 5px;*/
/*border-top-right-radius: 20px 10px;*/
/*border-bottom-right-radius: 30px 15px;*/
/*border-bottom-left-radius: 40px 20px;*/
/*x 반지름 4개 / y 반지름 4개*/
}
p {
/*border-width, border-style, border-color 를 한번에 설정하는 shorthand 프로퍼티.*/
border: 5px solid red;
}