Part 2. CSS 기초(2)

HanSungUk·2022년 5월 2일
0

HTM과 CSS

목록 보기
3/8
post-thumbnail

Part 2. CSS 기초 (2) 입니다.

현재 코드스테이츠 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

학습목표

  • CSS 박스 모델을 이해할 수 있다.
  • 박스를 구성하는 네 가지 요소를 구분하고 각각에 대해 설명할 수 있다.
    • margin, border, padding, content
  • 박스 크기를 측정하는 두 가지 기준의 차이를 이해할 수 있다.

1. 박스모델


모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 됩니다.

박스는 항상 직사각형으로, 너비(width)와 높이(height)를 가집니다.

  • 너비(width, height) 속성
    요소의 가로/세로 너비는 width, height 속성을 이용합니다.
    기본값(요소에 이미 들어있는 속성의 값): auto로 해당하는 요소가 block 요소 혹은 inline 요소 인지에 땨라 브라우저가 너비를 계산합니다.
    단위: px, rem 등
    • max-widthmax-height 속성은 요소가 커질 수 있는 최대 가로/세로 너비를 의미하며, 속성의 기본값은 none으로 제한이 없습니다.
    • min-widthmax-width 속성은 요소가 작아질 수 있는 최소 가로/세로 너비를 의미하며, 속성의 기본값은 0으로 제한이 없습니다.
  • 줄 바꿈이 되는 박스(block) vs 옆으로 붙는 박스(inline, inline-block)
    줄 바꿈이 되는 박스는 block 박스, 줄바꿈이 일어나지 않고, 크기 지정을 할 수 없는 박스는 inline 박스라고 부릅니다.
    줄 바꿈이 일어나지 않고 자체적으로 고유의 크기를 가지는 박스는 inline-block 박스라고 부릅니다.
    block 요소의 대표적인 예는 <div>, <p> 입니다.
    inline 요소의 대표적인 예는 <span> 입니다.

  • block, inline-block, inline의 특징

--blockinline-blockinline
줄바꿈 여부줄바꿈이 일어남줄바꿈이 일어나지 않음줄바꿈이 일어나지 않음
기본적으로 갖는 너비(width)100%글자가 차지하는 만큼글자가 차지하는 만큼
width, height 사용 가능 여부가능가능불가능

2. 박스를 구성하는 요소

  • border(테두리) : 요소의 테두리 선을 지정하는 단축 속성
    border 속성에 적용된 각각의 값은 테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)입니다.
    권장되는 border 스타일은
    border: 선-두께(border-width) 선-종류(border-style) 선-색상(border-color) 입니다.
    border-top, border-right, border-left, border-bottom로 방향만 바꿔서 적용할 수 있습니다.
/* 선-종류: 실선 */ 
border: solid;

/* 선-두께 | 선-종류: 점선 */ 
border: 2px dotted;

/* 선-종류: 파선 | 선-색 : 투명
border: dashed transparent;

/* 선-두께 | 선-종류: 점선 | 선-색 */ 
border: medium dashed green;
  • border-radius : 요소 테두리 경계의 꼭짓점을 둥글게 만듭니다.

/* The syntax of the first radius allows one to four values */
/* Radius is set for all 4 sides */
border-radius: 10px;

/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;

/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;

/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px 5% / 20px;

/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;
- box-shadow CSS 속성은 요소의 테두리를 감싼 그림자 효과를 추가합니다. 
그림자를 명확하게 보기 위해서는 background 속성이 불투명(transparent)해야합니다.
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
  • margin (바깥 여백)
    margin은 요소의 외부 여백(공간)을 지정하는 단축 속성입니다.
    단축 속성이란 서로 다른 여러 가지 CSS 속성의 값을 지정할 수 있는 CSS 속성입니다.

0 : 외부 여백 없습니다.
auto: 브라우저가 여백을 계산합니다.
-> 가로(세로) 너비가 있는 요소의 가운데 정렬에 활용합니다.
단위 : px, em, vw 등 단위로 지정합니다.

각각의 값은 top, right, bottom, left로 시계방향입니다.
바깥 여백에는 음수 값을 지정할 수 있습니다. 여백에 음수 값을 지정하면 다른 요소들과의 간격이 줄어듭니다.

/* 네 면 모두 적용 */
margin: 1em;
margin: -3px;

/* 세로방향(top, bottom) | 가로방향(left, right) */
margin: 5% auto;

/* 위(top) | 가로방향(left, right) | 아래(bottom) */
margin: 1em auto 2em;

/* 위 | 오른쪽 | 아래 | 왼쪽 */
margin: 2px 1em 0 auto;
  • padding (안쪽 여백)
    padding은 요소의 내부 여백(공간)을 지정하는 단축 속성입니다.

    0: 내부 여백 없습니다.
    단위: px, em, vw 등 단위로 지정합니다.
    %: 부모 요소의 가로 너비에 대한 비율로 지정합니다.
    특징 : 내부 여백이 커지면서 요소의 크기가 커집니다.

각각의 값은 top, right, bottom, left로 시계방향입니다.

/* 네 면 모두 적용 */
padding: 1em;

/* 세로방향(top, bottom) | 가로방향(left, right) */
padding: 5% 10%;

/* 위(top) | 가로방향(left, right) | 아래(bottom) */
padding: 1em 2em 2em;

/* 위 | 오른쪽 | 아래 | 왼쪽 */
padding: 5px 1em 0 2em;
  • 박스를 벗어나는 콘텐츠 처리
    overflow 속성은 요소의 크기 이상으로 내용이 넘쳤을때, 보여짐을 제어하는 단축 속성입니다.
    기본값은 visible로 넘친 내용을 그대로 보여줍니다.
    hidden 속성값은 넘친 내용을 잘라냅니다.
    auto 속성값은 넘친 내용이 있는 경우에만 잘라내고 스크롤바를 생성합니다.
p {
  height: 40px;
  overflow: auto;
}

overflow속성의 auto값은 콘텐츠가 넘치는 경우 스크롤을 생성하도록 합니다. 넘치는 콘텐츠의 내용을 보여주고 싶지 않을 경우 hidden값을 적용합니다.

  • 박스 크기 측정 기준
    box-sizing속성은 요소의 크기 계산 기준을 지정하는 속성입니다.
    content-box는 박스의 크기를 측정하는 기본값입니다. 그러나 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장합니다.
// *는 모든 요소를 선택하는 셀렉터입니다.
* {
  box-sizing: border-box;
}

0개의 댓글