Enjoy Programming

:active active는 사용자가 활성화한 요소를 나타냄. 마우스를 사용하는 경우 보통 마우스 버튼을 누르고 떼는 시점까지를 의미 보통 과 함께 사용 active로 정의한 스타일은 자신보다 뒤에 있고 동등한 명시성을 가진 다른 pseudo selectors ((:link, :hover, :visited)가 덮어 쓴다. 적절히 디자인 하려면 LVHA(:link — :visited — :hover — :active)순으로 배치 할것 :hover hover는 포인팅 장치를 사용해 상호작용, 보통 사용자의 커서가 올라가면 활성 :focus focus는 양식의 입력칸 등 포커스를 받은 요소를 나타냄. 보통 사용자가 요소를 클릭 또는 탭키를 눌렀을 때 발동 *focus-within element:focus-wi..

속성 선택자 (attribute selectors) 주어진 특성의 존재 여부나 그 값에 따라 요소를 선택한다. [attr=value] : attr이라는 요소에 속성이 정확히 value인 것 input[type="password"] { background-color: thistle; } [attr~=value] : 요소 안에 value라는 값을 찾음. attr의 속성은 공백으로 구분한 여러 값이 있을 수 있다. [attr|=value] : 정확히 value이거나 value로 시작하면서 문자가 곧바로 뒤에 따라붙으면 선택 [attr^=value] : 접두사로 value가 포함되어 있을때 [attr$=value] : 접미사로 value가 포함 되어 있을 때 [attr*=value] : 값 안에 value라는 ..

combinators는 선택자들 사이의 관계를 설명 CSS 선택자는 하나 이상의 단순 셀렉터를 포함 할 수 있다. 셀렉터 사이에 combinators를 포함해서 연결할 수 있다. 자손 선택자(descendant selector) : space 자식 선택자(child selector) : > 인접 형제 선택자(adjacent sibling selector) : + 일반 형제 선택자(general sibling selector) : ~ 자손 선택자 : space 지정된 요소의 자손인 모든 요소와 일치, space bar로 조상과 자손간 공간을 주고 입력 p span { color : wheat; } 자식 선택자 : > 자식 선택은 지정된 요소의 직접적인 모든 자식 요소를 선택함 div > span {text..

pseudo selector : 세부적으로 엘레멘트를 선택o selector : 세부적으로 엘레멘트를 선택 ex> class선택시 span다음에 오는 class 처음이나 마지막에 있는 클래스만 선택하고 싶을 때 등등 div를 5개 만들어주고 마지막 div만 컬러를 줘보자 div:last-child{ background-color: red; } span 8개 짝수번째만 색상을 다르게 줘보자 span:nth-child(even) span:nth-child(3n + 1) 의 경우 인덱스로 0 + 1부터 이므로 첫번째부터 그다음 세번째 그다음 세번째 이런 순으로 줄수 있다.

CSS 에서 position 자료형은 요소 박스에 대한 상대 좌표를 나타내는 2차원 좌표 좌표? 뭔말인가... 그냥 문서 상에 요소를 배치하는 방법을 지정하는 거.,.. 라고 한다. position은 요소의 위치를 옮기고 싶을때 사용 각 속성들로 알아보자.. 1. position - fixed 박스 요소의 포지션을 화면상 위치를 고정시켜줌 최종 위치는 top, right, bottom, left로 값을 지정 할 수 있고 위치를 지정하면 다른 박스 레이어에 간섭을 할 수 있다. fixed가 적용된 박스가 가장 위 레이어가 됨. 2. position - static 레이아웃의 박스를 처음 위치에 계속둔다. position의 default값 top, right, bottom, left, z-index속성이 아..

앞선 포스팅에서 inline-block의 문제점을 알게 되었다. 이를 해결하기 위한 방법으로 flexbox를 이용! constant 부모요소 = body태그 자식요소 = div태그 로 가정하겠다. flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드이다. 1. flebox는 영향을 주고싶은 요소의 body에 특별한 display속성 값을 지정한다. only 부모요소에만 지정해야한다. body태그로 div태그를 조정. 이후 justyfy-content, align-items등등을 이용해 박스를 조정한다~ 2. main-axis && cross-axis *flexbox는 주축과 교차축을 가지고 있다. ex> justyfy-content는 주축에 적용 , aligne-item은 교차축에..