메모

0412 금 uiux 10일차

웹코딩 참고 사이트

(https://kimyws.tistory.com/29)

(https://webstoryboy.co.kr/)

다음주 수요일 구현 평가 - 레이아웃 구현

라이브 페인트

expand로 확장 시

[Alt] + [Shift] 하나씩 가져오기

선에 색 넣기 Shift + 클릭

만든 후 확장-merge

오 이거 집순이 인포그래픽 만들 때 쓰면 좋을 듯

반만 그리고 라이브페인트로 색칠 후 복사. 가운데 기준선 땜에 안보여도 선 다 그려야 색칠됨

3d extrude&bevel 수정하려면 프로퍼티스 어피어런스 부분에 fx. 3d extrude&bevel 더블클릭

이펙트-distort&transform - Pucker & Bloat로 꽃 모양 만들기 가능

웹

...

head에 <link rel="stylesheet" href="style.css"> 넣는 거 잊지말기

flex-wrap: wrap;

align-content: flex-wrap: wrap; 일 때만 사용

교차축에 대한 space를 가지고 있다.

flex-grow
flex item이 기본크기에 비해 더 커질 수 있다.
container에서 할당받을 수 있는 공간을 상대적으로 정의
(https://codepen.io/YoungHeom/pen/PogaRYE) grow 예시

flex-shrink 작아지는 것(페이지 크기 조절하는 건 안 커지고 페이지가 작아질 때만). 작아지는 비율을 변경할 수 있다.

0411 목 uiux 9일차

웹코딩 참고 사이트

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

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

오늘 받은 책

맛있는 디자인 포토샵&일러스트레이터 CC 2023

쉽게 배우는 HTML & CSS3 그리고 JavaScript (전부 읽진 말기)

사용자 경험을 창조하는 UI/UX 디자인 (집에서 시간나면 읽기)

성공하는 포트폴리오는 따로 있다.

일러스트레이터

패턴을 선택하고 도형을 만들었을 때↓

ㄴtransform - object only 체크하면 도형이 움직일 때 패턴도 같이 움직임

스케일 툴, 로테이트(회전), 리플렉트(반사) 툴에서 패턴 체크하면 패턴 크기나 각도 등의 조절도 됨

Appearance(모양)

블렌드 단축키

[Ctrl] + [Alt] + [B]

[Ctrl] + [Alt] + [Shift] + [B]

바운딩 박스 사라졌을 때 단축키(껐다 켰다 가능)

[Ctrl]  + [Shift] + [B]

서로 다른색 도형 그리기 → 2개 선택 후 블렌딩 주기 → 원(면 없이 획만) 그리기

→ 둘 다 선택 후 오브젝트 - 블렌드 - Replace Spine

Effect - Roughen : 털 효과 주기

.

레이어 잠금&잠금해제 컨2 & 컨 알 2

(동그라미 한개 그려서 전부 블렌드 툴로만 만들었다) 중간중간 확장(expand) 필수

7*7 원들 크기 줄이는거만 스케일툴 사용. 작은 7*7 원은 색을 배경색과 같게 하기

flex-box 정렬 (https://blog.naver.com/readytosee/223035587045) 좀 외우고 참고하자...

요소 안에 요소 넣고 또 요소 안에 요소들 넣는 연습 하기

0409 화 uiux 8일차

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

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

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

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

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

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

클리핑 마스크

액자가 아래 있어야 함

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

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

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

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

어 이제되네

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

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

웹

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

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

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

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

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부터 들어온다?

의사요소

선택자 :: 의사요소 

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

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

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

□::before { } 요소의 앞

□::after { } 요소의 뒤

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

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

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

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

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

상속받지 않음=기본값

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

값이 높을 수록 위로 감

적용 순서

태그 < 클래스 < 아이디  

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

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

자료, 정리

레이아웃

(수) 수업 없음

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

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

0408 월 uiux 7일차

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

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

일러스트레이터

로테이트 툴(R)

클릭: 회전 중앙점

중앙점 찍고 다시 클릭 드래그하면 움직임.

중앙점 찍기 - alt - 클릭 - 드래그 → 복제

엔터 또는 아이콘 클릭

30도(or 45도)씩 회전하면 깔끔함!

반전(O)

스케일(S)

scale stokes & effects 체크하면 작아지면서 선까지 가늘어짐

가운데를 소실점으로 해서 복도 같은 거 만들 수 있을 듯..

겹쳐진 오브젝트 여러개를 그룹하지 않고 투명도를 줘야

개별적으로 투명도가 들어가고 겹치는 부분은 더 진해보인다.

그룹하고 투명도 주면 

그레이디언트

alt 클릭 드래그하면 색 복사됨!

색 관련 단축키 ↓
<           >            /

스포이트(i)

문자도구(T, 타입 툴)

내가 직접 크기를 정해서 만들면 회전해도 네모 모양만 회전이 되고 글의 각도는 그대로다!

클릭해서 만들면 완전히 회전 됨.

오브젝트-패스-오프셋 패스 내가 원하는 느낌으로 비율 유지되면서 크기가 커짐

둘러싸기 왜곡

object - Envelope distort - make with top object

최상위 도형에 선택한 것 중 밑에 있는 것을 안쪽에 넣어줌(글자가 아래 있어야 함)

release로 이전 상태 되돌리기 가능

웹

flexbox 

: 박스 내 요소 간 공간 배분, 정렬 기능을 제공

(내부 요소의 개수에 따른 균일한 공간 배분)

부모에게 기능을 넣어주면 자식들이 기능을 사용한다.

주축(좌우(행))

교차축(상하(열))

flex - diredtion

flex의 방향을 지정

(행, 열, 정방향, 역방향)

row-reverse; 맨 위에서 가로 역방향

column 행을 열(세로)로 변경

column-reverse 왼쪽아래부터 거꾸로

상위요소가 작아지면 내부 요소들 크기들이 상위 요소 크기에 영향을 받는다.

상위요소 크기가 내부 요소들 크기보다(만큼) 커지면 원래 설정한 크기로 돌아온다.

(기본 크기를 줄여서 넣어줌. now )

flex-wrap

한 줄에 들어가지 않을 경우 줄바꿈을 선택해줄 수 있는

nowrap: 기본 크기를 줄여서라도 컨테이너 넣어준다.(기본형)

wrap: 새로운 줄로 배치

wrap-reverse: 반대방향 래핑

justify - content 주축(행) 배치법

flex-start: 시작부분

flex-end: 끝부분

space - btween 시작 마지막을 맞추고 가운데 공간 절반(양끝 여백 없음)

space-around; 동일 간격 여백, 시작 마지막(양 끝은 요소 간의 여백 절반만큼)도 여백

s-evenly 동일간격(여백 모두 완전 동일) 

  └→ 사용예시. justify-content: space-evenly;

 flex-start (default) flex-end center space-between space-around space-evenly 

교차축(열) 배치법

align - item

align - self: 교차축 개별 요소 배치

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

기타 선택자

속성, 이름

[id] {}: id라는 속성을 갖고 있는 모든 태그

[class="hello"]
속성과 값이

[class^="h"] h로 시작하는

[class*="o"] o가 포함된

[class$="o"] o로 끝나는

결합 선택자 / 자손 결합자

div > p: div 안에 있는 p 직전

직전 자식만(내 자식만. 내 자식의 자식에는 적용X)

div p: div 안에 있는 p

자식의 자식도 선택

ㄴ왼쪽 body 안에 있는 p 클래스만(body 안에 있는 div 안에 있는 p태그엔 적용안됨)

div .a 

div 안에 있는 .a 클래스 모두

div>.a 

div 안에 있는 직전 .a 클래스

 선택하는 거 많이 연습 (헷갈리면 코드펜에 적어서 어떻게 적용되는지 확인)

div ~ p : div 요소의 뒤(밑)에 있는 형제 중 모든 p 태그 요소 선택(여러 개 선택)

.a + div: .a태그 바로 뒤 div 태그 하나 선택

.a, .b : .a랑 .b 선택(여러 태그 선택 )

wow~ 진짜 넘 헷갈려~

이제 슬슬 마켓컬리 페이지 모작해봐야 될 듯

웹디자인으로 갈건지(css까지만) 웹퍼블리셔쪽으로(자바스크립트까지) 갈 건지 생각해야 됨

0405 금 uiux 6일차

일러스트

fill 면 stroke 획(선)

라쏘툴(Q)로 선택 시 뒤 레이어를 잠그지 않아도 큰 오브젝트 안의 작은 오브젝트들을 선택 가능

레이어 잠금 [ctrl] + [2]

레이어 잠금 해제 [ctrl] + [Alt] + [2]

레이어 눈 끄기[ctrl] + [3] 

도형만들 때 alt 클릭 하면 가운데를 기준으로 만들어짐 

distribute spacing 기능 이제 첨 앎... 0mm 으로 하고

이 아이콘 누르면 오브젝트 사이 간격이 0이 되면서 딱 붙음

패스파인더 merge 같은색은 합치고 다른 색은 분리함

익스팬드 어피어런스 - 효과를 가진 선(예. 지그재그 선)을 패스로 변환

코너땜에 작게 변형이 안되면 스케일 코너 체크하기

Vetrical-align

인라인, 인라인블럭

수직에 대한 정렬

텍스트, 이미지 ←인라인요소들 사이에서 수직배치 제어를 실행해줌

블록은 적용되지 않음

속성값

baseline 기본

top

bottom

middle

float(흐름)

 문서의 흐름

 인라인 옆으로 

 블럭 아래로

html문서에서는

요소를 만들면 먼저 만들어진 것이 나오고 그 이후는 차례대로 표시됨

float

 ㄴnone: 기본

 ㄴleft: 자신을 포함한 박스의 왼쪽

 ㄴright: 오른쪽

position

 문서상 요소를 배치하는 방법

속성값

Syatic(정적): 기본 문서 흐름에 따라 배치해줌

relative(상대적): 일반적인 문서 흐름에 따라 배치, 상하 좌우 위치값에 따라 오프셋(위치) 지정해줌

top: 300px; 값 넣으면 아마도 탑에서부터 300px만큼 이동하는듯

absolute

 흐름에서 제거

 상하 좌우 위치값에 따라 오프셋 지정해줌

 가장 부모가 가까운 position 지정 요소에 대해서 상대적으로 위치를 결정

 얘도 relative랑 비슷

fixed

 흐름에서 제외

 지정한 위치 고정

sticky

 흐름에서 제외

 스크롤 동작이 존재하는 가까운 요소에 적용

 (가로로는 안움직이는데? 뭐지?)

flexbox

박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원적 레이아웃 모델

주축 : 진행방향
교차축 : 90도방향

flex-direction

오늘 못했던거(놓침) 연습하기

강사님 메모

0404 목 uiux 5일차

웹코딩 참고 사이트
(https://kimyws.tistory.com/29)
(https://webstoryboy.co.kr/)

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

레이어 우클릭 컨버트 투 스마트오브젝트

또는 필터-convert for smartfirters

필터- 픽셀레이트-컬러 하프톤

레이어 마스크에 컬러 하프톤 넣을 수 있음(글씨도 가능)

채널 레이어 r g b

red 클릭해서 흰색이 높을 수록 레드값이 높음

제너럴 쇼더홈스크린  Show the Home screen When No Documents Are Open

스마트가이드 measurement lable

어도비 일러스트 

색 관련 단축키

<           >            /

색 그라디언트 None 

fill 면 stroke 획(선)

d 필앤스트로크(면과 선) 색 기본값으로 변경(포토샵도 동일)

[shift] + [X] 면과 선 색 바꾸기(포토샵은 [X])

빈곳부터 드래그하여 오브젝트들을 선택(여러 개 선택할 때)

시프트로 추가적인 선택 가능

정비율 도형 만들기 shiftv

정사각형 다이아몬드 모양 만들기 트랜스폼(안써서 몰랐다..) Free Transform 

free distort - alt키 누르면서 앵커포인트 잡고 줄이면 반대쪽 앵커포인트로 같이 줄어듦

사다리꼴, 평행사변형 다 만들 수 있음!

컨f 위로 복사

컨b 아래로 복사

컨d 이전 작업 반복(한가지만)

닫힌 패스로 만들어야 도형임(열린패스는 NO!)

선 이을 때 포인트 닿게 배치한 다음 교차점 선택후 우클릭 join(합치기)

다각형 툴

 삼각형을 오각형으로 만들기(도형 점 개수 늘리기)

→ 조절 박스 오른쪽 다이아몬드표시 클릭드래그로 조절

0403 수 uiux 4일차

포토샵

 [ctrl] + [,] 레이어 눈 끄고 키기

 병합(merge) [ctrl] + [E]

 보이는 레이어 모두 병합 [ctrl] + [shift] + [E]

 보이는 레이어 모두 병합, 원본 레이어들은 남김 [ctrl] + [alt] + [shift] + [E] 

항상 원본을 남겨놔야 하니까 컨트롤 알트 시프트 e가 제일 나은 걸로. 아님 그냥 그룹으로 관리하기

convert to layers (컨버트 투 스마트 오브젝트 해제 후 그룹으로 만듦)

블렌딩 모드 3대장(?)

멀티플라이(곱하기) 흰색 → 투명, 겹치는 부분 → 어둡게 표현

스크린

오버레이

단축키 안되는 경우

esc

1) 블렌딩 모드 변경 시 모드 박스 테두리가 파란색으로 되어있다면 ESC 누르면 됨

2) 한영키(한글로 되어있으면 영어로 바꿔주기)

컬러닷지 채도 증가

이미지-어드저스트먼트(조정)-인버트(색 반전)

선택영역 거꾸로 마스크 만들기

 선택영역으로 영역 선택 후 [alt] + 레이어 마스크 만들기 

 그냥 레이어 마스크 만들기 누른 후 [Ctrl] + [i]

컨트롤 썸네일 클릭하면 오브젝트의 투명도에 따른 선택영역이 생긴다.(투명도 50퍼센트 오브젝트면 선택영역 선택 후 색채우기 하면 연하게 색이 채워짐)

박스모델

실제크기: 콘텐츠

패딩, 보더

약어

div*3 div (태그 연속으로 3개)

div>div*3 (div 태그 안에 div 태그 3개 만들기)

div+span+p (div span p 태그 하나씩 만들기)(응용으로 곱하기 넣어서 ○*2+●*3+◎*2 이렇게도 가능함)

챗gpt한테 emmet 태그 물어보기

.클래스명

div 형태로 클래스를 넣어서 만들어줘

.a*3 (div태그가 세 개 만들어짐)

span.a*3 (스판태그가 세 개 만들어짐)

클래스(또는 아이디)가 있는 태그 만들기(클래스 이름 정하지 않고 여러 개 만들 때)

div[class]*3 ( [class]*3을 적어도 div가 기본 설정이기 때문에 div는 안해도 됨)

span[id]*3 (

이름 적고 Tap키 누르면 다음꺼 이름 적을 수 있음!! 

 #abc*3   

<div id="abc"></div>이게 세 개 적힘

 #abc$@*3 $@(숫자 점점 증가하면서 적힘)

<div id="abc1"></div>  <div id="abc2"></div>  <div id="abc3"></div>

.a*2>#abc$@*3

이름이 a인 클래스 2개를 만들고 그 안에

.클래스 이름

#아이디 이름

[] 속성

{} 내용

div{개체$@}*3

 ㄴ div 세개를 만들건데 개체라는 이름을 넣을거고 이름 뒤에 숫자 순서대로 각 1 2 3이 들어가면 좋겠다.

div.a{개체$@}*3

 ㄴ a라는 클래스명을 가진  div를 만들 건데 ~~~ 숫자 순서대로 각 1 2 3이 들어가면 좋겠다.

padding-left: 10px; 줄이면 pl10;

bd 보더

bgc 백그라운드 컬러

mg 마진

pd 패딩

별다줄... 암튼 쓰고 Tap키 누르면 알아서 풀어서 써짐

0402 화 uiux 3일차

책없으면 ncs에서 pdf 다운받기

당분간은 디지털디자인 구성요소 설계, 구현 2권만 가져오면 됨

압축

포토샵 투명픽셀 잠그고 브러쉬로 칠하면 투명한 부분은 색칠 안됨

텍스트 정렬. text-align

(위아래로) 태그 복사: alt+shift+위아래 방향키

태그 하나 커서 놓고 alt 위아래 방향키 누르면 위아래 태그들이랑 순서 바꿀 수 있음

텍스트 컬러 3가지 형태

1. 키워드

2. rgb 색상코드

3. rgb 함수

함수형태를 넣어줄 때는 혼합 형태 X

%를 넣다가 수치값을 넣어주는 것

display (태그의 속성값을 바꾼다)

보여지는 형태를 어떻게 넣어줄지 지정을 해준다.

3가지만

None 논: 보이지 않음

block 블럭

inline 인라인

inline-block 인라인 블럭

인라인 border-width

 같은 줄에 나란히 배치

 객체가 뒤에 들어간다. 

 크기 콘텐츠(텍스트, 이미지 등) 너비(좌우 길이) 차지

 너비&높이를 직접 설정 불가능

 여백 상하 여백 미적용. 좌우는 적용한다.

 Q. 어디에 쓸까? 텍스트 일부를 스타일링할 때, 하이퍼링크(a), 이미지와 미디어

블록 

 새 줄에서 시작.(페이지의 한 줄 만큼만 차지. 한 줄에 하나)

 사용 가능한 전체의 너비를 차지한다.

 크기는 부모 요소의 너비를 차지한다.

 너비&높이를 직접 설정 가능

 여백은 상하좌우 모두 설정 가능

 Q.  어디에 쓸까? 주요 섹션, 레이아웃 요소를 구성할 때, 문단 구분할 때, 제목과 하위제목&내용, 목록 생성

인라인 블록 요소(인라인처럼 배치되나 블럭의 속성도 갖고 있음)

 인라인처럼 같은 줄에 배치

 블록처럼 너비, 높이 지정이 가능하다.

 너비, 높이, 여백 설정이 가능하다.

 Q. 어디에 쓸까? 인라인 요소인데 너비와 높이가 필요한 것, 수평으로 된 메뉴, 내비게이션 바(탑바?), 그리드 또는 타일 레이아웃

※ 참고로

<span>ab</span><span>cd</span> 가로로 쭉 작성 시 결과

adcd

<span>ab</span>

<span>cd</span> 엔터 치고 작성 시 결과

ab cd

너비

인라인(콘텐츠너비)

블럭(100%)

인라인블럭(콘텐츠너비)

한 줄 배치

인라인(여러 개)

블럭(하나만)

인라인블럭(여러 개)

크기

인라인(크기가 없다.)

블럭(너비&높이 설정 가능)

인라인블럭(너비&높이 설정 가능)

여백

인라인(좌우)

블럭(상하좌우)

인라인블럭(상하좌우)

너비, 한줄  인라인적

크기, 여백  블럭적

border (모작할 때 많이 볼 듯한)

 테두리

 하위속성

 혼자서도 사용가능

 border 크기 종류 색

 solid 직선 / dotted 점선 / dashed 긴 점선

bodrer-color

width

style

width

1가지 형태

상하좌우

상하 좌우

상 좌우 하

상 우 하 좌

브라우저 요소를 렌더링할 때

각각의 요소는 사각형 형태를 유지한다.

이 영역을 박스라고 표현

바깥 여백(margin 다른 요소와의 외부 여백을 제공)

배경색, 배경이미지에 영향을 받지 않는다.

테두리(border 테두리 요소, 외곽선을 형성) 

안쪽 여백(padding 테두리 사이 내부 콘텐츠와의 여백을 표현한다.)

콘텐츠 영역(div, span 등): 실제 콘텐츠의 크기(너비&높이를 기본크기로 가진다.)

요소의 실제크기

콘텐츠, padding, border

margin 요소의 간격만 설정해준다.

border, padding을 바꾸다보면 요소의 실제크기 변경

그럴 땐 box-sizing을 사용할 수 있음

box-sizing: 속성값

content-box(너비와 높이가 콘텐츠기준)

border-box(너비와 높이 콘텐츠, padding, border)

0401 월 uiux 2일차

rgb 빛에 대한 색. 혼합 시(rgb의 값이 높아질 시) 밝아짐.

cmyk 잉크에 대한 색. 혼합 시 어두워짐.

색상

채도:

명도

jpg, png 파일- 웹용으로 사용

비주얼 스튜디오 코드 cyrl+y 이후 돌리기(컨z 컨y)

태그 복붙: 알트 시프트 방향키위아래

선택자 {

      속성명: 속성값;

}

선택자: 어떤 요소에 스타일을 적용할지에 대한 정보

{}: 어떤 요소를 적용할지 정의하는 구간

속성명: 어떤 스타일을 정의하고 싶은지 정보

속성값: 어느 정도의 수치

:(콜론) 속성명과 속성값을 나눠

;(세미콜론) 구분자 속성을 구분

<link rel="stylesheet" href="style.css">

    폴더 안에 있는 style.css 파일이라면 "폴더명/style.css"이라고 작성해야 함

인라인 속성:태그에 직접 기술하는 방식

내부에 있는 부분만 넣는다

컨트롤 시프트 L(동시 다중선택)

태그명*숫자

숫자만큼 태그를 만들어준다

Tap이동하면서 내용작성

태그명*숫자{내용} 쓴 후 엔터

태그가 숫자가 나와서 내용까지 써줌

예) div*3{기본} 엔터 치면 세개가 쭉 작성됨

      <div>기본</div>

      <div>기본</div>

      <div>기본</div>

스타일 태그 만들기

ㄴ HTML에서 직접 넣어주는 기능

헤드에 태그 스타일 작성할 수 있음

문서 간의 연결

head 안에 style 태그 넣어주기

css 주석처리가 다름

선택자

어떤 요소에 스타일을 적용할지

종류: 기본, 그룹, 특성, 결합, 의사 클래스, 의사요소

전체 선택자: *

* {}

 문서 내의 모든 요소를 의미(페이지 전체)

 문서 내 글자체를 동일시할 때

 전반적인 색을 동일시할 때 사용.

태그 선택자: 주어진 이름을 가진 태그. 요소를 선택

p, div, span

클래스 선택자: 각 태그들을 동일한 명으로 묶은 것(먼저 태그 이름을 설정해야 함)

.클래스명 {}

div랑 span을 같은 클래스에 넣을 수 있음 <div class="a"> <span class="a">

id 선택자 #.id명

 고유한 식별자를 가진다. 이름은 다른 요소와 달라야 한다.

 동일한 명으로 했을 때 문제는 없어 보인다.

 웹 표준: 동일한 페이지가 다른 pc에서도 열려야 함

 크롬, 웨일, 엣지

 동일한 페이지

 규칙들

 id 다르게. javascript 문제 발생할 수 있다.

 주민번호라고 생각하기

그룹 선택자

 다양한 유형의 요소를 한번에 선택하고자 할 때 사용

 (,) 쉼표 구분 예) #a1, span {}

선택자에는 우선순위가 있다. 

1. 나중에 작성된 스타일을 우선 적용(밑이 우선)

2. 아이디 > 클래스 > 태그

홈페이지를 구성할 때부터

1. 레이아웃의 형태 

2. 스타일 

클래스로 묶을지 

아이디로 묶을지 

홈페이지 제작보다는 관리

class "a c" a도 되고 c도 됨. .a {} .c {} 순서로 적으면 .c에 있는(제일 밑에 적은) 게 적용됨

텍스트 꾸미기

font-family: 텍스트에 글꼴을 지정할 때 사용함.

사용자의 시스템에 해당 글꼴이 없을 수 있기 때문에 대비해서 여러 글꼴을 백업지정한다.

웹 폰트

 font-family: 글꼴명, 글꼴계열;

 글꼴명 공백이 있으면 " "(큰따옴표)로 묶어준다.

 글꼴계열

 사용을 하지 못할 때 계열만 선택해줌

 세리프(삐침있는 글자), 산세리프(돌출없는 글자), 모노스페이스(너비가 고정되어있음)

 cursive(필기형) fantasy(장식)

( https://webstoryboy.co.kr/ ) font-family 쪽 보면 됨!

font-size

px: 절대크기

em: 부모태그의 font-size와 상대크기 예) 3em하면 부모태그의 3배만큼의 크기

rem: html 기본글꼴의 배수, 상대크기

0329 금 uiux 1일차

ncs 정리 ( https://haanaaedu.tistory.com/category/Ncs )

transition을 사용할 수 있는 속성 ( https://codepen.io/YoungHeom/pen/oNrjoaj )

폼 태그 입력 요소 ( https://codepen.io/YoungHeom/pen/LYKpOrE )

포폴&웹 혜지 강사님 코드펜 (https://codepen.io/kimhyeji324)

피그마 단축키 ( https://velog.io/@jaekyeongmoon/figma%EB%8B%A8%EC%B6%95%ED%82%A4 )

피그마 ( https://velog.io/@gpdbs2/series/Figma )

코드랩 레퍼런스 CSS Description ( CSS 정리글 )

※ 제이쿼리 참고
Inpa Dev 👨‍💻 제이쿼리 메소드 종류 총정리 ( 제이쿼리 메소드 종류 총정리 ) 💙💛맨날 헷갈림

transition / transform / animation 속성 사용법 ( transition / transform / animation 속성 사용법 ) 💙🧡맨날 헷갈림22
제이쿼리 css 선택자 모음 ( 제이쿼리 css 선택자 모음 )

코드랩 레퍼런스 jQuery  Description ( 제이쿼리 설명글 )

< 통계자료 사이트 > ( 자세한 건 사용자 경험을 창조하는 UX/UI 디자인 책 44p 참고! )

- 일반, 종합

국가통계포털 ( https://kosis.kr/index/index.do )

한국통계진흥원( http://www.stat.or.kr/ )

지표누리 ( https://www.index.go.kr/ )

- 인구, 지역 정보

지자체 사이트 ( https://opengov.seoul.go.kr/ )

통계지리정보 서비스 (  )

- 문화콘텐츠

한국콘텐츠진흥원, 게임, 음악, 애니메이션, 방송 분석

- DB 웨어하우스

한국데이터진흥원

DBPia

데이터스토어(유료&무료)

- 연구기관

KT경제경영연구소, 기술 트렌드, 리포트 제공

한국정보화진흥원, 국가 정보화백서

한국갤럽조사연구소( https://www.gallup.co.kr/ )

gui
사용성(usability). 사용자가 느끼는 효과성과 효율성

디자인 의도 명확하게: 사용자가 편하게 사용. 디자인 < 실용성
기획을 구체적으로. 검색 활용(챗gpt)

UX: 경험적 디자인. 사용자에게 즐거움(좋은 경험) 전달 멋진x 좋은 ux를 제공

사용자가 제품이나 시스템을 이용하면서 얻게 되는 느낌이나 생각 등을 포함한 총체적 경험

예쁘지 않아도 구현하기 쉬운 것부터 <웹사이트 찾기>

앱, 웹 기획 지금부터. 컨셉 잡기. 레퍼런스 찾아보기

객체 지향 언어(태그?)

자바랑 자바스크립트는 다름!

프로토타입- 사용자 인터페이스 디자인 과정에서 실제 제품이나 서비스의 초기 버전을 만들어 내부 검토나 사용자 테스트에 사용하는 것

포토샵, 일러스트 (평가 있음)

레이아웃 편성, 스토리보드 작성

포토샵 컨트롤 알트 W 누르면 작업창 닫힘

vs코드 html 태그 정렬(문서 서식) 단축키: Shift + Alt + F

웹

html, css, 자바스크립트(js)

코드펜, vsc(비주얼 스튜디오 코드, vs코드)

비주얼 스튜디오 코드 검색 후 다운받기 - https://code.visualstudio.com/ 

한글 언어팩 깔기

새파일만들기 컨트롤n- 언어선택-html

html / css / js

툴 / 디자인 / 행동

html 하이퍼텍스트마크업랭귀지 . 하이퍼텍스트(확장된 텍스트) 마크업(표시)

vs코드

tap키로 태그 자동완성

단일태그- 시작과 끝을 구분하지 않음

각 태그 별로는 속성

태그의 부가적 기능

태그입력: 태그이름+TAP

주석: ctrl + /

표준: ! + 엔터

<html></html> 문서유형의 시작과 끝

<head> 웹화면에서 보여지지 않지만 웹브라우저가 알아야 할 정보(상단 탭 이름 변경 가능)

meta charset="UTF-8"

<body>: 실제 브라우저 화면에 표시될 내용 입력

<p> 파라그래프. 문단

알트 시프트 아래(↓)

블럭: 전체를 채워주는 형태(한 줄 형태로 되어있다면 블록)

인라인: 필요한 부분 채워주는 형태(디스플레이(속성): 인라인;)

strong: 강조

h1~h6

h1 가장 크게

hr태그 수평선- 내용 구분을 위해 사용

<br> 줄바꿈태그

띄어쓰기: 스페이스바, &nbsp;

한칸 띄어주는 형태 &nbsp; 스페이스바(띄어쓰기) 한번 한칸, 스페이스바 &nbsp; 두 칸, 스페이스바 &nbsp; 스페이스바  

: 콜론  ; 세미콜론

드래그(글자 마우스 선택) 안 되게 하는 방법!
ㄴuser-select: none;
줄바꿈 안되는 건 white-space: nowrap;

<em> 기울이기 

인라인 내부 블럭과 블럭 내부 블럭은 차이가 있다.

컨트롤 엔터 다음 줄이 생성되고 거기로 커서가 이동됨

img 이미지 태그(단일 태그)

src 속성 url 주소

alt 속성(대안, 대체)

이미지 에러, 로딩 되기 전에 뜨는 글자

img 태그 입력 후 탭 누르면 저절로 뜸

img는 인라인 요소이다.

- 컨테이너 태그

콘텐츠나 레이아웃에 영향이 없이 여럿을 묶어서 관리하는 역할

<div> 블록 레벨 컨테이너

<span> 인라인 컨테이너

블록(전체 너비만큼의 크기) 

인라인 안의 요소(자식 엘리먼트) 너비&높이에 따라 칸의 크기가 달라짐

- 전역속성 

html 태그의 공통으로 사용할 수 있는 속성

시작태그에 속성을 넣는다 (*: 중요 표시)

* id: 고유한 이름 부여, 식별자. (#)

* class: 그룹별로 묶을 수 있는 식별자 (.) 예) .tag > a

 ㄴ 둘의 차이: id는 혼자, class는 그룹

style: 스타일(색 설정)

title: 커서를 댔을 때 네모박스로 설명이 나옴

정리햇는데 정리된 사이트가 있다네,,,

- 링크(link): 다른 문서를 연결해준다.

a 태그 anchor(첨부한 링크로 이동)

target 속성(타겟 안에 넣는 속성들)

현재탭 self

새로운탭 blank(새 페이지로 열기)

목록: 연관있는 항목들을 나열한 것

순서 있는 항목 ol 예) 1. 어쩌구 2. 저쩌구

순서 없는 항목 ul 예시) · 어쩌구 · 저쩌구

목록 안 항목 li (

input 입력 

type 입력 요소의 형태 데이터 타입이 달라지게 해주는 것

    <input type="text"><br><br>
    <input type="button"><br><br>
    <input type="color"><br><br>
    <input type="range"><br><br>
    <input type="date"><br><br>

 div.center = .center

롯데리아 촵땡겨체

( https://www.lotteriafont.com/ )

수업이랑 관련 없지만 확인해보기