시간 빌게이츠가 간드아

Pseudo Selectors (가상 선택자) 태그 이름이나 class, id를 쓰지 않고 선택자를 쓰는 법. 가상 클래스와 가상 요소로 나뉜다. ex). 가상선택자 first-child 사용하기 animal li:first-child ① animal이라는 부모 안에 있는 ② 첫번째 자식요소인 ③ li에 대한 속성 첫번째 자식요소가 li가 아니라면 써먹을 수 없는 가상 선택자다. 가상 클래스 (pseudo class) 가상 요소 (pseudo element) 문법 선택자:가상클래스명 선택자::가상요소명 쓰임 요소의 특정 상태에 대한 스타일을 설정할 때 쓴다. 선택한 요소의 일부분만 스타일을 다르게 할 때 쓴다. 종류 :active :any-link :blank :checked :current :defau..

참고 - https://opentutorials.org/course/2418/13414 - https://ofcourse.kr/css-course/position-%EC%86%8D%EC%84%B1 - position : eliment(tag)가 화면의 어디에 위치하는지를 알려주는 속성 - offset :부모 박스의 좌측 상단으로부터 자식까지의 x, y 거리 - bottom vs top : 두 값이 동시에 있을 때 순서 상관없이 top 값만 씀. - left vs right : 두 값이 동시에 있을 때 순서 상관없이 left 값만 씀. 1. position: static position의 기본값, offset 값은 설정할 수 없으며 다른 태그와 상호작용하여 원래 위치해야 하는 곳에 있게 됨. positio..

참고 - http://tcpschool.com/css/css_boxmodel_margins content, padding, border, margin을 box model이라고 한다. margin, padding을 한꺼번에 쓰고 싶을 때 축약해서 쓸 수 있다. top, right, bottom, left (시계방향)순으로 값을 쓰면 된다. 헷갈리는 것만 margin을 예로 들어 아래에 정리해보자. ​ {margin: ↕ ↔;} = {margin-top, margin-bottom: ↕ ; margin-right, margin-left: ↔;} ​ {margin: ↑ ↔ ↓;} = {margin-top: ↑; margin-right: ↔; margin-bottom: ↓; margin-left: ↔;} ​