728x90 CSS Selector4 [CSS] CSS Selector 선택자 우선순위 CSS Selector 선택자 우선순위 1. CSS 같은 속성 여러번 설정한 경우 메모를 메모하다 정답 : 메모를 메모하다 소스의 흐름대로 적용 된다. 처음엔 orange였다가 하위 코드로 인해 blue 로 바뀐다. 2-1. 다른 셀렉터를 통한 설정 (* vs 태그명) 메모를 메모하다 정답 : 메모를 메모하다 더 구체적인 셀렉터에서 설정한 값이 우선된다. 2-2. 다른 셀렉터를 통한 설정 (태그명 vs 클래스명) 메모를 메모하다 정답 : 메모를 메모하다 더 구체적인 셀렉터에서 설정한 값이 우선된다. (태그보다는 클래스가 더 구체적) 2-3. 다른 셀렉터를 통한 설정 (태그명.클래스명 vs 클래스명) 메모를 메모하다 정답 : 메모를 메모하다 .test-class 앞에 전체를 의미하는 *가 생략이 되어있는 .. 2021. 4. 15. [CSS] 짝수/홀수 번째 태그에만 style 효과 주기 CSS 짝수 홀수 번째 엘리먼트 Select 하기 CSS를 작성하다 보면 여러 태그에 같은 style을 설정할 일이 많은데 Class를 통해 따로 지정하여 style 효과를 설정해도 되지만 홀수번째, 짝수 번째와 같이 교차 효과를 설정할 필요가 있을때는 Selector를 통하여 간단한 코드를 통해 설정이 가능하다. 엘리먼트명:nth-child(even) 짝수번째 엘리먼트 Select 엘리먼트명:nth-child(odd) 홀수번째 엘리먼트 Select 샘플 예제 body { margin : 25px; } .container { display : flex; flex-direction : column; } .item { width: 50px; height: 50px; margin-bottom : 5px; } .. 2021. 3. 20. [HTML5] Data 속성 (Data Attribute) HTML5 Data-* 속성 Data Attribute HTML5에서 data-* 속성 은근 사용 빈도가 높다. data-* 속성은 거두절미하고 태그에 간략한 데이터를 저장하는 것이다. HTML5 이전에는 Html 문서 내에 데이터를 저장하기위해 태그를 안보이게하고 해당 태그에 밸류값을 넣어놓고 사용하는 등 여러가지 핵스러운 방법이 동원되었는데, data-*속성을 사용하면 간결한 코드에 유지보수가 용이해지고 자바스크립트를 통한 데이터 접근이 간단해진다. 사용 방법은 아래와 같이 간단하다. HTML 태그 내 데이터 속성 사용 Javascript에서 데이터 추출 const element = document.querySelector('...'); const data = element.dataset.데이터속성이.. 2021. 3. 13. [CSS] 선택자 Selector - CSS Selectors (선택자) Css에서 각 노드에 효과를 주기 위해 노드를 선택해야 하는데, 노드의 선택은 아래와 같은 선택자를 통해 가능하다. [선택자 (Selectors)] Basic Selectors Type Selectors 엘리먼트 명 Class Selectors .클래스명 Id Selectors #아이디명 Attribute Selectors [속성명=속성값] Combinators Decendent Selectors 부모노드 자식노드 Child Selector 부모노드 > 자식노드 Adjacent Sibling Selector 형제노드 + 형제노드 General Sibling Selector 형제노드 ~ 형제노드 [개념 설명] 1. Type Selectors 엘리먼트 이름으로 대상을 선택.. 2021. 2. 9. 이전 1 다음 728x90
