Web

[CSS] 단위

px 해상도에 따른 상대단위. 고정 % 부모요소에 영향받음 예제 Container Parent Child1 Child2 body *{ border: 2px solid; } .container{ width: 600px; } .parent{ width: 50%; } .child{ width: 50%; } em 자기자신의 font-size에 영향받음(정의 되지 않았을 때는 부모요소에 상속받음) ex)10px => width=60em (10*60=600px) rem root-em. 상속을 다 건너뛰고 root(html요소) 조상의 font-size를 상속받아서 적용 em 예제 rem 예제 html{ font-size: 10px; } body{ font-size: 16px; /* rem단위에 영향안주면서 전체 폰..

[CSS] 실습 환경 setting

1. CSS Reset 기본적으로 브라우저에서 제공하는 스타일은 표준화 된 것이 아니므로 초기화해서 사용해야한다. https://www.jsdelivr.com/package/npm/reset-css jsDelivr - A free, fast, and reliable Open Source CDN for npm and GitHub A free, fast, and reliable Open Source CDN for npm and GitHub with the largest network and best performance, perfectly suited for production use. www.jsdelivr.com html 문서의 header에 다음 추가 2. Codepen 사이트 https://codep..

[CSS] 상속과 우선순위

조상요소에 스타일을 지정하면 하위요소에도 적용된다. 상속 되는 속성들(properties) font font-size fonet-weight font-style line-height font-family color text=align text-indent text-decoration letter-spacing opacity 강제 상속 : inherit 값 사용하여 부모→자식으로 강제 상속(후손 적용X) *모든 속성이 강제 상속을 사용할 수 있는 건 아님 .class { position: inherit; /*강제 상속*/ } 우선순위 결정 같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS속성(property)을 우선 적용할지의 순위 1. 명시도 점수 큰 순서 인라인(HTML style 속성 사..

[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; }..