루체

일치 선택자(Basic Combinator) E와 F를 동시에 만족하는 요소 선택 /* css */ span.orange{ color:red; } 사과 딸기 오렌지 당근 토마토 오렌지 태그와 클래스가 붙어있는 형태입니다. 이것을 일치 선택자라고 부를 수 있습니다. 이것은 span태그이면서 orange라는 클래스 값을 가지는 것을 찾아야 합니다. 자식 선택자(Child Combinator) E의 자식 요소 F를 선택 /* css */ ul > .orange{ color:red; } 사과 딸기 오렌지 당근 토마토 오렌지 > 이 기호가 뜻하는 것이 자식 태그를 찾으라는 뜻입니다. ul의 자식요소로서 li태그가 들어있는 것을 확인할 수 있습니다. 그 중에서 .orange라는 클래스 값을 가지는 태그를 선택해서 ..

1. 전체 선택자 요소 내부의 모든 요소를 선택한다. * /* css */ * { color: red; } 사과 파인애플 귤 오이 당근 토메이토 이렇게 css에 작성을 하게 되면 모든 태그에 대해 글자색을 빨간색으로 바꾸겠다! 라는 말이된다. 2. 태그 선택자(Type Selector) 해당하는 태그 이름의 요소를 선택 E /* css */ li { /* 앞 뒤에 기호가 없으면 태그 선택자 */ color: red; } 사과 딸기 오렌지 태그 전체를 찾아서 적용을 시키기 때문에 원하는 거 하나를 집어내기가 쉽지 않다. 그래서 클래스 선택자와 아이디 선택자를 사용을 하면 하나만 집어내서 적용할 수가 있다. 3. 클래스 선택자(Class Selector) HTML class 속성의 값이 E인 요소를 찾아 선..

인라인(in-line) 방식 - HTML 태그에 'style' 속성을 직접 작성하는 방식 안녕 이렇게 사용을 하면 css에서 선택자를 작성을 하지 않아도 style이 적용이 가능합니다. 근데 그럼 이 방식이 css에 작성을 하는 것보다 좋은 방식이냐? 더 좋은건 아닙니다. 조금 더 복잡한 웹 디자인을 만들 때는 반복적인 사용과 유지보수를 추후에 할 때는 class로 지정을 해줘서 고치는 것이 더 좋은 방법입니다. 물론 이 방법이 안좋다라는 것은 아닙니다. 나중에 공부하게 되는 내용에서 특정한 기능들이 자동으로 삽입이 되게 하는 것으로 사용을 하는 것은 괜찮으나 직접적으로 작성을 하는 것은 피해야 합니다. 내장(embedded)방식 HTML head안에 안에 작성하는 방식 HELLO HELLO라는 텍스트가..