CSS 속성 Part 01.

너비

width, height

▶ 요소의 가로, 세로 너비

body {
    width: auto;
    height: 100px;
}

- auto: 기본값(요소에 이미 들어있는 속성의 값). 브라우저가 너비를 계산

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

 

 

max-width, max-height

▶ 요소가 커질 수 있는 최대 가로, 세로 너비

body {
    max-width: 500px;
    max-height: 500px;
}

- none: 기본값(요소에 이미 들어있는 속성의 값). 최대 너비 제한 없음

- auto: 브라우저가 너비를 계산. 잘 사용하지 않음.

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

 

 

min-width, min-height

▶ 요소가 작아질 수 있는 최소 가로, 세로 너비

body {
    min-width: 100px;
    min-height: 100px;
}

- 0: 기본값(요소에 이미 들어있는 속성의 값). 최소 너비 제한 없음

- auto: 브라우저가 너비를 계산. 잘 사용하지 않음.

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

 

 

 

단위

- px(픽셀): 화면의 디바이스가 표현할 수 있는 가장 작은 단위.
- %: 상대적 백분율
- em: 요소의 글꼴 크기     ex) 글꼴 크기 * (n)em
- rem: 루트(최상위) 요소(html)의 글꼴 크기     ex) 기본 글꼴 크기(16px) * (n)rem
- vw: 뷰포트가 가로 너비의 백분율
- vh: 뷰포트가 세로 너비의 백분율

 

 

 

여백

외부 여백 (margin)

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

body {
	/* 가로 가운데 정렬 */
    margin: 0 auto;
    
    /* 상 하 좌 우 */
    margin: 10px; 
    
    /* 상, 하 10px 좌, 우 20px */
    margin: 10px 20px; 
    
    /* 상 10px 좌, 우 20px 하 30px */
    margin: 10px 20px 30px; 
    
     /* 상 10px 우 20px 하 30px 좌 40px */
    margin: 10px 20px 30px 40px;
}

- 0: 기본값(요소에 이미 들어있는 속성의 값). 외부 여백 없음

- auto: 브라우저가 여백을 계산. 가로(세로) 너비가 있는 요소의 가운데 정렬에 활용한다.

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

- %: 부모 요소의 가로 너비에 대한 비율로 지정. 잘 사용하지 않음.

- 음수 사용 가능

각자 따로 지정할 수 있다.
- margin-top: 외부 여백 상
- margin-botton: 외부 여백 하
- margin-left: 외부 여백 좌
- margin-right: 외부 여백 우

 

 

내부 여백 (padding)

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

body {
    /* 상 하 좌 우 */
    padding: 10px; 

    /* 상, 하 10px 좌, 우 20px */
    padding: 10px 20px; 

    /* 상 10px 좌, 우 20px 하 30px */
    padding: 10px 20px 30px;

    /* 상 10px 우 20px 하 30px 좌 40px */
    padding: 10px 20px 30px 40px; 
}

- 0: 기본값(요소에 이미 들어있는 속성의 값). 내부 여백 없음

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

- %: 부모 요소의 가로 너비에 대한 비율로 지정.

- 요소의 크기가 커짐

 

각자 따로 지정할 수 있다.
- padding-top: 내부 여백 상
- padding-botton: 내부 여백 하
- padding-left: 내부 여백 좌
- padding-right: 내부 여백 우

 

 

 

테두리 선 (border)

테두리 선과 색상 표현

▶ 요소의 테두리 선을 지정하는 단축 속성

body {
	border:1px solid black; /* 선 두께 1px, 선 종류 solid, 선 색상 black */
}

- 요소의 크기가 커짐

 

 

둥근 모서리 (border-radius)

▶ 요소의 모서리를 둥글게 깎음

body {
	border-radius: 10px;
}

- 0: 기본값(요소에 이미 들어있는 속성의 값). 둥글기 없음.

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

 

 

 

크기 계산 (box-sizing)

▶ 요소의 크기 계산 기준을 지정

<div class="item">hello</div>
<div class="item">hello</div>

.item {
    width: 100px;
    height: 100px;
    background-color: orange;
}

.item:first-child {
    border: 4px solid red;
    padding: 20px;
    box-sizing: border-box;
}

- content-box: 기본값(요소에 이미 들어있는 속성의 값). 요소의 내용 + padding + border로 크기가 계산되어 요소가 커진다.

- border-box: 요소의 내용 + padding + border로 크기가 계산되어 요소가 커지지 않고, 모두 포함하여 명시한 너비 그대로 사용할 수 있다.

 

 

 

넘침 제어 (overflow)

▶ 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성

<div class="parent">
	<div class="child"></div>
</div>

.parent {
    width: 200px;
    height: 150px;
    background-color: royalblue;
    margin: 20px;
    overflow: hidden;
}

.child {
    width:300px;
    height: 100px;
    background-color: orange;
}

- visible: 기본값(요소에 이미 들어있는 속성의 값). 넘친 내용을 그대로 보여줌

- hidden: 넘친 내용을 잘라냄

- scroll: 넘친 내용을 잘라냄, 스크롤바 생성. 잘 사용하지 않음.

- auto: 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성

 

 

 

투명도 (opacity)

▶ 요소 투명도

<div class="parent">
	<div class="child"></div>
</div>

.parent {
    width: 100px;
    height: 100px;
    padding: 30px;
    background-color: royalblue;
}

.child {
    width: 200px;
    height: 100px;
    background-color: orange;
    opacity: 0.5;
}

- 1: 기본값(요소에 이미 들어있는 속성의 값). 불투명

- 0 ~ 1: 0부터 1사이의 소수점 숫자로 투명도를 조절한다.

 

 

 

글꼴

 

 

 

문자

 

 

 

배경