choco's story

z-indexz-index 란?: 요소들의 쌓임 순서(stack order)를 정의하는 속성정수 값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의하는 방식으로 사용합니다.즉 위치 지정 요소에 대해 적용 가능한 속성입니다.위치 지정 요소란? position 속성이 정의되어 있는 요소쌓임 맥락(Stacking context)이란?2차원 평면의 HTML 페이지를 Z축이 있는, 즉 3차원적인 관점으로 표현하는 개념&nbsp&nbsp=> 즉 요소들이 겹칠 때, 해당 요소가 다른 요소 위나 아래에 쌓이는 순서를 따져서 맥락상 우선순위를 정하는 규칙!z-index의 기본값 = auto여기서 auto는 새로운 쌓임 맥락이 형성되지 않은 상태!z-index 사용 예시 1 2 ..

상속(Ingeritance)상속(Ingeritance) 이란?: 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것이 상속 기능이 이루어지는 속성과, 영향을 받지 않는 속성이 따로 있습니다.아래 표는 이러한 속성들을 구분한 것입니다.상속 여부상속 O상속 X속성&nbsp&nbsp&nbspcolor, font-family, font-size, font-&nbsp&nbsp&nbspweight, text-align, cursor 등&nbsp&nbsp&nbspbackground-color, background-image, &nbsp&nbsp&nbspbackground-repeat, border, display 등상속(Ingeritance) 사용 예시 가운데 p 태그 p 태그 요소..

의사 요소의사 요소(pseudo-elements) 란?: 선택자에 추가하는 키워드로, 선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있음의사 요소의 코드 기본 구조입니다.선택자::의사 요소{ 속성명: 속성값;}실제 저 구조를 적용하면 아래처럼 쓸 수 있습니다.ex) li 요소의 첫 번째 글자만 크기를 20px로 변경 (기본값 = 16px)li::first-letter{ font-size: 20px;}아래 표는 의사 요소 중 가장 많이 사용되는 것 일부를 정리한 것입니다.의사 요소의미after요소의 앞에 의사 요소를 생성 및 추가before요소의 뒤에 의사 요소를 생성 및 추가first-line블록 레벨 요소의 첫 번째 선에 스타일 적용&nbsp&nbspmaker목록 기호의 스타일 적용placeh..

의사 클래스의사 클래스(가상 클래스) 란?: 선택자에 추가하는 키워드로, 요소가 어떤 특정한 상태일 때 해당 요소를 선택하겠다는 의미를 만들 때 사용의사 클래스의 코드 기본 구조입니다.선택자: 의사 클래스{ 속성명: 속성값;}실제 저 구조를 적용하면 아래처럼 쓸 수 있습니다.ex) h1 요소에 마우스 커서를 올리면 텍스트 색을 red로 변경h1:hover{ color: red;}아래 표는 의사 클래스 중 가장 많이 사용되는 것 일부를 정리한 것입니다.의사 클래스의미hover마우스 포인터가 요소에 올라가 있는 경우active사용자가 요소를 활성화한 경우 (마우스 클릭 등)&nbsp&nbspfocus요소가 포커스를 받는 경우disabled비활성 상태의 요소인 경우nth-child()형제 사이에서의 순서..