ch8

CSS와 박스 모델

• 박스모델은 블록 레별 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라짐
• 블록 레벨 요소 : 너비가 100% 차지하는 (한 줄 다 차지함)요소 → 왼쪽이나 오른쪽에 다른 요소 올 수 없음 (ex. h1, div, p, li 등)
• 인라인 레벨 요소 : 영역을 콘텐츠만큼만 차지 → 나머지 공간에 다른 요소가 올 수 있음 (ex. span, img, strong 등)

• 박스 모델(box model) 요소 : 스타일시트에서 박스 형태인 요소

• 콘텐츠 영역, ppadding, border, margin 등으로 구성됨 → 전부 상하좌우로 나누어져 있음

• 인라인 레벨 요소는 다른 웹 요소와 어울려서 표시되어 마진과 패딩 값이 정확하게 적용되지 않음

• padding : 박스와 콘텐츠 영역 사이의 여백

• border : 박스의 테두리

• margin : 여러 박스 모델 사이끼리의 여백

• width, height : 콘텐츠 영역의 크기 지정. auto는 너비와 높이값이 콘텐츠 양에 따라 자동으로 결정되며 default 값임.

• box-sizing : 박스 모델의 크기 결정
  - weight와 height는 마진과 테두리 뺀 콘텐츠 영역의 크기만 가리킴
  - box-sizing은 박스 모델의 너비와 높이를 어떻게 결정할 것인지에 따라 옵션 선택
  - border-box : padding, border 포함하여 weight 지정
  - center-box : 콘텐츠 영역만 weight 지정. default 값임
  - 박스 모델에서 요소 크기 계산할 때는 콘텐츠와 padding, border를 포함하여 계산해야 한다. (margin 은 제외!!)

• box-shadow : 박스 모델에서 그림자 효과 줌

테두리 스타일 지정

• 박스 모델은 테두리나 마진, 패딩 등을 상하좌우 다르게 지정할 수 있음.
• 방향 : top → right → bottom → left (시계방향)
• border : 두께 + 모양 + 색상을 한 줄로 지정
• border-style : 테두리 스타일 지정. none 이 default 값
• border-width : 테두리 두께. 값 2개 지정하면 상하/좌우로 테두리 값 적용됨
• border-color
• border-radius : 모서리 둥글게 하기. width, height 똑같이 하고 border-radius를 그 절반값으로 하면 원 만들 수 있음
• border-top-left-radius, border-bottom-right 등을 통해 꼭짓점마다 둥근 정도 다르게 처리 가능

여백 조절 속성

• margin : 속성 여러개 지정하여 상하좌우 다르게 마진 설정 가능 혹은 margin-left, margin-bottom 등 이용하기
• 웹 문서 전체를 화면 중앙에 배치하려면 (텍스트 경우 text-align을 사용했었다.) margin-left와 margin-right를 auto로 지정하면 된다 → 웹 브라우저 화면 너비에서 요소 너비값을 뺸 나머지 영역을 계산하여 좌우 마진으로 자동 계산해줌
• auto : display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정함
• margin overlap 또는 margin collapse : 여러 요소의 마진 겹치면 더 큰 값으로 합쳐짐. max(margin1, margin2, margin3...) 이런 느낌
• padding : 값 지정은 마진과 비슷함

웹 문서의 레이아웃

• display : 블록 레벨 요소와 인라인 레벨 요소를 바꿔서 사용할 수 있음
  - block : 인라인 → 블록
  - inline : 블록 → 인라인
  - inline-block : inline + 블록처럼 width와 height 지정 가능
  - none : 해당 요소 화면에 표시 x
• float : 왼쪽이나 오른쪽으로 배치 가능. 속성값은 left, right, none(default)
• clear: float 속성 해제함
• float 속성 사용해서 웹 요소를 왼쪽이나 오른쪽에 배치하면 그 다음에 넣는 다른 요소에도 속성이 전달되기 때문. float 속성으로 layout 만들고 나서 기본 흐름으로 바꾸고 싶을 때 사용.
• display: inline-block 과 float:left 는 어떻게 다른가?
  - display는 기본 마진과 패딩 있지만 float에는 없음
  - float 사용하고 나서 필요없으면 clear 속성으로 float 해제해야 함

웹 요소의 위치 지정

• left, right, top, bottom : position 속성으로 기준 위치를 정한 뒤 속성값을 통해 웹 요소의 위치 정함
• position : 배치방법을 지정함. 속성값으로는 static(default) | relative | absolute | fixed 이렇게 있음
  - static 일 때만 빼고 위치값(left, right, top, bottom) 사용 가능
  - relative : 위치값 사용 가능한 static
  - absolute : relative 값 사용한 상위 요소 기준으로 위치를 지정하여 배치함. 만약 부모 요소에 없으면 상위 요소 → 더 상위 요소 찾아봄
  - 즉 어떤 요소에 absolute 사용하려면 부모 요소에 relative라고 지정해야 원하는 대로 배치할 수 있음
  - fixed : 브라우저 창 기준으로 위치 지정(스크롤해도 항상 같은 위치에 나타남)

---

ch9

background

• background-color 값은 예외로 상속되지 않음
• background-clip : 배경색의 적용 범위 조절. 콘텐츠 < 패딩까지 < 테두리(박스모델의 가장 외곽)
• background-image : 웹 요소에 배경 이미지 넣음. 요소보다 이미지 크기가 작으면 이미지가 가로 세로로 반복되면서 요소 배경 채움
• background-repeat : 배경 이미지의 반복 방법 지정함. 가로와 세로 중 어떤 방향으로 반복할지 or 반복x 등을 정함
• background-position : 배경 이미지의 수평 또는 수직 위치 값 지정
• background-origin : 배경 이미지의 적용 범위 조절(패딩까지, 테두리까지 등 범위 정함)
• background-attachment : 웹 문서를 스크롤할 때 따로 지정 안하면 배경 이미지도 같이 움직이지만 fixed 속성 이용해서 고정시킬 수 있음
• background 하나로 위 속성들 묶어서 제어 가능
• background-size : 배경 이미지 크기 조절. 속성 값 하나면 그 값은 너비로 인식하고 높이는 원래 비율에 따라 알아서 조절함

그라데이션

그라데이션 적용시 고려사항

• 색상이 어느 방향으로 바뀌는지

• 시작 색상 → 끝 색상 => 어떤 색상으로 바뀌는지

• 색상 중지점 : 그라데이션에서 바뀌는 색. 색상 중지점 지정할 때는 쉼표(,)로 색상 구분함. 색상과 함께 중지점 위치도 지정할 수 있음

• linear-gradient : 선형 그라데이션
  - 방향 및 각도, 시작 색상, 끝색, 중지점 색상 및 위치 지정 가증
  - background:linear-gradient(340deg, rgb(200, 75, 75), white);
  - background: linear-gradient(to bottom, yellow, white 30%, blue); → 색상 중지점 위치가 height 30% 위치

• radial-gradient : 원형 그라데이션 → 모양(타원형, 원형), 원의 크기, 그라데이션이 시작하는 원의 중심 위치, 색상 중지점 위치 지정 가능

• 반복해서 패턴 만들기
  - repeating-linear-gradient : 선형 그라데이션 반복
  - repeating-radial-gradient : 원형 그라데이션 반복