속성 (Properties) 1편

박스모델

내외부 여백, 가로너비, 세로너비를 가짐

---

1. width/height (가로/세로 너비)

div {
 width : auto;
 height: 100px;
 max-width: 200px;
 min-height: 20px;
}

• auto : 브라우저 기본값
• 단위 : px, em, vw, vh 등
• Inline 요소 : auto값을 가짐
• Block 요소 : auto값일시 width는 부모요소만큼 늘어나고 height는 요소 크기만큼 줄어듦
  - max-width / max-height : 요소가 가질 수 있는 최대 너비
  - min-width / min-height : 요소가 가질 수 있는 최소 너비
  
  
  

2. margin (외부 여백)

div {
 margin: 30%;
 margin: -20px;
 margin-top: 20px;
 margin: 10px 20px;
 margin: 10px 20px 30px;
 margin: 10px 20px 30px 40px;
}

• 0 : 외부 여백 없음
• auto : 외부 여백을 브라우저가 계산
• % : 부모 요소를 기준으로 계산
• 음수 : 외부 여백이 줄어들어 요소끼리 겹치게 됨
• margin-top/bottom/right/left : 상하좌우에 여백을 따로 적용할 수 있음
  • 수치를 2개 입력한 경우 : 상하 / 좌우
  • 수치를 3개 입력한 경우 : 상 / 좌우 / 하 (상중하)
  • 수치를 4개 입력한 경우 : 상 / 우 / 하 / 좌 (시계방향)
    
    
    
    

3. padding (내부 여백)

div {
 padding: 10%;
 padding-left: 50px;
 padding: 10px 20px;
 padding: 10px 20px 30px;
 padding: 10px 20px 30px 40px;
}

• 0 : 내부 여백 없음
• % : 부모 요소를 기준으로 계산
• padding-top/bottom/right/left : 상하좌우에 여백을 따로 적용할 수 있음
  • 수치를 2개 입력한 경우 : 상하 / 좌우
  • 수치를 3개 입력한 경우 : 상 / 좌우 / 하 (상중하)
  • 수치를 4개 입력한 경우 : 상 / 우 / 하 / 좌 (시계방향)
    
    
    

4. border (경계선)

요소 바깥쪽에 생기며 두께만큼 요소의 전체 크기가 증가함

div {
 border: 1px solid red;
 border: 1px 2px 3px 4px dashed rgba(255, 255, 255, 0.5);
 border: 10px dashed solid dashed solid #ffffff;
 border-top: 25px solid white;
 border-bottom-width: 2px;
 border-radius: 10px;
 border-radius: 0 10px 20px 0;
}

• border 속성의 필수 작성요소
  • width : 선의 두께 (px, em, % 등)
  • style : 선의 종류 (solid, dashed 등)
  • color : 선의 색상 (색상이름, 16진수 코드, RGB, RGBA 등)
• margin이나 padding처럼 각 변마다 따로 적용 가능
• border-radius : 모서리를 둥글게 깎음
  • 수치를 4개 입력한 경우 : 왼쪽 상단부터 시계방향으로 적용
    
    
    

5. box-sizing

요소의 크기 계산기준을 지정함

div {
 width: 100px;
 height: 100px;
 padding: 20px;
 border: 20px;
 box-sizing: content-box;
 box-sizing: border-box;
}

• content-box : 요소의 내용을 기준으로 크기 지정 (기본값), padding과 border 수치만큼 요소가 커짐
  • 위 코드에서 content-box 적용시, 요소의 크기는 180px x 180px
• border-box : 요소의 내용 + padding + border 총합이 요소의 전체 크기가 되도록 내용의 크기를 조정.
  • 위 코드에서 border-box 적용시, 요소의 크기는 100px x 100px

6. overflow

요소의 크기 이상으로 내용이 넘쳤을 때 크기를 제어함

div {
 overflow: auto;
 overflow-x: hidden;
}

• visivle : 그대로 보여줌 (기본값)
• hidden : 넘친 구간을 잘라냄
• scroll : x축과 y축에 해당하는 스크롤바 생성
• auto : 넘친 축에 해당하는 스크롤바만 생성
  • overflow-x : x축으로 넘친 곳만 제어
  • overflow-y : y축으로 넘친 곳만 제어