css 속성

margin

요소 외부에 간격을 만드는 속성

단축속성

margin : 4px 5px 6px 7px;
margin : 4px;

위 처럼 쓰면 각각의 위 우 아래 좌에 차례대로 값을 주게 된다. 아래처럼 쓰면 모든 방향에 4px씩 여백을 줌.

margin collapse

마진의 특정값들이 중복되어 합쳐지는 현상

1. 형제 요소들의 margin-top과 margin-bottom 이 만났을 때 (가로의 경우는 더해짐)

2. 부모 요소의 margin-top과 자식요소의 margin-top이 만났을 때

3. 부모 요소의 margin-bottom 과 자식요소의 margin-bottom 이 만났 을 때

버그가 아님. 현상을 우회하거나 응용할 수 있음.

padding

요소 내부에 간격을 만드는 속성 - 단축속성

요소 증가

padding이 안쪽으로 여백을 만드는 속성이므로, 요소가 커지는 경우가 생김

1. 크기가 커지지 않도록 직접 계산해서 해결
2. box-sizing : border-box 속성을 사용해서 해결

box-sizing defalut

기본값이 content-box임

border

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

• border-width : 선의 두께(medium) - 단축속성
• border-style : 선의 종류(none)
• border-color : 선의 색상(black)
  • transparent 가 가능

위 세 가지가 합쳐져서 만들어지게 됨.

선의 종류

none, hidden, solid, dotted, dashed, double, groove, ridge, inset, outset 등

box-sizing

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

개발자도구를 열게 되면 볼 수 있는 박스이다.

어떤 박스를 박스의 width나 height 로 삼을 것인지 결정할 속성

content-box

기본 값. 내부 내용물이 들어있는 공간만 box로 삼음

padding-box

브라우져 호환성이 아주 안 좋음. 실질적으로 못 쓴다 보면 됨.

border-box

테두리까지를 요소의 사이즈에 포함시킴

display

요소의 속성을 결정해주는 속성

block

div 등

inline

span 등

inline-block

input 등

기본은 인라인인데, 가로세로 값을 지정할 수 있음.

table

표를 만드는 속성

flex

none

요소의 박스 타입이 없음. 요소가 사라짐

overflow

요소의 크기 이상으로 내용(자식요소)가 넘쳤을 때, 내용의 보여짐을 제어

scroll

overflow가 되던 말던 스크롤바를 y, x 축 모두 생성함

auto

를 사용하면 넘칠 경우에만 스크롤바가 생성됨

opacity

투명도를 지정하는 것

0부터 1까지의 소수점 숫자를 지정하면됨

0에 가까울 수록 투명

단축속성으로도 사용 가능

• 단축속성을 사용하기 위해서는 반드시 글자 크기와 글꼴을 입력해야 함.

font

글자 관련된 속성 지정해주는 속성

font-size

글자 크기 지정

font-style

글자 기울기 지정

• normal
• italic
• oblique

font-weight

글자 두께 지정
bolder lighter은 더 두껍게가 아니라 부모(상위) 요소에 비해 두꺼운 혹은 얇은 값을 넣으라는 것.

line-height

줄 높이 지정 (Reset.css) 적용 시 1

font-family

글꼴 지정 - 운영체제에 따라 달라짐

브라우저에서 가지고 있기에 글꼴은 너무 용량이 큼. 그래서 운영체제에 저장되어있는 글꼴을 가져다 쓰게 됨.

• serif : 바탕체 계열
• sans-serif : 고딕체 계열
• monospace : 고정 너비 글꼴 계열
• cursive : 필기체 계열

color

문자의 색상을 지정

• 색상이름
• Hex 색상코드
• RGB
• RGBA (투명도가 포함)
• HSL 색상, 채도, 명도
• HSLA 색상, 채도, 명도, 투명도