1. 개요
css로 제어할 수 있는 것들
- 박스 모델
- 글꼴, 문자
- 배경
- 배치
- 플렉스(정렬)
- 전환 : 전상태와 후상태가 있으면 애니메이션을 이용해서 전환하는 효과를 만들 수 있다.
- 변환 : 요소를 회전, 이동, 크기를 바꾸는 등 요소에 변화를 준다.
- 띄움 : 요소를 공중으로 띄운다는 의미로, 요소주변으로 글자들이 자연스럽게 흐를 수 있도록 만든다.
- 애니메이션
- 그리드
- 다단 : 하나의 페이지를 여러개의 단으로 나눌 수 있다.
- 필터
2. 너비
(1) width, height
요소의 가로/세로 너비를 지정한다.
- auto(기본값) : 브라우저가 자동적으로 너비를 계산한다.
- 단위 : 기본값이 아닌 값을 지정하고 싶을 경우에는 px, em ,vw등 단위로 지정한다.
인라인 요소
앞서 살펴봤듯이 span과 같은 인라인요소들은 브라우저가 자동으로 가로, 세로 너비를 계산한다.
인라인 요소는 콘텐츠의 크기만큼 가로, 세로 크기가 줄어든다.
블록 요소
블록요소의 가로크기는 해당 요소의 부모요소의 크기만큼 늘어난다. 세로는 콘텐츠 크기만큼 줄어든다.
(2) max-width, max-height
요소가 커질 수 있는 최대 가로/세로 너비를 제한한다.
- none : 최대 너비를 제한하지 않는다.
- auto : 잘 사용하지 않는다.
- 단위 : px, em , vw 등의 단위로 지정한다.
(3) min-width, min-height
요소가 작아질 수 있는 최소 가로/세로 너비를 제한한다.
- 기본값 : 0
3. CSS의 단위
- px : 픽셀
- % : 상대적 백분율
- em: 요소의 글꼴 크기
(html의 기본 글꼴 크기는 16px이다. 즉 1em은 16px, 10em은 160px이 된다) - rem : 루트요소(html)의 글꼴 크기
(자신 요소의 글꼴 크기를 따로 지정하더라도 html에 지정되어 있는 글꼴크기를 기준으로 한다.
자신요소의 font-size를 20px로 지정하더라도 20rem은 html의 기본 font-size인 16px을 기준으로해 320px의 크기를 갖게 된다) - vw : 뷰포트 가로 너비의 백분율
(뷰포트를 기준으로 하기 때문에 현재 창의 가로를 늘리거나 줄이더라도 크기는 고정된채로 움직인다) - vh : 뷰포트 세로 너비의 백분율
4. 외부 여백(margin)
요소의 외부 여백(공간)을 지정하는 단축 속성이다.
음수를 사용할 수 있다.
- 기본값 : 0 (외부 여백 없음)
- auto : 브라우저가 여백을 계산한다. 가로(세로) 너비가 있는 요소의 가운데 정렬에 활용할 수 있다.
- %단위 : 부모요소의 세로너비가 아닌 가로 너비에 대한 비율로 지정한다. (사용하는 경우는 드물다)
.container .item {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 10px;
margin-right: 10px;
}위와 같이 margin-left, margin-right, margin-top, margin-bottom을 통해 좌,우,상,하의 여백을 따로 지정할 수도 있다.
.container .item {
margin: 10px 20px;
}위와 같이 margin에 2개의 값을 주게 될경우 처음 값은 top, bottom값으로 사용하게 되고 뒤의 값은 left, right값으로 사용하게 된다.
.container .item {
margin: 10px 20px 30px;
}위와같이 3개의 값을 주게 될경우 각각 상, 중(좌우), 하의 여백을 지정하게 된다.
.container .item {
margin: 10px 20px 30px 40px;
}margin은 최대 4개의 값까지 지정이 가능하며 위와같이 작성하게 될경우 각각 top, right, bottom, left 순으로 적용이 된다. (시계방향)
.container .item {
margin: -20px 10px;
}외부여백의 값으로 음수값을 지정할 경우 각 요소들의 여백이 줄어들면서 겹쳐지게 된다.
5. 내부 여백(padding)
요소의 내부여백(공간)을 지정하는 단축 속성이다. 요소의 크기가 커지게 된다.
padding도 margin과 같이 여러개의 값을 지정할 수 있으며 순서는 똑같다.
- 0 : 내부여백 없음
- %단위 : margin과 똑같이 부모요소의 가로너비에 대한 비율로 지정한다.
6. 테두리선(border)과 색상표현
요소의 테두리선을 지정하는 단축 속성이다.
border : border-width(선의 두께) border-style(선의 종류) border-color(선의 색상);
span {
border : 4px solid red;
}기본값
border: medium none black;border속성의 기본값은 선의 두께는 medium, 선의 종류는 none, 선의 색상은 black으로 선의종류가 none이기 때문에 화면에 기본적으로 표시되지 않는다.
(1) border-with
요소의 테두리 선의 두께를 지정한다. (단축속성)
- medium : 중간두께
- thin : 얇은 두께
- thick : 두꺼운 두께
- 위의 값들을 사용하는 것은 권장하지 않고 특정한 단위(px, em, %)와 함께 사용하는 것을 권장한다.
- 단축속성이기 때문에 margin, padding처럼 여러개의 값들을 한꺼번에 지정할 수 있다.(순서 동일)
(2) border-style
요소의 테두리 선의 종류를 지정한다.
- none : 선없음
- solid : 실선(자주사용)
- dashed : 파선(자주사용)
- dotted : 점선
- double : 두 줄 선
- groove : 홈이 파여있는 모양
- ridge : 솟은 모양(groove의 반대)
- inset : 요소 전체가 들어간 모양
- outset : 요소 전체가 나온 모양
(3) border-color
요소의 테두리 선의 색상을 지정하는 단축속성이다.
- black : 기본값
- 색상 : 선의 색상을 지정한다.
- transparent : 선을 투명하게 한다.
(4) 색상 표현
색을 사용하는 모든 속성에 적용 가능한 색상 표현이다.
- 색상이름 : 브라우저에서 제공하는 색상의 이름 (red, tomato, royalblue, …)
- Hex 색상 코드 : 16진수 색상 (#000, #FFFFFF, …)
- RGB : 빛의 삼원색 (rgb(255, 255, 255), …)
- RGBA : 빛의 삼원색 + 투명도(0~1 : 0으로갈수록 투명, 1로갈수록 불투명해진다)
ex) rgba(0, 0, 0, 0.5), …
7. border-radius(모서리 둥글게)
요소의 모서리를 둥글게 깎는다.
radius는 반지름이라는 뜻으로 정해진 단위만큼을 반지름으로 하는 원과같이 모서리를 깎는다.
- 0 : 기본값으로 둥글게 없음
- 단위 : px, em, vw등 단위로 지정
border-radius: 20px;border-radius: 0 10px 0 0;특정한 모서리만을 깎고 싶을 경우 왼쪽 위 모서리에서부터 시계방향의 모서리마다 값을 지정할 수 있다.
