CSS

단위

px / % px : 해상도에 따른 상대 단위. (해상도에 따라서 px 단위가 조금씩 변함) % : 부모요소의 가로 사이즈에 영향을 받는다. em / rem em : 자기 자신의 폰트 사이즈의 영향을 받음 rem : HTML에 지정된 폰트사이즈에만 영향을 받음 em 위의 예시의 경우 600px을 10px로 나누면 60이므로 60em으로 단위를 고치면 600px과 동일한 값을 가진다. container > parent > child의 구조인데 font 속성의 경우 상속되는 속성이므로 자식(하위)요소에 font-size가 명시되어 있지 않으면 부모(상위)요소들로부터 font-size를 상속받아 font-size: 10px로 설정되어 있다고 생각하면 된다. 만일 .parent의 font-size를 2em으로 ..

우선순위

같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법이다. 명시도 점수가 높은 선언이 우선 (명시도) 점수가 같은 경우, 가장 마지막에 해석(늦게 작성한)되는 선언이 우선 (선언 순서) 명시도는 '상속' 규칙보다 우선 (중요도) !important 가 적용된 선언 방식이 다른 모든 방식보다 우선 (중요도) 1. 가장 중요 (!important) 모든 선언을 무시하고 가장 우선 점수: ∞ pt div { color: red !important; } /* 가장 우선 */ 2. 인라인 선언 방식 인라인 선언 (HTML style 속성을 사용) 점수가 높기 때문에 유지보수에 제약이 많다. (비추천) 점수: 1,000 pt Hello world! 3. 아이디 선택자 고..

속성 선택자

HTML의 속성을 attribute라고하고, CSS의 속성은 property라고 한다. [attr] 속성 attr을 포함한 요소를 선택한다. 예를들어 입력창의 투명도를 낮추고 싶다고 하자. 일반적으로 투명도를 낮추고 싶은 태그에 클래스로 별명을 부여하여 css를 통해서 투명도를 조정할 수 있지만, 이 또한 일일이 별명을 부여해야한다는 번거로움이 있다. 따라서 별명을 부여하지 않고도 주어진 속성만 가지고 특정한 요소를 선택하는 방법이 속성 선택자이다. [attr=value] 속성 attr을 포함하여 속성 값이 value인 요소 선택 이때 값에 해당하는 것은 ""를 생략할 수도 있다. [attr^=value] 속성 attr을 포함하여 속성 값이 value로 시작하는 요소 선택 해당 앞글자로 시작하는 속성-값..

가상 선택자

가상 클래스 선택자 선택자 앞에 : 을 붙여서 선택한다. 사용자가 특정한 동작(이벤트)을 일으켰을 때 변화가 되는 선택자로는 hover, acitve, focus 가 있다. (보통은 동작의 경우 JS로 수행하는데 특이한 케이스) hover E 에 마우스 포인터가 올라가있는 동안에만 E 선택 마우스를 위에 가져다 두었을 때 해당 선택자에 작성된 CSS가 적용됨 E:hover Active E 를 마우스로 클릭하는 동안에만 E 선택 E:active Focus E 가 포커스 된 동안에만 E 선택 대화형 콘텐츠에서 사용 가능 (input, img, tabindex) E:focus 예) 입력창이 포커스됐을 때 빨간색으로 테두리 지정 input 박스의 테두리의 경우 outline을 사용하는데 이는 다루기에 까다로우므..

복합 선택자

1. 일치 선택자 E와 F를 동시에 만족하는 요소 선택자 EF // css span.orange { color: red; } // html 사과 딸기 오렌지 당근 토마토 오렌지 2. 자식 선택자 E의 자식 요소 F를 선택 E > F // css ul > .orange { color: red; } // html 사과 딸기 오렌지 당근 토마토 오렌지 3. 후손(하위) 선택자 E의 후손(하위) 요소 F를 선택 E 태그 내에 모든 하위태그들은 후손을 의미 E F // css div .orange { color: red; } // html 사과 딸기 오렌지 당근 토마토 오렌지 4. 인접 형제 선택자 E의 다음 형제 요소 F 하나만 선택 E + F // css .orange + li { color: red; } /..