[UI/UX]패스트캠퍼스 챌린지 34일차

UXUI DESIGN/UXUI DESIGN - STUDY

[UI/UX]패스트캠퍼스 챌린지 34일차 - CSS 1

풀짝풀짝 2022. 2. 26. 23:30

오늘은 CSS에 대해서 배워봤다

많이 배워볼려고 했는데

뇌용량 초과로 적당량만 듣기로 했다 ^_^

피그마 얼른 마저 들어야하는데 코딩 듣던거 끊기면 좀 그래서,,

코딩 듣고 들어야겠다,,!

중간과제가 먼지는 궁금한데

UI만드는거면 피그마를 활용해서 해볼 계획 +_+

CSS

#선택자{속성:값;}
- 선택자는 스타일을 적용할 대상(selector)
- 속성은 스타일의 종류를 지정할 때 사용
- :은 은이다
- ;은 값이다
*속성은 하나가 아니라 여러개가 될 수도 있다.
하지만 하나로 쭉 쓰면 보기 불편하므로 띄워써서 만드는 것이 좋다.
ex) div{color:red; margin:20px;}

#주석넣기
/*설명작성*/

# '*'표시는 모든 요소를 선택하는 것이다.

#태그 선택자
: 태그이름이 abc인 요소를 선택한다.
별도의 이름 없이 태그의 이름만 명시한다.
앞쪽과 뒤쪽에 크게 해석되는게 없어야한다.

#클래스 선택자

(가장 많이 볼 수 있다)
: html class속성의 값이 abc인 요소를 선택한다.
ex).orange => 클래스라는 속성부분에 이름이 선택된다.

#아이디 선택자
: html id 속성의 값이 abc인 요소를 선택한다.
ex)#orange{color:red;

#복합/일치 선택자
:선택자 abc와 xyz를 동시에 만족하는 요소 선택한다.
별다른 기호없이 붙여서 사용 가능하다.

#복합/자식 선택자
: 선택자 abc의 자식 요소인 xyz를 선택한다.
ABC>XYZ
ul>.orange{color:red;}
=> ul> 이것이 조건이 된다.

#하위(후손) 선택자
: 선택자 ABC의 하위 요소 중에 XYZ를 선택한다.
띄어쓰기가 선택자의 기호이다.
ex) div .orange{color:red;}

#인접 형제 선택자

(많이 사용은 안되고 있다는 것 정도만 알아두기!)
: 선택자 ABC의 다음 형제 요소인 XYZ 하나를 선택한다.
.orange + li{color:red;}

실습예제