CSS의 속성

📦 박스 모델 (display)

  • 요소가 화면에 출력되는 특성이다.
  • 크게 인라인 요소와 블록 요소로 구분된다.
  • 인라인 요소는 글자를 만들기 위한 요소들이고 블록 요소는 레이아웃을 만들기 위한 요소들이다.

    • Inline 요소

  • <span> 태그는 대표적인 인라인 요소이다.
  • 기본적으로 다른 요소가 같은 줄에 나타난다.
  • 이는 포함한 콘텐츠 크기만큼 자동으로 크기가 결정된다. 이는 style 속성으로 width와 height를 주어도 변하지 않는다.
  • margin은 좌우만 적용되고 상하는 적용되지 않는다. padding은 상하좌우 전부 적용되지만 상하 부분은 배경색만 적용이 가능하다.
  • <span> 태그(inline 요소) 안에 <div> 태그(block 요소)를 넣는 것은 쓰지 않는다.

    • Blcok 요소

  • <div> 태그는 대표적인 블록 요소이다.
  • 기본적으로 다른 요소가 다음 줄로 띄어진다.
  • style 속성으로 width와 height가 적용 가능하다.
  • margin과 padding도 전부 적용이 가능하다. 그러나 margin은 세로의 경우 위 아래가 상쇄된다.

    • Inline-block 요소

  • block 요소가 수직으로만 쌓이는 문제점을 해결하고자 나온 개념이다.
  • 둘의 특성을 합친 것이라 inline-block이다.
  • Inline-block 요소로 지정하고 싶으면 css에서 아래와 같이 지정하면 된다.
    • span {
    	display: inline-block;
    }
  • margin에서 세로 상쇄가 없다.
  • 가로 공간을 공유한다.
  • width, height도 적용 가능하다.

    • [요약] 표

  • 이에 따라 아래처럼 span에 세로 padding을 주면 배경색만 적용된다.
  • 또한 div태그 2개에 첫번째 div에 margin-bottom을 20px, 두번째 div에 margin-top을 50px 주게 되면 서로 상쇄되어 큰 쪽인 50px만 남게된다.
  • 이러한 단점을 극복하기 위해서는 inline-block을 사용하면 된다.

    • 📐 Width와 Height

  • 요소의 가로/세로 너비를 정의하는 속성이다.
  • auto 값을 주면 브라우저가 너비를 계산한다.

    • CSS 크기 단위

  • 픽셀은 절대적인 고정된 값이다.
  • vw, vh는 viewport width, viewport height의 약자이며 뷰포트 크기에 따라 변화한다는 점에서 반응형 웹을 만드는 데에 사용된다.
  • em이나 rem은 보통 font-size에서 사용한다.
  • 어떠한 값을 계산하여 적용하고 싶은 경우 Calc()를 사용한다.

    • line-height

  • line-height는 영역 요소 내부에서 글자 한 줄이 가지는 높이이다.

    • max, min

  • max(min)-width, max(min)-height

    • ▫️ Margin

  • 요소의 외부 여백(공간)을 지정하는 단축 속성
  • auto 값을 넣으면 가운데 정렬에 활용할 수 있다.
  • 음수를 사용할 수 있다.
  • 아래와 같이 상, 우, 하, 좌 의 순서로 4가지를 한번에 설정할 수 있다.
  • 개별적으로 margin-top, margin-bottom, margin-left, margin-right를 사용할 수 있다.

    • 🔲 Padding

  • 요소의 내부 여백을 지정하는 단축 속성
  • 요소의 크기가 커지게 된다.
  • 마진과 같이 다음처럼 설정할 수 있다.
  • 마진과 같이 top, bottom, left, right도 사용 가능하다.

    • 〰 Border

  • 요소의 테두리 선을 지정하는 단축 속성
  • border: 선-두께 선-종류 선-색상;
    • div {
    	border: 1px solid black;
    }

    border-width

  • 테두리 선의 두께
  • 마진, 패딩과 같은 순서로 지정 가능
  • border-width: top right bottom left

    • border-style

  • 테두리 선의 스타일
  • 마진, 패딩과 같은 순서로 지정 가능
  • 속성값에는 solid, dashed, dotted, double, groove, ridge, inset, outset 등 적용 가능

    • border-color

  • 테두리 선의 색상
  • 마진, 패딩과 같은 순서로 지정 가능
  • 속성값에는 색상 입력 가능
  • 투명은 transparent

    • border-방향-속성

  • border-top-width, border-bottom-style 등으로 사용 가능

    • border-radius

  • 요소의 모서리를 둥글게 깎음
  • px, em, vw 등의 단위로 지정
  • %로도 지정 가능 (50%가 원)
  • 10px을 입력하면 반지름이 10px인 원으로 깎게 된다.
    • 실습 결과물
    실습 결과물

    🗃 Box-sizing

  • 요소의 크기 계산 기준을 지정한다.
  • div { box-sizing: border-box; }
  • content-box로 지정하면 요소의 내용으로 크기를 계산한다. (기본값)
  • border-box로 지정하면 요소의 내용+padding+border로 크기를 계산한다.

    • 🌊 Overflow

  • 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성. 부모요소에서 설정해줌.
  • 내용이 넘친 경우
  • 내용이 넘치지 않은 경우
  • overflow-x, overlow-y 로 축 별로 지정 가능

    • 🖥 Display

  • 요소의 화면 출력이 어떻게 보여지는지 결정하는 특성
    • div {
    	display: none;
    }

    🫥 Opacity, Visibility

    Opacity

  • opacity 속성의 값이 1이면 완전히 불투명하고 0이면 보이지 않는다. 이 값을 통해 색상을 조절할 수도 있다. (이를 색을 쪼갠다고 한다)

    • Visibility

  • visibility 속성이 hidden이면 요소가 보이지 않는다.

    • 요소를 숨기는 3가지 방법

  • opacity: 0
  • visibility: hidden
  • display: none

    • 📄 Font