찾으시는 정보가 있으시다면
주제별reference를 이용하시거나
우측 상단에 있는 검색기능을 이용해주세요

35일차 수업

========복습========

선택자

A B : 자손 (상위 태그 밑에 모든 하위 태그 선택)

A > B : 자식 (상위 태그 바로 밑에 모든 하위태그 선택)

A ~ B : 일반 동위

A + B : 인접 동위

전체(*), 태그, 아이디(#), 클래스(.), 그룹( ‘,’ 으로 구분), 결합, 동위

구조 가상 클래스

계층 구조 간에서 선택을 자유롭게 사용하기 위한 방법

:first-child 선택된 요소가 자식 중에 첫번째

:last-child 선택된 요소가 자식 중에 마지막

:nth-child(a) 선택된 요소가 자식 중에 a번째

:nth-last-child(a) 선택된 요소가 자식 중에 뒤에서 a번째

:first-of-type 선택된 요소가 자식 중에 첫번째로 나오는 동일한 타입

:last-of-type 선택된 요소가 자식 중에 마지막으로 나오는 동일한 타입

:nth-of-type(a) 선택된 요소가 자식 중에 a번째로 나오는 동일한 타입

:nth-last-of-type(a)선택된 요소가 자식 중에서 뒤에서 a번째로 나오는 동일한 타입

======== 끝 ========

35일차 수업

Pseudo

Pseudo class 가상 클래스, HTML의 상태를 명시할 때 :로 선택

Pseudo element : HTML 요소의 특정 부분만 선택 ::로 선택

대표적인 예시

• ::before : 선언된 태그가 만들어지기 전에 바로 앞에 실행

  • 실제 내용 바로 앞에 생성되는 자식 요소

• ::after : 선언된 태그가 만들어진 후에 바로 뒤에 실행

  • 실제 내용 바로 뒤에 생성되는 자식 요소

위 가상 요소를 사용할 때는 content 속성을 꼭 사용해야함

• content : 가짜 속성, html 문서에 포함되는 요소를 새롭게 생성해주는 속성

속성 선택자

HTML 안에 있는 특정 속성을 가지고 있는 요소를 찾아주는 선택자, [ ] 로 선택함

사용방법

• [속성 이름]

• [속성 이름=”속성값”]

속성 이름과 속성 값을 모두 외울 수 없기 때문에 속성을 검색할 수 있는 기능이 있음

• [속성이름~=”속성값”] “속성값” 단어가 포함되어있는 요소들을 선택, 띄어쓰기 구분

• [속성이름

  =”속성값”] “속성값” 단어로 시작되는 요소들를 선택, 하나의 단어

• [속성이름^=”속성값”] “속성값” 문자열로 시작하는 요소들을 선택

• [속성이름$=”속성값”] “속성값” 문자열로 끝나는 요소들을 선택

• [속성이름*=”속성값”] “속성값” 문자열이 포함되어있는 요소들을 선택

절대경로 상대경로

명령어를 통해 현재 작업 공간에서 다른 파일을 참고하거나, 불러올 때 지정하는 경로 선언 방식

배경지식

• Windows : GUI(Graphical User Interface), 마우스 제어

• Linux : CLI(Command Line Interface), 명령어 제어

절대경로 : 항상 최정상에서 출발

상대경로 : 내 위치에서부터 출발

Slash(/)의 역할 : 경로 간의 구분자, 경로작성시 맨 앞에 작성되면 루트(최상위 폴더)라는 의미를 가짐

Dot(.)의 역할 : ./는 현재 폴더를 의미, ../는 상위폴더를 의미