font-style 글자의 기울기를 의미한다. - 기본값: normal (기울기 없음) - italic: 이탤릭체 (기울어진 글자) font-weight 글자의 두께를 의미한다. 보통 400(일반 두께), 700(두꺼운 두께) 을 많이 사용한다. - 기본값: normal, 400 (기본 두께) - bold, 700: 두껍게 - border: 상위 요소보다 더 두껍게 - lighter: 상위 요소보다 더 얇게 - 100 ~ 900: 100 단위의 숫자 9개, normal 과 bold 이외 두께 font-size 글자의 크기를 의미한다. 보통 px, em, rem 등 단위로 지정하여 사용한다. - 기본값: 16px (기본 크기) - 단위: px, em, rem 등 단위로 지정 - %: 부모 요소의 폰트 크기..

투명도 (opacity) - 기본값: 1 (불투명) - 0 부터 1 사이의 소수점 숫자 - 0: 완전한 투명 - 1: 완전한 불투명 .item { opacity: 0.07; } 백분율로 나타내자면 7% 에 해당하는 불투명도로 화면에 요소를 출력한다. 즉 7% 만큼 불투명하고, 나머지 93% 만큼 투명하게 된다. (화면에 겨우 보이는 정도) .item { opacity: 0.4; } 40% 만큼 불투명하고 60% 만큼 투명하다. .item { opacity: .4; } 소수점 앞의 정수 0 은 생략이 가능하다.

요소의 화면 출력(보여짐) 특성을 의미한다. block 상자(레이아웃) 요소를 의미한다. 각 요소에 이미 지정되어 있는 값이다. inline 글자 요소를 의미한다. 각 요소에 이미 지정되어 있는 값이다. inline-block 글자 + 상자 요소를 의미한다. 베이스는 글자 요소 이지만 width / height 가 지정한대로 적용된다. 각 요소에 이미 지정되어 있는 값이다. flex 플렉스 박스를 의미한다. (1차원 레이아웃) x축 또는 y축, 즉 하나의 축만을 가지고 레이아웃을 잡는 개념이다. 따로 지정해서 사용하는 값이다. grid 그리드를 의미한다. (2차원 레이아웃) x축과 y축, 즉 행과 열 두 개의 축을 가지고 레이아웃을 잡는 개념이다. 따로 지정해서 사용하는 값이다. none 보여짐 특성이 ..

요소의 크기 이상으로 내용이 넘쳤을 때 보여짐을 제어하는 단축 속성을 의미한다. .parent { width: 200px; height: 300px; background-color: royalblue; } .child { width: 300px; /* 자식의 width 가 부모의 width 보다 넘침 (x축) */ height: 100px; /* 넘치지 않음 (y축) */ background-color: yellow; } visible (기본값) 넘친 내용을 그대로 보여준다. hidden 넘친 내용을 잘라낸다. scroll 넘친 내용을 잘라내고, 스크롤바를 생성한다. x축, y축 모두 스크롤바를 생성한다. auto 넘친 내용이 있는 경우에만 잘라내고, 스크롤바를 생성한다. 넘친 내용이 있는 축에만 스크롤..

요소의 크기 계산 기준을 지정하는 것이다. - 기본값: content-box - 요소의 내용(content) 으로 크기를 계산한다. - border-box: 요소의 내용 + padding + border 로 크기를 계산한다. content-box 요소의 내용(content) 으로 크기를 계산한다. padding, border 같이 요소의 크기가 커지는 속성이 적용되었을 때 원하는 정확한 수치를 위해서는 width, height 를 수동으로 계산해서 명시해줘야 하는 단점이 있다. div { width: 100px; padding: 20px; border: 1px solid red; } /* 실제 가로 너비: 1 + 20 + 100 + 20 + 1 = 142px */ border-box 요소의 내용 + pa..

색을 사용하는 모든 속성에 적용 가능한 색상 표현을 의미한다. 색상 이름 - 브라우저에서 제공하는 색상 이름 - 브라우저에 따라 달라지기 때문에 정확하지 않다. - red, tomato, royalblue ... Hex 색상코드 - 16진수 색상 (Hexadecimal Colors) - 가장 많이 사용하는 방식이다. - #000, #FFFFFF ... RGB - 빛의 삼원색 - rgb(255, 255, 255) // rgb 는 함수! RGBA - 빛의 삼원색 + 투명도 - rgba(0, 0, 0, 0.5) // rgba 도 함수! - 1, 2, 3 번째는 RGB, 마지막 4 번째는 투명도이다.