08 레이아웃을 위한 스타일

08-1 CSS와 박스 모델

블록 레벨 요소 / 인라인 레벨 요소

• 블록 레벨 요소 (block-level)
  • 태그로 요소를 삽입했을 때, 혼자 한 줄을 차지하는 요소.
  • 즉 해당 요소의 너비가 100%. 왼쪽이나 오른쪽에 다른 요소가 올 수 없다.
  • <p> <h1>~<h6> <ul> <ol> <div> <blockquote> <form> <hr> <table> <fieldset> <address>
• 인라인 레벨 요소 (inline-level)
  • 줄을 차지하지 않는 요소.
  • 화면에 표시되는 콘텐츠만큼만 영역을 차지하고, 나머지 공간에 다른 요소가 온다.
  • <img> <object> <br> <sub> <sup> <span> <input> <textarea> <label> <button>

박스 모델

• <p>와 같은 블록 레벨 요소는 모두 박스 모델 형태이다.
• 박스 모델은 콘텐츠, 패딩, 테두리, 마진 으로 구성된다.

width, height - 콘텐츠 영역의 크기

.style {
    width: <크기> | <백분율> | auto;
    height: <크기> | <백분율> | auto;
}

• 크기 - px이나 cm 같은 단위+수치로 지정
• 백분율 - 박스 모델을 포함하는 부모 요소 를 기준으로 백분율로 지정
• auto - 기본값. 콘텐츠 양에 따라 자동으로 결정
• 실제 콘텐츠 크기 계산하기
  • 일반: 박스 모델의 너비 = width + 좌우 패딩 + 좌우 테두리
  • IE v6: 박스 모델의 width값 = 콘텐츠 너비 + 좌우 패딩 + 좌우 테두리

display - 화면 배치 방법 결정

• 이 속성을 통해 블록 레벨 - 인라인 레벨 요소를 바꿀 수 있다. 세로로 표시되는 목록을 가로로 바꿀 때, 한 줄로 표시되는 이미지에 여백과 테두리를 추가해 갤러리로 표시할 때 등.

.body {
    display: none | contents | block | inline | inline-block | table | table-cell;
}

• block - 해당 요소를 블록 레벨로 지정
• inline - 해당 요소를 인라인 레벨로 지정
  • ex) <li> 태그는 블록 요소이기 때문에 수직으로 배치되지만, <inline> 속성을 주면 수평 내비게이션용 목록으로 사용할 수 있다.
• inline-block - 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성을 지정
• none - 해당 화면 요소를 표시하지 않고, 공간도 차지하지 않는다.

08-2 테두리 관련 속성

border-style - 테두리 스타일 지정

• 기본값은 none.
• border-style 속성

그외 inset, outset, ridge 등이 있다.

border-width - 테두리 두께

• 테두리 크기를 직접 입력하거나, 키워드를 선택해서 테두리 두께 지정

.example {
    border-top-width: <크기> | thin | medium | thick;
    border-right-width: <크기> | thin | medium | thick;
    border-bottom-width: <크기> | thin | medium | thick;
    border-left-width: <크기> | thin | medium | thick;
    border-width: <크기> | thin | medium | thick;

    /* 예시 */
    border-width: 5px 10px 15px 20px;
}

• border-width로 값을 지정할 때,
  • 값이 1개면 전체 테두리 두께 지정
  • 값이 2개면 위/아래, 좌우 를 묶어서 지정
  • 값이 4개면 시계방향 (top - right - bottom - left) 순으로 지정

border-color - 테두리 색상

.example {
    border-top-color: <색상>;
    border-right-color: <색상>;
    border-bottom-color: <색상>;
    border-left-color: <색상>;
    border-color: <색상>;
}

border - 테두리 스타일 묶어서 지정

.example {
    border-top: <두께> | <색상> | <스타일>;
    border-right: <두께> | <색상> | <스타일>;
    border-bottom: <두께> | <색상> | <스타일>;
    border-left: <두께> | <색상> | <스타일>;
    border: <두께> | <색상> | <스타일>;
}

border-radius - 박스 모서리 둥글게

• 선택한 모서리를 원의 반지름(radius)만큼 곡선으로 나타낸다.
• 크기를 px, em 등과 같은 수치로 나타낼 수 있으며, 현재 요소 크기 기준 백분율로도 가능.
• border-radius로 한번에 속성을 정할 경우, 슬래시를 넣어 가로와 세로 반지름을 구분.

.example {
    border-top-left-radius: <크기> | <백분율>;
    border-top-right-radius: <크기> | <백분율>;
    border-bottom-right-radius: <크기> | <백분율>;
    border-bottom-left-radius: <크기> | <백분율>;
    border-radius: <가로 크기> / <세로 크기>;
}

box-shadow - 그림자 효과

• 그림자의 위치, 색상, 흐림 정도를 조절할 수 있다.
• 수평 거리, 수직 거리는 필수이며 기타 속성 값은 옵션.

08-3 여백을 조절하는 속성

margin - 요소 주변 여백

.example {
    margin-top: <크기> | <백분율> | auto;
    margin-right: <크기> | <백분율> | auto;
    margin-bottom: <크기> | <백분율> | auto;
    margin-left: <크기> | <백분율> | auto;
    margin: <크기> | <백분율> | auto;
}

• margin 값을 지정할 때,
  • 값이 1개면 전체 여백 두께 지정
  • 값이 2개면 위/아래, 좌우 를 묶어서 지정
  • 값이 4개면 시계방향 (top - right - bottom - left) 순으로 지정
• margin-left와 margin-right를 auto로 지정하면 웹 요소를 중앙에 배치할 수 있다.

padding - 콘텐츠와 테두리 사이 여백

• 사용법은 maring과 비슷하다.

.example {
    padding-top: <크기> | <백분율> | auto;
    padding-right: <크기> | <백분율> | auto;
    padding-bottom: <크기> | <백분율> | auto;
    padding-left: <크기> | <백분율> | auto;
    padding: <크기> | <백분율> | auto;
}

References

• Do it! HTML5+CSS3