[css_효과]투명도(opacity), 가시속성, 그레디언트

유저 경험(UX) : 사용자에게 좋은 경험을 줄수록 사용자들의 이용이 증가.
                   긍정적 효과.
사용자 인터페이스(UI) : 화면(시각장애인일 경우, 소리)

투명도나 가시성 같은 것들이 디자이너 이슈가 아니냐 생각할 수 있는데
프로그래밍적으로 이용. 마우스오버했을때 이벤트 발생 같은.

 

 

1. 투명도(불투명도, opacity)

tag {opacity:1.0;}
             /* 0.0 ~ 1.0사이의 실수값*/

디자인적 효과를 주려고 사용.

 

 

2. 가시성 속성 ★★

CSS 이용하거나 프로그래밍적으로 이용.

 

(1) 가시성 속성

보이지 않게 하더라도 차지한 영역을 유지하고 있음. 안 보이게 출력.

tag {visibility:visible;} /* 기본값 */
                /*hidden; 숨기기 */

 

(2) 디스플레이(display) 속성

HTML 문서를 화면에 출력할 때 제외. 공간 차지하지 않음.

tag { display:none;}/* HTML 문서 출력할 때 제외하겠음. 공간 차지 않음. */

 

다시 출력하게 만들 때

tag { display:block;} /* 출력에서 제외했던 태그가 블럭일 때 */
tag { display:inline;} /* 출력에서 제외했던 태그가 인라인일 때*/
tag { display:inline-block;} /* 출력에서 제외했던 태그가 인라인-블럭일 때*/

**근데

블럭 요소 태그를 display:inline;이라고 써도 됨. 그러면 블럭 요소를 인라인 요소로 변경됨.

블럭 요소를 인라인 혹은 인라인-블럭으로 변경할때 사용. (flex보다 쉽게 사용.)

→ 형식 변환 속성

ex) 웹 페이지에서 메뉴는 <ul> 태그 사용이 관례.

블럭 요소인 <ul> 태그는 수직 배치인데 수평 배치하고 싶을때

display:inline-block; 설정

 

 

3. 그레디언트(gradient)

(1) 선형(linear-gradient)

tag {
    background : linear-gradient(270deg, red, yellow);
}                              /* 방향   시작   종료 */

방향	to top	to right	to bottom	to left
각도	0deg, 360deg	90deg	180deg	270deg

 

(2) 원형(radial-gradient)

tag { background:radial-gradient(white, skyblue);}
                                /* 시작    종료*/
tag { background:radial-gradient(white, skyblue, blue);}
                                 /* 여러 색을 지정할 수 있다. */
tag { background:radial-gradient(white 5%, skyblue 60%, blue 35%);}
                                 /* 각각 색이 차지하는 비중을 설정할 수 있다.*/
tag { background:radial-gradient(circle, white, skyblue);}
                                /* 보통은 영역 크기에 맞춰 원형그라디언트가 찌그러지는데
                                   반듯한 원 모양으로 출력. 그에 따라 영역 크기 변경. */

circle : 정확한 동그라미 표현. 원래는 박스 기준으로 만들어져 원이 찌그러지기도.