Styles 탭

요소에 적용된 인라인 스타일과 CSS 규칙들을 확인하고 수정할 수 있습니다.

selector와 스타일 속성으로 이루어진, CSS의 기본 단위

selector에 일치되는 요소에 스타일 속성을 적용

selector {
  property: value; /* property: value 쌍을 declaration이라고 합니다. */
}

h1 {
  color: red;
  font-size: 5em;
}

요소에 적용된 인라인 스타일 & CSS 규칙들 확인하기

스타일 탭에는 요소에 적용된 인라인 스타일과 CSS 규칙들이 나열되어 있습니다.

이 안에서 다음과 같은 정보들을 취득할 수 있습니다.

CSS의 우선순위에 따라 인라인 스타일과 CSS Rule들이 나열됩니다. 위에 있는 것이 최우선이며, 아래로 내려갈 수록 우선순위가 낮아집니다.

CSS 규칙의 셀렉터에 마우스를 올리면 해당 셀렉터의 명시도도 확인할 수 있습니다.

매칭된 셀렉터를 제외한 나머지 셀렉터는 회색으로 표시됩니다.

프로퍼티명에 마우스를 올리면 해당 프로퍼티에 대한 설명과 MDN 상세 링크를 확인할 수 있습니다.

padding과 같은 단축 속성의 경우, 값 왼쪽의 펼치키 아이콘을 눌러 단축 속성에 속한 속성들을 볼 수 있습니다.

CSS 우선순위에 의해 덮어진 값은 취소선으로 표기 됩니다.

부모 요소로부터 스타일 속성 값을 물려받는 것을 말합니다.

<b> 태그의 경우 color 속성이 아무것도 지정되어 있지 않지만, 부모인 <span> 태그의 color 속성을 상속받아 보라색으로 표시됩니다.

안녕하세요. 잘 부탁드립니다. 🙂

<span style="color: purple;">안녕하세요. <b>잘</b> 부탁드립니다. 🙂</span>

상속받은 속성에 대해서는 Inherited from <element-name>으로 상속받은 프로퍼티가 포함된 CSS 규칙을 볼 수 있습니다.

상속받은 프로퍼티가 포함된 CSS 규칙에 속한 속성들을 다 보여주기에, 규칙에는 포함되어있지만 상속받지 않은 프로퍼티는 흐릿하게 표시됩니다.

유효하지 않은 속성(프로퍼티명 또는 값이 잘못된 경우), 취소선 표기와 함께 경고 아이콘이 표시됩니다.

align-items 속성은 display속성이 flex나 grid가 아닌 경우 비활성화됩니다.

이렇게 비활성화되는 속성은 흐릿한 표기와 더불어 느낌표 아이콘이 표시돕니다. 아이콘에 마우스를 올리면 자세한 내용을 확인할 수 있습니다.

속성 왼쪽에 있는 체크박스를 통해 속성을 활성화/비활성화 할 수 있습니다.

인라인 스타일, CSS Rule에 적용된 속성의 이름이나 값을 클릭하면 속성 이름이나 값을 조작할 수 있습니다.

속성의 이름이나 값 이외의 영역을 클릭하면 새로운 속성을 추가할 수 있습니다.

.cls 버튼을 누르면 해당 요소에 적용된 클래스들을 확인할 수 있고, 체크박스를 통해 해당 클래스의 적용을 온오프할 수 있습니다.

또한 add new class를 통해 새로운 클래스를 추가할 수 있습니다.

최하단에 박스모델이 표시되며, 각 값들을(마진, 패딩, 보더, 너비, 높이) 더블클릭해 변경할 수 있습니다.