CSS 속성 Part 1. (박스모델)

HTML에서 속성 : Attributes

CSS에서 속성 : Properties

JS에서 속성 : Properties

---

CSS를 통해 적용하는 스타일 목차

1. 박스 모델 : 너비, 단위, 여백, 테두리, border-radius, box-sizing, overflow, display, 투명도
2. 글꼴, 문자
3. 배경
4. 배치
5. 플렉스(정렬)
6. 전환
7. 변환
8. 띄움
9. 애니메이션
10. 그리드
11. 다단
12. 필터

---

1) 박스모델 속성

① width, height : 요소의 가로/세로 너비

기본값 : auto(브라우저가 너비를 자동 계산) / 단위 :px, em, vw 등 단위로 지정

<span>Hello</span> 
: span은 대표적인 인라인 요소로 가로와 세로너비가 콘텐츠의 크기만큼 자동으로 줄어든다.

<div>Hello</div>
: div은 대표적인 블록요소로 가로너비는 부모요소의 크기만큼 자동으로 늘어나고,
  세로 너비는 콘텐츠의 크기만큼 자동으로 줄어든다.

* max-width, max-height : 요소가 커질 수 있는 최대 가로/세로 너비로 설정.

  -기본값 : none (최대 너비 제한 없음)

* min-width, min-height : 요소가 작아질 수 있는 최소 가로/세로 너비 설정.

 - 기본값 : 0 (최소 너비 제한 없음)

 

② CSS 단위

px : 픽셀
% : 상대적 백분율
em : 요소의 글꼴 크기
rem : 루트요소(html)의 글꼴크기(html태그 font-size 기본값 16px)
vw : 뷰포트 가로너비의 백분율
vh : 뷰포트 세로너비의 백분율

 

③ 외부여백(margin)

: 요소의 외부 여백(공간)을 지정하는 단축 속성

기본값 : 0 (외부여백 없음) / auto(브라우저가 여백을계산), 음수로도 설정 가능.

단위 : px,em, vw 등 단위로 지정.

단축속성에 대한 설명

margin: 10px;
 // top, right, left, bottom 동일하게 margin 적용
 
margin: 10px 20px;
 // top, bottom : 10px; left, right: 20px; margin 적용됨
 
margin: 10px 20px 30px;
 // top : 10px; left, right: 20px; bottom: 30px; margin 적용됨

margin: 10px 20px 30px 40px;
 // top: 10px; right: 20px; bottom: 30px; left:40px; margin 적용됨
 // 상.시계방향으로 돌아가는 구조

* margin-방향 : 의 형태로 특정 방향에만 외부 여백을 적용

  -margin-top, margin-right, margin-left, margin-bottom

 

 

④ 내부여백(padding)

: 요소의 내부 여백(공간)을 지정하는 단축속성 (요소의 크기가 커짐)

기본값 : 0(내부여백 없음) / % : 부모요소의 가로너비에 대한 비율로 지정

단위 : px, em, vw등 단위로 지정.

padding: 10px;
 // top, right, left, bottom 동일하게 padding 적용
 
padding: 10px 20px;
 // top, bottom : 10px; left, right: 20px; padding 적용됨
 
padding: 10px 20px 30px;
 // top : 10px; left, right: 20px; bottom: 30px; padding 적용됨

padding: 10px 20px 30px 40px;
 // top: 10px; right: 20px; bottom: 30px; left:40px; padding 적용됨
 // 상.시계방향으로 돌아가는 구조

* padding-방향 : 의 형태로 특정 방향에만 내부 여백을 적용

-padding-top, padding-right, padding-left, padding-bottom

 

 

⑤ 테두리 선(border)과 색상 표현

: 요소의 테두리 선을 지정하는 단축속성 (요소의 크기가 커짐)

border: 선-두께 선-종류 선-색상; 의 형태로 작성 ( ex: border: 4px solid blue;)

 

* border-width : 요소 테두리 선의 두께

* border-style : 요소 테두리 선의 종류(기본값:none / solid(실선), dashed(파선)

* border-color : 요소 테두리 선의 색상을 지정(기본값:black / transparent(투명)

 (단축속성이므로 width나 padding처럼 4가지방식으로 각각 설정 가능)

* border-방향 : 의 형태로 특정 방향에만 테두리 지정

* border-방향-속성: 의 형태로 특정방향+속성만 테두리 설정.

 

 

⑥요소의 모서리를 둥글게 깎음(border-radius) 기본값:0

패스트캠퍼스

특정한 부분의 모서리만 깎기를 원하는 경우

border-radius: 0 10px 0 0 ; 의 형태로 작성. (예시의 경우 우측상단만 적용)

좌측상단-> 우측상단-> 우측하단-> 좌측하단의 기준으로 적용(시계방향)

 

 

⑦박스사이징(box-sizing): 요소의 크기계산 기준을 지정

기본값 : content-box  / border-box

위에서 배운 여백이나 테두리 등 css 설정을 추가하다보면 처음에 설정한 요소의 크기보다 실제 만들어진 크기가 커지게 된다.

위 예제의 경우 둘다 width/height: 100px로 작성하였지만 첫번째 네모가 더 크게 화면에 보이고 있는데 이는 첫번째 요소의 border와 padding을 추가하여 요소가 커졌기 때문이다.

이럴때 다른 CSS 속성을 추가하더라도 본래의 박스 크기를 유지하도록하는 설정이 box-sizing이다.

요소에 설정한 크기를 그대로 유지하면서 padding, border를 추가하고 싶은 경우 box-sizing 속성의 값을 border-box로 설정하면 된다.

* content-box(기본값) : 요소의 내용(content)으로 크기 계산

* border-box : 요소의 내용+padding+border를 포함하여 크기 계산

 

 

⑧ 오버플로우 overflow : 요소의 크기 이상으로 내용이 넘쳤을때 보여짐을 제어하는 단축속성

기본값 : visiable(넘친내용 그대로를 보여줌)

  / hidden(넘친내용을 잘라냄), auto(넘친내용이 있는경우에만 잘라내고 스크롤바 생성)

패스트캠퍼스

* 요소의 크기 이상으로 내용이 넘쳤을 때 보여짐을 제어하는 개별 속성

   : overflow-x, overflow-y

 

⑨ 디스플레이(display) : 요소의 화면 출력(보여짐) 특성

* 각 요소에 이미 지정되어있는 값인 block / inline / inline-block 설정을 바꿀 수 있다.

위 예제에서 <span>은 대표적인 inline 요소이기 때문에 CSS에서 width / height 너비를 설정하였음에도 적용되지 않는다.

 

이 때 display 속성을 이용해 block 요소로 설정을 변경해주면 가로/세로 너비값을 지정할 수 있게된다.

 

* display: none은 화면에서 보이지 않도록 사라지게함.

  + flex(플렉스박스, 1차원레이아웃) / grid(그리드, 2차원레이아웃)

 

 

⑩ Opacity : 요소 투명도

기본값 : 1 (불투명) / 0~1사이의 소수점 숫자로 표현