요소의 테두리 선을 지정하는 단축 속성이다. 테두리 선의 두께가 늘어날수록 요소의 크기가 커진다. 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 요소 상자(레이아웃) 을 만들기 위한 요소들을 말한다...

padding (내부 여백) 요소의 내부 여백(공간)을 지정하는 단축 속성이다. 여백이 생긴만큼 요소 자체의 크기가 커진다. - 기본값: 0 (내부 여백 없음) - 단위: px, em, vw 등 단위로 지정 - %: 부모 요소의 가로 너비에 대한 비율로 지정 단축 속성 단축 속성이란, 각 방향을 한 번에 적용해주는 단축키와 같은 속성을 말한다. padding: 10px; top, right, bottom, left : 10px padding: 10px 20px; top, bottom : 10px left, right : 20px padding: 10px 20px 30px; top : 10px left, right : 20px bottom : 30px padding: 10px 20px 30px 40px; ..

margin (외부 여백) 요소의 외부 여백(공간)을 지정하는 단축 속성이다. 음수 값도 사용이 가능하다. - 기본값: 0 (외부 여백 없음) - auto: 브라우저가 여백을 계산함, 가로(세로) 너비가 있는 요소의 가운데 정렬에 활용함 - 단위: px, em, vw 등 단위로 지정 단축 속성 단축 속성이란, 각 방향을 한 번에 적용해주는 단축키와 같은 속성을 말한다. margin: 10px; top, right, bottom, left : 10px margin: 10px 20px; top, bottom : 10px left, right : 20px margin: 10px 20px 30px; top : 10px left, right: 20px bottom : 30px margin: 10px 20px 30..

px (픽셀) % (상대적 백분율) em div { font-size: 16px; /* 16px === 1em */ } div { font-size: 2em; /* 2em === 32px */ } 해당 요소의 글꼴 크기가 1em 의 기준이 된다. .parent { width: 300px; height: 200px; background-color: blue; font-size: 10px; } .child { /* parent 에서 상속되어 font-size: 10px 을 가진다. 1em === 10px */ width: 20em; /* 10 * 20 = 200px */ height: 50%; background-color: orange; } 상위 요소의 font-size 가 변경되면 1em 의 기준이 바뀔..

우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선적으로 적용할 지 결정하는 방법이다. 1. 점수가 높은 선언의 우선순위가 높다. 2. 점수가 같다면, 가장 마지막에 해석된 (나중에 작성된) 선언의 우선순위가 높다. 1. 점수가 높은 선언의 우선순위가 높다.