전체 글 133

선택자2 (20.07.05)

1. 선택자의 조합 - 요소와 class의 조합 - 다중 class - id 와 class의 조합 2. 속성선택자 - 단순 속성으로 선택 - 정확한 속성값으로 선택 - 부분 속성값으로 선택 ==> 1. p요소/class속성이 있는 것에는 컬러가 silver이 들어갑니다. 2. p요소/class속성/id속성이 있는것에는 text에 밑줄이 들어갑니다 ==> 정확한 속성과 값이 있어야 적용이 됩니다. *부분 속성값으로 선택 - [class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택 - [class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택 - [class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택 -..

FE/CSS 2020.07.05

선택자1 (20.07.05)

- 요소 선택자(태그): 선택자 중에 가장 기본이 되는 선택자이며, 태그 선택자라고 합니다. 선택자의 부분에 태그의 이름이 들어갑니다 - 그룹화: 선택자는 쉼표을 이용해서 그룹화를 할 수 있습니다. - 전체 선택자: 한번만의 선언으로 문서 내에 모든 요소에 스타일 규칙이 적용. 매우 편리하지만 , 성능에 좋지 않으므로 사용을 지양하는게 좋습니다. - CLASS 선택자: 요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 자장 일반적인 방법. cla ss선택자를 사용하기 위해서는 html 을 수정하여 class 속성을 추가해야 합니다. - 다중 CLASS: class 속성은 꼭 하나의 값만 가질 수 있는 것은 아닙니다. 공백으로 구분하여 여러개의 class를 사용 가능합니다. - ID 선택자: class ..

FE/CSS 2020.07.05

CSS (20.07.05)

1. CSS는 무엇인가? - CASCADING STYLE SHEETS - html을 꾸며주는 언어(디자인을 하는 역할) 2. CSS 문법 규칙 - 어떤 요소를 꾸밀지 선택할 요소가 필요 - 그 요소를 어떻게 꾸밀건지 스타일의 내용 ==> ex) h1 { color : red; font-size : 3em; } - 선택자(selector): h1 - 속성(property): color, font-size // html의 속성과는 완전히 다른것이니 구분하자(html의 속성: attrinbute) - 값(value): red, 3em - 선언(declaration): ':' 로 구분 - 선언부(declaration block): {} 의 내용들 _ 규칙(rule set): 위의 예시 전체 ==> h1 { co..

FE/CSS 2020.07.05