웹 프론트 엔드 (42) 썸네일형 리스트형 CSS 우선순위 1. 선언된 곳, 코드 위치 - 브라우저가 읽을 때 나중에 읽는 스타일이 우선순위가 높다 - 윗줄의 코드보다 아랫줄의 코드의 우선순위가 높다. 2. 명시도 - 적용범위가 적을수록 우선순위가 높다 Ex) class보다 id의 명시도가 높기때문에 id selector 가 class selector보다 우선순위가 높다 inherited 가장 최우선으로 적용한다. > 반드시 써야하는 상황이 아니면 사용하지 않는것이 좋다. CSS 상속 제어 CSS 상속 - 부모태그에 적용된 CSS 는 자식태그에 동일한 CSS가 존재하지 않는 한 상속된다. initial .parent{ color : blue; font-size: 7px; } .child{ color: initial; font-size: initial; } > 부모 태그의 CSS 스타일을 상속받지 않게 하는 속성 .child{ all : initial; } > 부모로부터 오는 css 스타일이 많다면 all을 사용하여 한번에 처리할 수 있다. inherit /* CSS */ div{ border: 1px solid silver; margin: 2px; } .child1{ color: red; } .parent1, child2{ color: blue; } .parent2 *{ color:inhe.. CSS 선택자 - 전체 선택자( * ) 전체 선택자 *{ color: red; } > *를 사용하여 전체 태그에 대해 사용할 수 있습니다. > 가급적 CSS 맨 윗줄에 적용해야합니다. > 다른 태그 앞에 기본적으로 * 가 붙어있습니다. span + * { color: green; } > 전체 선택자를 인접형제 선택자( + ), 또는 선택자 결합과 함께 사용하여 활용할 수 있습니다. CSS 선택자 - 선택자 결합 선택자 결합 - 하나 이상의 선택자를 결합하는 것 - 스타일을 좀 더 세부적으로 적용하기 위해 사용한다. 하위, 자식 선택자 결합 /* CSS */ ul li:last-of-type{ color: red; } 리스트1 리스트2 리스트3 리스트4 리스트1 리스트2 리스트3 > [선택자1] [선택자2] 를 통해 선택자 1의 하위 태그의 선택자 2에만 스타일을 적용할 수 있다. 형제 선택자 결합 1. 일반 형제 선택자 결합 (~) /* CSS */ code ~ p{ color:blue; } P Span Div Code P2 Div Div P Div Div > [Selector1] ~ [Selector2] 의 형식으로 작성합니다. > Selector1과 Selector2는 서로 형제관계의 태그여야 합니다. > .. CSS 선택자 - 가상 요소 선택자 가상 요소 선택자 ( Pseudo-Element Selector ) - 가상 클래스 선택자와 사용법은 비슷합니다. - 콜론( : )을 두번을 입력하여 사용하지만, 콜론을 한번만 입력해도 가능합니다 > 코드 가독성을 위해 가급적이면 콜론을 두번 입력하는것을 권고하고 있습니다. - 상태에 따라서 적용해주는 가상 클래스 선택자와는 달리, 실제로 존재하지 않는 요소를 만들거나, 범위를 만들어 적용합니다. /* Pseudo Element Selector*/ /* CSS */ .movie::before{ content: 'MOVIE'; color: indianred; } Toy Story Zootopia Inside Out Coco Finding Nemo - div 앞에 MOVIE 라는 글자가 추가되고, 스타일이 .. CSS 가상 클래스 선택자 - 동적 가상 클래스 선택자 동적 가상 클래스 선택자란? - 요소는 하나인데, 사용자의 동작에 따라 스타일링을 바꿔줄 수 있는 선택자 link와 visited - 하이퍼링크에 적용할 수 있는 선택자 - 하이퍼링크 태그의 경우 한번도 클릭하지 않은 상태, 방문한 적이 있는 상태로 나뉩니다. - selector:link - 한번도 클릭한 적 없는, 즉 방문한 적 없는 상태의 하이퍼링크에 스타일을 적용하는 선택자 입니다. - selector:visited - 방문처리 된 하이퍼링크에 스타일을 적용하는 선택자 입니다. hover와 active, focus - 마우스와 상호작용을 하는 선택자들입니다. - selector:hover - 선택된 태그에 마우스를 올리면 스타일을 적용합니다. - selector:active - 선택된 태그를 누르는.. CSS 선택자 - 가상클래스 선택자 : not selector:not(조건) - 조건에 해당하지 않는 선택자에 스타일을 적용한다 - 몇개의 공통된 요소를 가진 태그를 제외하고 /* CSS */ input:not(.pw){ background-color: indianred; } > css에는 class=pw인 태그를 제외하는 not 선택자를 사용하였습니다. 위와 같이 class=pw 로 설정된 password input 만 배경색이 적용되지 않은 것을 볼 수 있습니다. input:not([placeholder]){ background-color: indianred; } > 위와같이 placeholder 속성이 있는 태그 제외를 한다면 아래와 같은 결과가 나온다. CSS 선택자 - 가상 클래스 선택자 : child & of-type 가상 클래스 선택자 (Pseudo-Class Selector) - 선택자 뒤에 조건을 추가한 더 디테일한 선택자입니다. - 선택자:[조건] 의 형식으로 작성합니다. first-child /* Pseudo-Class Selector*/ /* Style*/ li{ color: green; } /* 1. first-child */ li:first-child{ color: red; } /* HTML */ Movie List ToyStory Zootopia Inside Out Coco Finding Nemo Cafe Menu Americano Latte Hot Choco > 모든 태그 내에 첫번째 자식태그인 경우 적용된다. last-child > 모든 태그 내에 마지막 자식태그인 경우 적용된다. nth-child.. 이전 1 2 3 4 5 6 다음
