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. 점수가 높은 선언의 우선순위가 높다.

생태계 동물 고양이 강아지 식물 .animal { color: pink; } /* 동물, 고양이, 강아지의 글자 색상 => pink */ 스타일 상속이란, 적용된 스타일 내용이 해당하는 요소의 자식요소, 하위요소 까지 적용되는 것을 말한다. 1. 상속되는 CSS 속성들 글자/문자 관련 속성들이 상속된다. (모든 글자/문자 속성은 아님) font-style (글자 기울기) font-weight (글자 두께) font-size (글자 크기) line-height (줄 높이) font-family (폰트(서체)) color (글자 색상) text-align (정렬) letter-spacing (자간) ... 2. 강제 상속 실질적으로 상속이 되지 않는 CSS 내용을 강제적으로 상속시키는 것을 말한다. inhe..

hover a:hover { color: pink; } [ABC: hover] 선택자 ABC 의 요소에 마우스 커서가 올라가 있는 동안을 선택한다. active a:active { color: pink; } [ABC: active] 선택자 ABC 의 요소에 마우스를 클릭하고 있는 동안을 선택한다. focus input:focus { color: pink; } [ABC: focus] 선택자 ABC 요소가 포커스되면 선택한다. - 포커스가 가능한 요소들 : input, select, textarea 등 - 포커스가 가능하지 않은 요소들을 포커스가 가능한 형태로 만드는 방법 tabindex 속성을 통해 Focus 가 될 수 있는 요소를 만들 수 있다. Tab 키를 사용해 Focus 할 수 있는 순서를 지정하는..