FE가 되고싶니? 나도✨

그림자 효과

▶box-shadow와 text-shadow 가 있다.

▶X축 / Y축/ 블러 / 퍼지는 효과 / 색깔

→보통 바깥으로 퍼지는 그림자

→inset을 설정하면 안쪽으로 퍼지는 그림

▶box shadow: x position y position blur spread color;

EX )box-shadow: 5px 5px 5px 5px gray;

▶box-shadow: 5px 5px 5px 5px gray inset;

▶x-position(필수) : 가로 위치 . 양수(+)면 오른쪽에 , 음수(-)면 왼쪽에 그림자가 만들어진다 .

▶y-position(필수) : 세로 위치 . 양수(+)면 아래쪽에 , 음수(-)면 위쪽에 그림자가 만들어진다 .

▶blur : 그림자를 흐릿하게 . 값이 클 수록 더욱 흐려 집니다

▶spread : 양수(+)면 그림자를 확장하고, 음수(-)면 축소한다.

▶color : 그림자 색을 정한다.

▶inset : 그림자를 안쪽으로 넣어줍니다 . 기본값은 바깥쪽에 그림자를 넣어주는 것이다.

Float & Clear

▶CSS의 float 속성을 이용하면 웹페이지의 요소를 공중에 띄워서 화면의 좌측 또는 우측에 배치할 수 있다.

▶float은 우리말로 하면 '(물 위나 공중에서) 떠가다, 뜨다, 부유하다' 등의 뜻이 있다.

▶하나의 요소에 float 속성이 적용되면 그 다음에 오는 요소들도 계속해서 float 속성의 영향을 받게 된다.

▶float 속성이 적용된 요소 다음에 오는 요소를 float 속성의 영향을 받지 않고 새로운 줄에 배치하고자 할 때에는 clear 속성을 사용한다.

▶clear 의 속성 값 = left, right, both : 이전에 사용된 'float:left(right, both)'의 기능을 해제한다.

float으로 레이아웃을 잡는 방법

1. 가로로 배치하고자 하는 요소와

(좌우로 배치하고자 하는 요소)

같은 항렬 모두에 float:left;을 쓴다

2. 부모요소에 float을 해제한다

float은 float이라고 적용된 자식요소를 부모 요소가 높이를 인식하지 못한다.

▶해결방법 : 플롯을 해제한다

플롯 해제 방법

▶가상선택자를 잡아서 해제하는 방법

1. 부모에 높이값이 있다면 지워야한다

2. 부모요소에 :after로 가상선택자를 잡아

3. 가상선택자안에

content: '';

display: block;

clear: both; 를 적는다

4. 특이사항 : 하나라도 float을 적용한다면 float이 필요없는 나머지요소들도 모두 float을 적용시켜야 한다.

CSS 선택자

▶CSS의 선택자(selector)는 CSS로 꾸미고자 하는 HTML의 영역을 선택하는데 사용된다.

1. 클래스 선택자 : .

.txt : 클래스가 txt인 모든 요소를 선택

2. 클래스 선택자_both (띄어쓰기 X)

.txt.is : 클래스가 txt 이면서 is를 동시에가지는 요소를 선택

3. 자손 선택자 : (사이에 띄어쓰기 되어있음)

.txt .is : 클래스가 txt인 요소의 자식 중 클래스가 is인 요소를 선택

4. 아이디 선택자 : #

#txt : 아이디가 txt 요소를 선택

5. 전체선택자 : *

* : 모든 요소를 선택

.txt* : 클래스가 txt인 요소 전부다! => 실무에선 잘 사용하지 않는다.

reset.css에서나 사용하는 정도..?

6. 요소선택자

태그이름 : 태그 전부를 선택

EX) p : p태그 전부를 선택

7. 직계자식 선택자 : >

.txt>p : 클래스가 txt인 요소의 자식 중에 직계(바로 뒤에 오는) p태그를 특정해서 선택

cf) .txt p VS .txt>p 다른 선택자이다.

1. class가 txt인 요소 안에 모든 p태그

2. class가 txt인 요소 안에 바로 직계 p태그

8. AND 선택자 : ,

.txt, .text : 클래스가 txt인 요소와 클래스가 text인 요소를 선택

9. 인접 형제 선택자 : +

.txt + p : 클래스가 txt인 요소 바로 뒤에 배치된 첫번째 p태그

10. 일반 형제 선택자 :

.txt ~ p : 클래스가 txt인 요소부터 모든 p태그를 선택

11. 속성 선택자

11-1. : @[]

a[href] : a 태그 중에 속성이 href가 있는 모든 요소

11-2. : @[=""]

a[href="http"] : a 태그 중에 속성 href의 값이 http인 모든 요소

11-3 : @[~=""]

a[href~="http"] : a 태그 중에서 속성 href의 값 중 http 가 포함된 모든 요소

11-4 : @[^=""]

a[href^="http"] : a 태그 중에서 속성 href의 값 중 http로 시작하는 모든 요소

11-5 : @[$=""]

a[href$="http"] : a 태그 중에서 속성 href의 값 중 http로 끝나는 모든 요소

12. 구조 가상 선택자

구조적 가상클래스란 문서 구조에서 위치나 다른 요소와의 관계에 따라

요소를 선택하게 해주는 선택자이다.

E:nth-of-type() E와 같은 유형인 요소중에 (n)번째인 요소

E:nth-child() E의 부모요소에서 n번째에 해당하는 자식요소

단, 그 n번째의 요소가 E와 같은 유형이 아닐경우 해당되지 않음

부모태그 해당요소:nth-child()

부모태그 해당요소:nth-of-type()

부모태그 해당요소:last-child

부모태그 해당요소:last-of-type

(괄호 안에) 음수가 들어가면 무시가 된다.

13. 상태 선택자

13-1

a:focus : 포커스가 있는 요소, 포커스란? 탭으로 넘어가지는 상태

ex) 플레이스테이션에서 스틱으로 포커스를 옮길 수 있다.

13-2

input:checked : 선택된 모든 input 요소( 선택이 가능한 것은 checkbox, radio 버튼)

14. 가상 선택자 (혹은 문자 선택자)

14-1

a::after : a 태그 요소의 뒷부분에 가상으로 만들어지는 요소를 선택

가상으로 만들어지기 때문에 가상 선택자라고도하고,

문자를 넣을 수 있어서 문자 선택자라고도 한다.

14-2

a::before : a 태그 요소의 앞 부분에 가상으로 만들어지는 요소를 선택

가상선택자

▶CSS에서 가상으로 컨텐츠를 추가 가능

▶html 에 들어가는 내용이 아니므로 스크린리더기가 정보를 읽지는 못함

▶꾸미는 효과로 주로 사용하고, 스크린 리더기가 읽으면 안되는 요소를 만들 때 사용

▶가상요소에 태그는 넣지 못하고 오로지 텍스트만 입력가능