728x90 Frontend/CSS17 13. 속성 선택자 [속성] 선택자대괄호([ ]) 사이에 원하는 속성 입력// a 요소 중에서 href 속성이 있는 모든 요소 선택 a[href] {...} [속성 = 속성값] 선택자주어진 속성과 속성값이 일치하는 요소를 찾아 스타일 지정// a 요소 중에서 target 속성값이 '_blank'인 것만 선택 a[target = _blank] {...} [속성 ~= 값] 선택자여러 속성값 중에서 해당 속성값이 포함된 요소 선택속성이 하나면서 속성값이 여러 개일 때 특정 속성값을 찾는데 편리값과 정확하게 이름이 일치하는 요소만 선택// class 값 중에 button이 있는 요소 [class ~= button] {...} [속성 |= 값] 선택자특정 속성값이 포함된 속성에 스타일 적용지정한 값과 정확하게 일치하거나, 지정.. 2024. 7. 5. 12. 연결 선택자 하위 선택자자식 선택자인접 형제 선택자일반 형제 선택자 하위 선택자기본형: [상위요소] [하위요소] {...}하위 요소: 특정 요소를 기준으로 그 안에 포함된 요소 ex) 자식 요소, 손자 요소 등하위 선택자는 부모 요소에 포함된 모든 하위 요소를 선택한다.-활용 코드 p태그 li태그 li태그 h1태그 li태그 li태그 자식 선택자기본형: [부모요소] > [자식요소] {...}자식 요소: 부모의 바로 한 단계 아래의 요소하위 선택자와 다르게 자식 요소에만 스타일을 적용한다.- 활용 코드 .. 2024. 7. 5. 11. background 배경색배경 이미지 1. 배경색배경색 지정 (background-color)16진수, rgb, 색상 이름 등을 사용해서 지정하위 요소에 상속x 적용 범위 (background-clip)border-box: 기본값. 테두리까지 적용padding-box: 테두리를 뺀 패딩 범위까지 적용content-box: 내용(content) 부분에만 적용- 활용 코드 background-clip: border-box; border-box background-clip: padding-box; padding-box background-clip: content-box; content-box - 실행 결과 background-clip: border-box; border-b.. 2024. 7. 5. 10. 위치 지정 (position, display, float, clear) 1. positionstaticrelativeabsolutefixedstatic기본값문서의 흐름에 맞춰 배치된다.다른 속성들과 달리 따로 위치를 지정하지 않는다. relative위치값을 지정할 수 있다는 점을 제외하면 static과 같다.자신의 상대적 위치(static)을 기준으로 위치 변경 가능 position: relative; 원래 자기 자신이 있어야 하는 위치에서 left:30px 만큼 오프셋 된다. - 실행 결과 position: relative; 원래 자기 자신이 있어야 하는 위치에서 left:30px 만큼 오프셋 된다. " data-ke-.. 2024. 7. 5. 이전 1 2 3 4 5 다음 728x90