Web/CSS

[CSS] 속성 선택자(Attribute Selectors)

클래스 이름 일일히 지어주기 귀찮을 때 유용함. attr : html 태그의 속성 attr을 포함한 요소 선택 [attr] attr=value : 속성 attr을 포함하며 속성 값이 value인 요소 선택 [attr=value] attr^=value : 속성 attr을 포함하며 속성 값이 value로 시작하는 요소 선택 [attr^=value] attr$=value : 속성 attr을 포함하며 속성 값이 value로 끝나는 요소 선택 [attr$=value]

[CSS] 가상요소 선택자(Pseudo-Elements Selectors)

가상 요소 선택자 : CSS를 통해서 TML에 가상의 요소를 생성해서 제공 콜론 2개(::) 사용 before : E 요소 내부의 앞에 내용(content)을 삽입 *content 필수로 써야함 E::before after : E 요소 내부의 뒤에 내용(content)을 삽입 *content 필수로 써야함 E::after

[CSS] 가상 클래스 선택자(Psudo-Classes Selectors)

기본선택자에 붙여서 선택하는 개념. 가상 클래스 선택자앞에는 콜론기호(:)가 1개 붙는다! hover : E(기본선택자)에 마우스(포인터)까 올라가 있는 동안에만 E선택 E:hover transition 을 넣어주면 자연스럽게 요소가 바뀌는 애니메이션 효과가 적용된다. active : E를 마우스로 클릭하는동안에만 E선택 E:active focus : E가 포커스 된 동안에만 E 선택 *대화형 콘텐츠에서 사용가능 ex) input, img, tabindex E:focus first-child : E가 형제 요소 중 첫번째 요소라면 선택 E:first-child last-child : E가 형제 요소 중 마지막 요소라면 선택 E:last-child nth-child : E가 형제 요소 중 n번째 요소라면 ..

[CSS] 기본 선택자와 복합선택자

기본 선택자 1. 전체 선택자(Universal Selector) : 모든 요소를 선택 *{ color:red; } 2. 태그 선택자(Type Selector) : 태그이름이 ~~인 요소 선택 li{ color: red; } 3. 클래스 선택자(Class Selector) : HTML 태그의 class 속성의 값이 ~~인 요소 선택 .orange{ color: red; } 4. 아이디 선택자(ID Selector) : HTML id 속성의값이 ~~인 요소 선택 #orange{ color: red; } 복합선택자 1. 일치 선택자(Basic Combinator) : 두 가지 조건을 동시에 만족하는 요소 선택 span.orange{/*일치 선택자, span태그의 orange 클래스*/ color:red; }..

[CSS] 기본 문법

선택자{ 속성: 속성값, 속성: 속성값; } 선택자(Selector)로 속성과 값을 지정할 대상을 검색 속성과 값의 역할 : 검색된 대상에 지정될 CSS 명령 /* 주석 쓰는 방법*/ CSS 선언 방식 인라인(in-line) 방식 : HTML 요소(태그)의 'style'속성에 직접 작성(선택자 필요X) 내장(embedded) 방식 : HTML 안에 작성 링크(link) 방식 : HTML에서 를 이용하여 외부 문서로 CSS를 불러와 적용(강사님이 추천) *병렬방식호출 @import 방식 : CSS에서 @import를 이용하여 외부 문서로 CSS를 불러와 적용 *직렬방식호출이므로 주의(1번 호출이 끝나야 2번 호출이 가능) @import url("./common2.css");