요소의 화면 출력(보여짐) 특성을 의미한다. 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 번째는 투명도이다.

요소의 테두리 선을 지정하는 단축 속성이다. 테두리 선의 두께가 늘어날수록 요소의 크기가 커진다. border-width 요소 테두리 선의 두께를 의미한다. - 기본값: medium - 단위: px, em, % 등 단위로 지정 - thin(얇은 두께), thick(두꺼운 두께) 값이 있지만 잘 사용하지 않는다. - border 라는 단축 속성의 개별 속성이면서 각 방향별로 한 번에 적용 가능한 단축 속성이다. .item { border-width: 10px 20px 30px 40px; } border-style 요소 테두리 선의 종류를 의미한다. - 기본값: none (선 없음) - solid: 실선 (일반 선) - dotted: 점선 (....) - dashed: 파선 (- - - -) - double..

글자와 상자 우리가 보는 웹사이트는 이미지를 제외하고 모두 글자와 상자로 이루어져 있다고 볼 수 있다. 요소가 화면에 출력되는 특성은 크게 2가지로 구분된다. Inline 요소 글자를 만들기 위한 요소들을 말한다. 대표적으로 span 태그가 있다. - width: 자신이 포함하고 있는 콘텐츠의 크기만큼 자동으로 줄어든다. - height: 자신이 포함하고 있는 콘텐츠의 크기만큼 자동으로 줄어든다. - 요소가 수평으로 쌓인다. - width, height 를 지정해도 무시된다. - margin, padding 의 왼쪽/오른쪽 여백은 적용이 되지만 위/아래 여백은 정상적으로 적용되지 않는다. - 자식 요소로 Block 요소를 사용할 수 없다. Block 요소 상자(레이아웃) 을 만들기 위한 요소들을 말한다...