CSS II

📌박스모델 - 크기 지정, 여백

width, height

• 박스의 너비, 높이를 지정할 수 있다.
• "블록 레벨 요소" 에서 사용할 수 있다.
• auto 값을 사용해 브라우저가 값을 계산해 지정하게 할 수 있다.

max-width, max-height

• 박스의 최대 너비, 최대 높이를 지정
• 블록 레벨 요소에서 사용
• auto 값을 사용해 브라우저가 값을 계산해 지정하게 할 수 있다.

margin, padding

• 박스의 외부, 내부 여백을 지정
• "블록 레벨 요소" 에서 사용
• "인라인 레벨 요소" 에서는 좌/우에만 적용할 수 있다.
• 네 방향의 여백을 지정할 수 있다.
• 작성 값의 갯수 따라 지정되는 방향이 다르다.
• margin은 음수 값의 적용이 가능

여백(마진 상쇄)

• 경우에 따라 요소간의 외부 여백이 상쇄 되는 형상
  • 인접 형제간의 외부 여백은 상쇄된다.
  • 제일 큰 여백을 따라간다.
• 부모와 자식 요소의 여백을 분리할 권한이 없을 경우 상쇄가 발생한다.
  • 부모와 자식을 분리하는 방법
    • 부모에 테두리(border) 넣기
    • 부모와 자식 사이에 콘텐츠 넣기
    • 부모에 내부 여백(padding) 넣기

📌박스모델 - 테두리, 박스 크기

border

• 박스의 네 면에 테두리를 그릴 수 있다.
  • color, style, width 를 사용해 박스의 테두리를 그릴 수 있다.
    • 각 속성은 top, right, bottom, left 값을 개별로 줄 수 있다.
  • border-color
    • css color 값을 사용해 지정
  • border-style
    • solid, dotted 를 가장 일반적으로 사용한다.
  • border-width
    • 선의 두께를 지정할 수 있다.

box-sizing

• 박스 크기를 계산할 때 내부 여백, 테두리의 크기를 포함할지 결정한다.
  • 기본값은 'content-box'로
    • 기본값은 'content-box'로
      • padding, width/height, border-width의 크기가 모두 더해진다.
      • 값을 'border-box'로 설정하면
        • width/height 값 안에 padding, border 크기가 합해진다.

📌박스모델 - 초과, 투명도

overflow

• 콘텐츠 내용이 지정한 박스 크기를 초과했을 때를 대처한다.
  • 기본값은 'visible'로 초과 해도 내용이 그대로 노출된다.
  • 'overflow-x', 'overflow-y', 로 분리해서 지정할 수 있다
  • 적용 가능한 값
    • visible(기본값) : 그대로 노출
    • hidden: 숨김
    • scroll: 스크롤바 무조건 노출
    • auto: 브라우저가 자동으로 결정하여 스크롤바 노출

opacity

• 박스의 투명도를 조절한다.
  • 기본값은 '1' 이며, 0 ~ 1 사이 소수점을 사용해 적용 가능하다.
  • 투명도가 적용되면 자식 요소도 함께 투명해진다.
  • opacity의 값은 상속되지 않는다.

📌표시 유형과 레이아웃 - 표시 유형, flex, position

display

• 요소를 블록, 인라인에 대한 처리의 선택과 자식요소를 배치하는 레이아웃을 설정
• 태그 마다 가진 기본값이 있다.
• span, strong 같은 인라인 태그의 display 유형을 block 으로 변경하여 '블록 레벨 요소' 에서 사용할 수 있는 css를 적용할 수도 있다.
• 반대로 블록 레벨 요소의 display 유형을 lnline 으로 변경하여 문맥의 흐름에 포함시킬 수 있다.
• 'none' 값을 사용하여 요소가 존재하지 않는 것 처럼 처리할 수 있다.
  • none으로 사라진 요소는 접근성 트리에서 제외되기 때문에 스크린 리더가 읽지 않는다.

visibility

• 레이아웃을 변경하지 않고 시각적으로 보이거나 숨길 수 있다.
  • display 의 none 과 다르게 시각적으로만 숨겨지기 때문에 레이아웃 상에서 '공간'을 그대로 차지하게 된다.
  • hiddien 으로 숨겨진 요소는 접근성 트리에서 제외되기 때문에 스크린 리더가 읽지 않는다.

float

• 문맥의 흐름으로부터 빠져 좌우측에 배치되는 속성이다.
  • Ms word 나, 한글 문서에서 이미지를 좌측, 우측에 배치하는 것과 비슷한 속성이다.
  • "left", "right" 로 배치할 수 있다.

position

• 문서 상에 요소를 배치하는 방법을 지정한다.
  • 'top', 'right', 'bottom', 'left' 값으로 offset(위치)를 제어할 수 있다.
  • "z-index" 값으로 z축을 제어해 쌓이는 순서를 정의할 수 있다.
  • 적용 가능 값
    • static(기본값): 문서의 흐름에 따라 배치되고 offset 및 z-index를 제어할 수 없다.
    • relative: 문서 흐름에 따라 배치하고 현재 위치 기준으로 offset과 z-index를 제어한다.
    • absolute: 문서 흐름에서 제거하고 가장 가까운 위치느 relative 요소에 상대적으로 배치된다.
    • fixed: 문서 흐름에서 제거하고 브라우저의 화면 기준으로 배치된다.
    • sticky: 문서 흐름에 따라 배치되나, 요소가 스크롤에 닿으면 따라다닌다.

📌 표시 유형과 레이아웃 - Flexbox,Grid

유연한 상자 만들기(Flexbox)

• 유연함을 가진 일차원 레이아웃을 만들 수 있다.
  • 가로축 정렬: justify-content
  • 세로축 정렬: align-items
  • 유연성 조절: flex-grow(늘어날 수 있게), flex-shrink(줄어드는걸 조절)
  • 크기 조절: flex-basis(크기를 조절)
  • 축 바꾸기: flex-direction
  • 여백과 순서: gap(간격), order(원하는 순서에 맞게 콘텐츠 정렬 가능)
  • flex-wrap(자식 요소를 부모 요소 안에 포함시킬 수 있다.)

바둑판 상자 만들기(Grid)

• 수평선과 수직선을 가진 2차원 레이아웃을 만들 수 있다.
  • 바둑판 조절하기: grid-template
    • grid-template-columns: repeat(3, 100px)
    • gird-template-rows: repeat(3, 100px)
  • 반복하기: repeat
  • 셀 확장: grid-row, grid-column (ex grid-row: span(한뼘): 2)
  • 영역 지정하고 배치하기: grid-template-areas, grid-area
  • 여백과 순서: gap, order