너비 ( width )와 높이 ( height )
너비와 높이는 요소의 너비와 높이를 설정하는데 사용한다. 값을 정의 할때는 px, %, vh, vw 사용한다. 블록 요소만 너비와 높이를 가질 수 있으며 margin, padding, border가 포함된 길이가 아니다. box-sizing 속성의 border-box에 영향을 받는다. ( padding과 border가 있을 때 )
min-width, min-height
최소 너비와 높이를 지정한다. 요소의 width값이 min-width 값보다 작아지는 것을 방지한다. min-width는 width 속성값을 무효화 시킨다.
max-width, max-height
최대 너비와 높이를 지정한다. 요소의 width값이 max-width 값보다 커지는 것을 방지한다. max-width는 width 속성값을 무효화 시킨다.
- auto : 브라우저가 너비와 높이를 계산한다. ( 기본값 )
- length ( 길이 ) : 너비와 높이를 절대 단위로 지정한다. ( px, cm )
- % ( 퍼센트 ) : 너비와 높이를 부모의 상대 단위로 지정한다.
- initial : 너비와 높이를 기본값으로 설정한다.
- inherit : 부모 요소로부터 값을 상속 받는다.
마진 ( margin ) 바깥 여백
margin 속성은 테두리 ( border )와 이웃하는 요소 사이의 간격이다. 마진은 background-color 속성을 영향 받지 않는다. CSS를 사용하면 마진 영역의 크기를 방향별로 따로 설정할 수 있다.
마진 ( padding )의 개별 설정
- margin-top : 윗쪽 마진 값을 설정함
- margin-right : 오른쪽의 마진 값을 설정함
- margin-bottom : 아래쪽의 마진 값을 설정함
- margin-left : 왼쪽의 마진 값을 설정함
마진 축약 표현
margin : 5 5 5 5 일경우 앞에서부터 차례대로 top right bottom left 시계방향 순서다.
margin : 5 5 5 일경우 top 좌우 bottom
margin : 20 30 일경우 top, bottom 20 left, right 30이다.
margin : 5 일경우 상 하 좌 우 전부 5이다
margin : 0 auto; 를 쓰면 수평 중앙 정렬이 된다.
패딩 ( padding ) 안쪽 여백
padding 속성은 내용 ( content )과 테두리 ( border )사이의 간격이다. 패딩은 background-color 속성을 영향받는다. CSS를 사용하면 패딩 영역의 크기를 방향별로 따로 설정할 수 있다. 또 box-sizing속성의 border-box 속성에 영향을 준다.
패딩 ( padding )의 개별 설정
- padding-top : 윗쪽 패딩 값을 설정함
- padding-right : 오른쪽의 패딩 값을 설정함
- padding-bottom : 아래쪽의 패딩 값을 설정함
- padding-left : 왼쪽의 패딩 값을 설정함
패딩 축약 표현
padding : 5 5 5 5 일경우 앞에서부터 차례대로 top right bottom left 시계방향 순서다.
padding : 5 5 5 일경우 top 좌우 bottom
padding : 20 30 일경우 top, bottom 20 left, right 30이다.
padding : 5 일경우 상 하 좌 우 전부 5이다
보더 ( border ) 테두리
border 속성은 내용 ( content )와 패딩 ( padding ) 영역을 둘러싸는 테두리의 스타일을 설정한다. border의 속성은 style, 두께, 방향, color가 있다. 또 box-sizing속성의 border-box 속성에 영향을 준다.
- border-style 속성 : 테두리 ( border )을 다양한 모양으로 설정할 수 있다.
- dotted : 테두리를 점선으로 설정한다.
- dashed : 테두리를 약간 긴 점선으로 설정한다.
- solid : 테두리를 실선으로 설정한다.
- double : 테두리를 이중 실선으로 설정한다.
- groove : 테두리를 3차원인 입체적인 선으로 설정하며, border-color 속성값에 영향을 받는다.
- ridge : 테두리를 3차원인 능선효과가 있는 선으로 설정하며, border-color 속성값에 영향을 받는다.
- inset : 테두리를 3차원인 내지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받는다.
- outset : 테두리를 3차원인 외지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받는다.
- none : 테두리를 없앤다.
- hidden : 테두리가 존재하기는 하지만 표현되지는 않는다.
-
border-width 속성 : 테두리 ( border )의 두께를 설정한다. 보통 px로 설정하며, 미리 설정해 놓은 예약어인 thin, medium, think을 사용하여 설정할 수 도 있다.
-
border-color 속성 : 테두리 ( border )의 색상을 설정한다. 기본적인 color 속성값들뿐만 아니라 투명한 선을 나타내는 transparent 속성값을 사용할 수 도 있다. border-color 속성값이 설정되지 않으면 해당 요소의 color 속성값을 그대로 물려 받는다.
-
border-radius 속성 : 테두리 ( border )를 둥그렇게 해준다.
( border가 있어야 border-radius를 쓸 수 있다. )
border-radius : 50% 정원 ( width와 height가 같은 경우. )
<div></div><style>
div{
width: 300px;
height: 300px;
border: 1px solid #000;
border-radius: 50%;
}
</style>
border-radius : 99999999999999px 하면 양쪽만 둥그런 원
<div></div><style>
div{
width: 200px;
height: 50px;
border: 1px solid #000;
border-radius: 99999999999999px;
}
</style>
- 테두리 ( border )의 개별 성정
- border-top : 윗쪽 보더 값을 설정함
- border-right : 오른쪽의 보더 값을 설정함
- border-bottom : 아래쪽의 보더 값을 설정함
- border-left : 왼쪽의 보더 값을 설정함
보더 축약 표현
border : 5 5 5 5 일경우 앞에서부터 차례대로 top right bottom left 시계방향 순서다.
border : 5 5 5 일경우 top 좌우 bottom
border : 20 30 일경우 top, bottom 20 left, right 30이다.
border : 5 일경우 상 하 좌 우 전부 5이다
외곽선 ( outline )
outline 속성은 border 바깥 외곽선을 말한다. 용도는 요소를 두드러져 보이게 만들고자 할 때 사용한다. border와의 차이점은 border는 width와 height에 영향을 주지만 outline은 영향을 주지않는다. outline은 보통 요소가 Focus받을 때 나타나는데 Tab 키를 누르면 Focus상태가 된다. 기본적으로 a태그와 input태그에 있다. outline도 border와 마찬가지로 style, 두께, 방향, color가 있다.
- outline-style 속성 : 외곽선 ( outline )을 다양한 모양으로 설정할 수 있다.
- dotted : 테두리를 점선으로 설정한다.
- dashed : 테두리를 약간 긴 점선으로 설정한다.
- solid : 테두리를 실선으로 설정한다.
- double : 테두리를 이중 실선으로 설정한다.
- groove : 테두리를 3차원인 입체적인 선으로 설정하며, border-color 속성값에 영향을 받는다.
- ridge : 테두리를 3차원인 능선효과가 있는 선으로 설정하며, border-color 속성값에 영향을 받는다.
- inset : 테두리를 3차원인 내지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받는다.
- outset : 테두리를 3차원인 외지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받는다.
- none : 테두리를 없앤다.
- hidden : 테두리가 존재하기는 하지만 표현되지는 않는다.
-
outline-width 속성 : 외곽선 ( outline )의 두께를 설정한다. 보통 px로 설정하며, 미리 설정해 놓은 예약어인 thin, medium, think을 사용하여 설정할 수 도 있다.
-
outline-color 속성 : 외곽선 ( outline )의 색상을 설정한다. 기본적인 color 속성값들뿐만 아니라 투명한 선을 나타내는 transparent 속성값을 사용할 수 도 있다. outline-color 속성값이 설정되지 않으면 해당 요소의 color 속성값을 그대로 물려 받는다.
-
ouline-offset 속성 : 외곽선 ( outline ) 과 요소의 가장자리 사이에 공간을 추가한다. 그 사이의 공간은 투명하다.
box-sizing 속성
box-sizing 속성은 css의 테두리 영역의 크기를 결정한다. box-sizing 속성값에는 content-box와 border-box가 있다.
- content-box : 지정한 CSS width 및 height를 순수 content영역에만 적용한다. margin, padding, border는 따로 계산되어 전체 영역이 설정값보다 커질 수 있다. ( 기본값 )
<style>
div{
width: 200px;
height: 50px;
padding: 20px;
border: 1px solid #000;
}
</style>
- border-box : 지정한 CSS width 및 height를 전체 영역에 적용한다. padding, border를 모두 합산하기 때문에 순수 content영역이 설정값보다 적어 질 수 있다.
<style>
*{
box-sizing: border-box;
}
div{
width: 200px;
height: 50px;
padding: 20px;
border: 1px solid #000;
}
</style>
출처 - https://developer.mozilla.org/ko/docs/Web/CSS/border-radius
https://dasima.xyz/css-box-sizing-content-box-vs-border-box/
