본문 바로가기

전체 글

 (109)
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..
CSS 선택자 - 속성 선택자 속성 선택자 - 태그 이름 외에 추가적인 정보를 전달할 때 사용되는 선택자 - 속성, 특성을 표시하는데 사용합니다. /* css */ a{ display: block; } /* attr */ a[target]{ color: pink; display: block; } /* attr=value */ a[target="_blank"]{ color: red; display: block; } /* attr^=value */ a[href^="https"]{ font-size: 30px; margin-left: 30px; } /* attr$=value */ a[href$=".net"]{ background-color: yellow; } /* attr_=value */ a[href_="daum"]{ color=sien..
CSS 선택자 - 주요 선택자 CSS 선택자 (CSS selector)란? - 하나의 CSS 규칙을 만들때 어떤 html요소를 선택할 지 정의하는 것입니다. - https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Selectors CSS 선택자 - Web 개발 학습하기 | MDN CSS 에서, 선택자는 스타일을 지정할 웹 페이지의 HTML 요소를 대상으로 하는 데 사용됩니다. 사용 가능한 다양한 CSS 선택자가 있으며, 스타일을 지정할 요소를 선택할 때 세밀한 정밀도를 허용합 developer.mozilla.org - CSS 스타일링뿐만이 아닌, javascript를 활용하기 위해서도 선택자를 알고있어야 합니다. 자주 사용되는 선택자 - Type Selector /* Ty..
CSS 캐스캐이딩 원칙 스타일 우선순위 - 동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해진다. :: 브라우저에 의해 정의된 스타일 인라인 스타일을 적용을 하면 스타일을 수정할때 매번 인라인된 코드 위치로 가서 고쳐야된다. 이는 코드의 유지보수에 악영항을 끼치게 되므로 인라인 스타일은 필수적인 부분 외에는 지양하는것이 좋다. - 소스코드의 순서가 뒤에 있으면 덮어쓴다 > 맨 처음에 h1을 " color:red; font-size:24px " 로 설정하고, 이후에 h1을 다시 " color:blue "로 설정했다면, color 는 blue로 덮어씌워진다. 스타일 상속 - 부모 요소의 스..

티스토리툴바