웹개발 종합반 개발일지
키워드 : html css bootstrap js
간단한 자바스크립트 기능과 css로 정적 페이지를 구현하는 법을 배웠다! 2번째
css : 선택자의 종류 - 내가 원하는 영역을 지정하는 방법을 잘 알게되면 같은 코드를 여러번 쓰지 않아도 되고 내 사이트를 더 이쁘게 만들 수 있다! 프론트엔드의 본질은 선택-상태변화가 아닐까.
출처 - https://www.nextree.co.kr/p8468/
꼭 알아야 할 선택자 30개
https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048
반응, 상태 선택자
https://yjshin.tistory.com/entry/HTML5-CSS3-8-CSS-%EB%B0%98%EC%9D%91-hover-%EC%83%81%ED%83%9C-%EA%B5%AC%EC%A1%B0-%EC%84%A0%ED%83%9D%EC%9E%90
선택자 우선순위 : id가 제일 높다(중복불가)
https://xiubindev.tistory.com/15
단일 선택자
전체 선택자 : html 의 모든 태그에 대하여 적용
- { margin: 0 auto; }
태그 선택자 : 태그명이 선택자와 같은 태그들에 대하여 적용
p { color: red; }
클래스 선택자 : 클래스이름과 같은 태그들에 대하여 적용
.ClassName { width: 100px; }
ID 선택자 : ID 이름과 같은 태그에 대해서 적용
#IdName { position: fixed; }
복합 선택자
하위 선택자 : 앞 요소의 "자손" 요소를 선택하여 적용
section ul { text-shadow: none; }
자식 선택자 : 앞 요소의 "자식"요소를 선택하여 적용
section > ul { text-shadow: none; }
자손과 자식의 차이 : 자손은 자식을 포괄하는 의미
자손 : 모든 하위 요소
자식 : 바로 아래의 자식 요소
인접 형제 선택자 : 붙어 있는 형제요소에 적용
h1 + ul { color: red; }
일반 형제 선택자 : 붙어 있진 않지만 형제인 요소에 적용
h1 ~ ul { color: red; }
형제 : 같은 부모를 가지는 요소
속성 선택자
속성 선택자 : 적절한 id 와 class 이름이 없을 경우 각 태그가 가지고 있는 그 속성에 접근하는 방식
태그[속성] : 속성이름 에 해당되는 속성을 가진 태그를 선택
a[href] { font-size: 10px; }
태그[속성="변수"] : 속성 / 이 속성값이 '변수' 인 태그를 선택
a[href="http://www.naver.com"] { color: black; }
태그[속성^="변수"] : 속성 / 속성값이 '변수' 로 시작하는 태그를 선택
a[href^="http"] { color: black; }
태그[속성|="변수"] : 속성 / 속성값이 변수 이거나 변수 로 시작하는 태그를 선택
a[href|="http"]{ color: black; }
태그[속성$="변수"] : 속성 / 속성값이 '변수' 로 끝나는 태그를 선택
a[href$="com"]{ color: black; }
태그[속성*="변수"] : 속성 / 속성값이 '변수' 를 포함하는 태그를 선택
- 는 문자열 기준으로 포함여부 판단 - 범위가 넓음
a[href*="naver"] { color: black; }
태그[속성~="변수"] : 속성 / 속성값이 '변수' 를 포함하는 태그를 선택
~ 는 단어 한 개를 기준으로 포함여부 판단
a[href~="naver"] { color: black; }
반응, 상태, 구조선택자
반응 선택자 - 어떤 영역에 변화가 일어났을때 css스타일 지정
:hover : 마우스를 올렸을 때
:active : 클릭했을 때
:visited : 클릭한 적이 있을 때
상태 선택자 - input창의 상태가 변경되었을때 css스타일 지정
:focus : 글자 입력할 때의 상태
:enabled : 글자 입력 한 후의 상태
:disabled : 창을 막아버림
:padding : 깜박이는 커서와 input칸 사이의 간격
구조 선택자 - 자식 요소들 중에서도 일부만을 선택할 때 사용
:nth-child(몇번째) : 수열에 따라 위치하는 태그 선택
:last-child : 마지막 요소를 선택
:first-child : 첫 번째 요소를 선택
복합선택자 + 나머지 5개선택자를 잘 조합하여 페이지 내의 원하는 요소에 접근할 수 있게 노력한다!
