0409 uiux 8일차(특정요소 선택, 의사요소, 상속)

0409 화 uiux 8일차

 

(https://kimyws.tistory.com/29) (https://webstoryboy.co.kr/)

플렉스 개구리(https://flexboxfroggy.com/#ko) 

 

갭에 수치 (10 이상) 주면 점선 만들어짐

 

아트 브러쉬 만들기 scale proportionately: 브러쉬 모양을 비율 유지하면서 나오게 해줌

Scatter brush: 같은 무늬 인쇄돼있는 마스킹 테이프처럼 모양을 등록하면 줄 그었을 때 쭈우우욱 나옴

ㄴ Scatter 값 랜덤으로 주면 잔디 같은거 그려서 배치할 때 편할 듯

 

 

 

 

 

오 위아래 대각선 모서리 하나씩만 하면 밧줄모양 만들어짐

 

클리핑 마스크

액자가 아래 있어야 함

도형틀이 1개로 이루어져있어야 한다.

컴파운드 패스: 도형이 겹쳐져서 여러 도형을 1개로 인식하게 해준다.

큰 원 안에 작은 원 만들어서 컴파운드 패스 만들면 이렇게 됨(안(겹치는 부분)이 비어보임)

 

 

도형 여러 개나 글씨 컴파운드 패스 만들고 클리핑마스크만드는 방법 다시 보기(일러스트 책 보자)

어 이제되네

 

클리핑마스크 [ctrl] + [7] / [Ctrl] + [Alt] + [7] 

컴파운드 패스 [ctrl] + [8]

 

 

 

웹

 

가상클래스: 선택자에 추가되는 키워드로 요소가 고정이 되어있지 않고 어떤 특정상태가 되었을 때

스타일을 다양하게 적용해주는 것

 

.contents:hover: 커서를 댈 때 어떻게 될지 결정

.contents:active : 선택(클릭)을 했을 때 사용하는 형태

 

div(또는 선택자로 선택한 요소):hover {     background-color: red; } 이렇게 입력 시 마우스를 갖다대면 배경색이 빨간색이 됨

 

 

html에 넣는 거 <input type="text" class="ct1" type="text">: 입력하는 박스

 

.ct1:focus { background-color: red; } → 입력 박스(?)를 클릭하면 박스의 배경색이 바뀜

focus  - 가리킬 때

nth-child() 형제 사이에서의 요소 선택

 

.box:nth-child(2){ background-color: red; } → .box 두 번째 꺼의 색이 red로 바뀜

2n 2*(1~n2의 배수만큼의 .box들)

 

2n+1

n+3 → 3~5번 박스들이 선택됨

n은 0부터 들어온다?

 

 

n+3 &rarr; 3~5번 박스들이 선택됨

 

 

의사요소

 

선택자 :: 의사요소 

 

특정 부분에 대해 스타일을 정의한다. ( □ 자리에 태그 이름 넣으면 됨)

□::first-line { } 첫번째 줄만

□::first-letter { } 첫 번째 글자

□::before { } 요소의 앞

□::after { } 요소의 뒤

 

 

first-line

 

상속: 하위요소가 상위요소의 스타일의 속성값을 물려받는 것 (후손 엘리먼트들도)

 

● 상속되는 것: line-height, font-size, text-align(정렬), color(글자색)

 

● 상속되지 않는 것: back ground, border, display, 너비

 

● 상속관련 속성값(모든 CSS 속성에 사용가능): inherit 상위요소에게 상속받겠다. initial 상위요소에게 상속받지 않겠다. 

    사용 예. color: initial;, text-align: initial; unset 상속값을 초기화

 

상속받지 않음=기본값

 

안에 있는 p태그는 속성을 적용받지 않음

 

z-index 쌓임 순서 정의(레이어 같은 개념)

값이 높을 수록 위로 감

 

적용 순서

태그 < 클래스 < 아이디  

동일하게 되어 있을 때 아래에 작성한 것이 우선

세세하게 작성된 것도 우선(예. a 안에 있는 b라는 클래스명을 가진 p 태그)

 

자료, 정리

레이아웃

 

 

---

 

(수) 수업 없음

 

다음 수업 때 필요한 책: 디자인 구성요소 설계 및 제작, 구현 (없으면 ncs에서 pdf 다운)

정보통신-정보기술-정보기술개발-ui/ux엔지니어링(https://www.ncs.go.kr/unity/th03/ncsResultSearch.do) 책도 참고해보기

 

 

강사님 필기 Make with Top Object 가장위에 있는 도형에 아래있는 형태들이 들어간다. Ctrl + Y 선만 보이는 형태 Clipping mask 포토샵의 클리핑 기능과 유사 특정한틀에 이미지 가둔다. 맨위에 있어야 틀로써 활용 할수 있다. 도형틀이 1개로 이루어져 있어야한다. Compound path 도형이 겹쳐져서  여러도형을 1개로 인식하게 해준다. Clipping mask Ctrl + 7 Ctrl + Alt + 7 Compound path Ctrl + 8 Ctrl + shift + Alt +8 가상클래스 선택자에 추가되는 키워드로 요소가 고정이 되어 있지 않고 어떤 특정상태가 되었을때 스타일을 다양하게 적용해주는것  선택자:가상클래스{     속성명: 속성값 } hover : 마우스가 콘텐츠에 올라갔을때 반응해준다. active : 선택을 했을때 focus - 가르킬때 nth-child() 형제 사이에서의 요소 선택 2n 0 2 4 n은 0부터 시작한다. 의사요소 선택자 :: 의사요소 특정 부분에 대해 스타일을 정의한다. first-line 첫번째 줄 first-letter 첫번째 글자 before(요소의 앞에) after(요소의 뒤) 상속 하위요소가 상위요소의 스타일의 속성값을 물려 받는것  상속되는 것 line-height, font-size, text-align, color 상속되지 않는것 background border, diplay 상속관련 속성값 모든 CSS속성에 사용가능 값 inherit 상위요소에게 상속받겠다. initial 상위요소에게 상속받지 않겠다. 브라우저 마다의 기본값 unset 상속값을 초기화 A는 컬러상속X B는 font-size X boder 상속 Z-index 쌓임 순서 정의 값이 높을 수록 위로 우선적용 순서 태그 < 클래스 < 아이디 동일하게 되어 있을때 아래에 작성한것이 우선 세세하게 작성된것도 우선 자료, 정리 디자인 구성요소 설계 및 제작 구현