CSS 기본 3

6. 박스 모델

6-1. width, height (요소의 크기)

• 인라인이 아닌 요소는 width와 height로 크기를 조절 가능
  • % : 부모의 길이 기준으로 상대적인 크기를 %로 지정
  • vw : 1vw = viewport 너비의 1% (500px 너비 => 1vw = 5px)
  • vh : 1vh = viewport 높이의 1% (800px 높이 => 1vh = 8px)
  • vmin / vmax : vmin은 너비와 높이 중 더 작은 값을 적용하고, vmax는 더 큰 값을 적용한다.
    ex) 너비 600px, 높이 1200px => vmin = 6px / vmax = 12px
  • 요소안의 텍스트가 한 줄일 경우 height와 line-height를 똑같이 맞춰주면 세로 방향에서
    가운데로 정렬한 것과 같은 모습이 된다.
  • calc(100% - 50px)과 같은 형식으로 연산자를 사용하여 필요에 맞게 길이 조절 가능

요소의 크기 단위 활용법 example

• 100vw = 뷰포트의 전체 너비 / 100vh 뷰포트의 전체 높이
• 요소 : 80vw X 80vw
  • 만약 viewport가 1000px X 500px이라면 요소의 크기는 800px X 800px가 되므로
    잘려서 보이게 된다.
• 요소 : 80vmin X 80vmin
  • 만약 viewport가 1000px X 500px이라면 요소의 크기는 400px X 400px가 되어
    요소 전체가 잘 보인다.

6-2. margin, padding, auto

• margin과 padding에는 아래 형식 중 하나로 값을 줄 수 있다. (값이 1 ~ 4개가 들어올 수 있음)
  • 공통 (값 하나)
  • 세로 가로 (값 두개)
  • 위 오른쪽 아래 왼쪽 (값 4개)
  • 위 가로 아래 (값 3개)
  • 블록 요소의 위, 아래 margin은 전후 블록 요소의 것과 상쇄됨

html

<p>margin과 padding은 -top, -bottom, -left, -right을 속성명에 붙여 따로 지정해줄 수 있습니다.</p>
<p class="special">이를테면 이런 상황에서 유용하죠.</p>

css

p {
  background-color: lightblue;
  margin: 24px;
  padding: 24px;
}

p.special {
  /* margin-top: */
  /* margin-bottom: */
  margin-left: 150px; 
  /* margin-right: */

  /* padding-top */
  /* padding-bottom */
  padding-left: 200px;
  /* padding-right */
}

• auto
  • margin 에서 auto 값은 너비가 지정된 블록 요소의 가료 방향에서 남은 공간을 채운다.
    이 방법은 컨텐츠 섹션을 화면 가운데로 배치하는데 널리 사용되었지만 flex 대체

• display 가 inline-block 요소의 경우 일때는 부모 요소의 text-align을 center 로 주면
  위와 같은 가운데 정렬을 할 수 있음

6-3. border

• border 속성을 사용하면 요소에 테두리를 줄 수 있다.
  선의 굵기와 스타일, 다양한 색을 값으로 줄 수 있다.
• box-sizing 속성은 너비와 높이 값에 padding과 border 값을 포함시킬지를 결정
  • content-box : 바깥쪽 padding과 border를 제외한 값으로 box를 지정
  • border-box : 바깥쪽 padding과 border값을 합친값으로 box를 지정
• border-radius 속성은 모서리를 둥글게 하는데 사용

6-4. overflow

• overflow : 부모 요소보다 높이나 너비값이 큰 자식 요소를 나타내는 방법을 지정 할 수 있다.
  • auto : 부모영역 안으로 자동으로 스크롤바를 생성해 자식요소를 보여줌
  • visible : 부모영역을 벗어난 자식요소를 그대로 보여줌
  • hidden : 부모영역을 벗어난 자식요소를 보여주지 않음
  • scroll : 부모영역 안에서 스크롤바를 생성해 자식요소를 보여줌
• overflow에 x축, y축 값을 함께 주거나 overflow-x, overflow-y 속성들로 따로 지정할 수 있다.
• 한쪽만 visible이면 auto와 같이 동작한다.

6-5. box-shadow

• box-shadow 로 박스 요소에 그림자를 줄 수 있다.
• text-shadow 에 spread 값과 inset 여부가 추가된 형식
• 문법 : inset 여부 | offset-x | blur-radius | spread-radius | color

box-shadow 그려주는 사이트 참고

7. 배경 꾸미기

• 이미지를 배경에 사용하기
  • background-image : 이미지 url을 입력하여 이미지 배경 생성
  • background-repeat : 이미지 반복여부 ex) repeat, no-repeat 등등..
  • background-position : ex) top left, top, bottom, center 등등..
  • background-size : contain (부모 안에 포함 정렬) , cover (부모안에 full로 공간 차지)

참고
얄코 html/css 정리