0527 월 uiux 38일차

0527 월 uiux 38일차

웹코딩 참고 사이트 김영원 강사님 ( https://kimyws.tistory.com/29 ) ( https://webstoryboy.co.kr/ ) 플렉스 개구리 ( https://flexboxfroggy.com/#ko )

혜지 강사님 수업페이지(html&css) ( https://codepen.io/hjyee/full/OJGrVYJ ). 자바스크립트 수업페이지 ( https://codepen.io/hjyee/full/PogMVOP ) 깃허브 기초 ( https://codepen.io/hjyee/full/LYoNWga ) 기초 키보드 사용법 ( https://codepen.io/YoungHeom/pen/eYaOYEX ) 연산자 ( https://codepen.io/YoungHeom/pen/Rwmbxze ) 코드펜 사용법 ( https://codepen.io/YoungHeom/pen/gOJOWgE ) 무료 강의 ( https://programmers.co.kr/ ) 피그마 강좌 ( https://www.youtube.com/@yeonjung-figma ), ( https://www.youtube.com/@UXUIDesign ) - 개인적 메모 작업물 보기 - 핀터레스트나 드리블( https://dribbble.com/ ), 노트폴리오, 비핸스 자격증 기출문제 ( https://www.comcbt.com/ )( https://quizeey.com/ )

디자인 베이스 ( https://designbase.co.kr/ ) 다 무료는 아님

 

웹페이지 만들기 구성 - 홈, 내부 3개. 총 페이지 4개 메인홈 ( https://codepen.io/YoungHeom/pen/NWVqPZO )  내부1 - 상품리스트 ( https://codepen.io/YoungHeom/pen/bGyddbm ) 내부2 ( https://codepen.io/YoungHeom/pen/ZENbWXE ) 내부3 - 로그인 페이지 ( https://codepen.io/YoungHeom/pen/LYopZPe ) 세일러 만년필( https://en.sailor.co.jp/ ), 칼라버스 잉크( https://colorverseink.co.kr/ ) 트위스비 ( https://www.twsbi.com/ ), 산리오 페이지 ( https://www.sanrio.co.jp/ ) 페이지만들 때 참고할 사이트 - ( https://sailors.co.kr/ ), ( https://www.thehyundai.com/ ) ※ () - 괄호 안에 쓴 건 안 들어가는 내용임

 

 

 

1) 페이지

피그마, 일러스트 이용하여 배치 연습( 디자인 ), 또는 코드로 작성

 

코드 쉽다면?

 디자인 완성 -> 코드 작성 배치

 

코드 짜기 어렵다면?

 디자인 완성, 디자인 완성

 간단 코드 연습

 

프론트, 웹디자인(편집 디자인), 웹퍼블리셔(코드)

 

왜 이런 배치를 했나?

코드는 어디에 배치할지만(구성만)

 

그리드를

일치성, 균형, 배치에 도움을 받기 위해서

배치를 못하면 그리드를 잡아보기(그리드를 어떻게 잡는데??? 크기를 몇으로 해야돼?!? 그리드 여백은??)

 

 

코쟁이(=코드쟁이)는

클래스 이름, 공통된 오브젝트에 이름

nth:child는 되도록 홀수만, 짝수만 제어할 때 사용하기

 

동일한 속성을 여러 클래스에서 작성하지 말 것

콘텐츠 안의 'box-1' 'box-2' 'box-3' 말고 한꺼번에 'box'

이 중에 하나만 제어하고 싶을 땐 id 설정하기

 

글자 3~5 이상 되지 않도록(아마도 클래스명 아이디명일 것임)

 

css

글자의 위계- 같은 계층은 같은 class 또는  h3

비슷한 속성은 한 줄에 쓰려고 하기

크기조절 가장 상위, 위치 설정은 크기 다음

 

ct > box > box-img 이렇게 만들었다가 나중에 ct box box-img 이렇게도 가능(대신 다른 콘텐츠랑 이름은 안 겹치게)

 

 

'.ct >.ct > div' > 'div>div>div'> 'id' > 'class'

자세할수록 우선순위로 스타일 적용됨

 

굳이 반응형 하려고하지 말기. 그냥 일반적인 크기로 사이즈 설정해서 만들기

 

css 스타일 우선순위

 

 

피그마 작업

 

 

강사님 메모 1. 페이지 코드는 거짓말을 하지 않는다. 디자인 많은 사이트를 봐라 디자인 (완성) 피그마, 일러스트 이용하여 배치 연습 코드로 작성 -> 디자인 완성 -> 코드 작성 배치  디자인 완성, 디자인 완성 간단 코드 연습 웹 관련 예전 한명이서 모든것들을 작업함. 웹디자인 (편집 디자인) 웹퍼블리셔 (코드) 디자인 왜 그렇게 배치를 했는지 웹페이지를 프로그램은 알아서 구성만 배치 그리드 정렬 일치성, 균형, 배치에 도움을 받기 위해서 많다고 좋은 것이 아니다. 가독성이 좋게 하기 위해서 배치 크기 색상 모든 것 맞춰야 한다. 배치를 하는데 너무 못해 그리드라도 잡아 놓고 배치해라 웹으로 구현하지 마라 일러스트, 피그마로 배치만 편안함, 일치성, 균형, 비례 코드짜시는 분들은 클래스 이름 공통된 오브젝트에 이름 아이디 혼자서 사용하는 것 동일한 속성을 여러 클래스에서 작성하지 말것 box  class=box id=box-center box 그룹 class 글자 3~5 이상 되지 않도록 궁서 5px 궁서 5px 두께 궁서 10px 글자의 위계 같은 계층은 같은 class 또는 H3 속성  크기조절 가장위에 위치 그다음 자식요소 ct > box > box-img > img 모든 박스 내가 편하게 짤수 ct  box  box-img  img 모든 박스 내가 편하게 짤수 우선순위 동일한 계층일때는 밑에가 우선(힘이 약함) 클래스 우선도 낮음 id가 우선도가 높음 box-img>img 자세히 사용한것이 우선도가 높다. 왼쪽     가운데    오른쪽 200px   100%    200px JS 다른형태로 사용하는 방식을 연습을 많이 해봐라 제공된 코드를 가지고 이것저것 사용해봐라 내것이 된다. .box1 .box2 .box3 [1,2,3] 정리노트 많이 사용하고 많이까먹는것 2달 밖에 안됨 https://notefolio.net/ 적어보면서 색다른 만들어보기 일반적인 것들을 만들어보기 A디자인 완성 페이지 만들어보면서(코드) 디자인 만든다 다른 배치 A-1, A-2, A-3, A-4 각각에 어떤 차이점이 있고 보여지는 이미지 형태의 느낌을 작성 또다른 A-5 배경의 색   빨강 전체적인 분위기  여러 웹사이트를 보고 특성을 비교 하고 디자인 적인 요소, 배치(코드)적인 요소 위치, 색상, 글자체 많이 쓰는 형태가 있다. 청색계통을 많이 버튼, 강조 회색을 많이 사용 불필요한것 설명을 작성하는데 핵심적인 단어가 제목 글자 크기 4px  2단계를 거친다. 동일한 % 작아지는 것이 좋다. 1000px 950px 900px 20px 16px 12px 정적인 요소 동적인 요소 X 움직이는것 3가지형태의 페이지 1. PC 2. 태블릿 3. 모바일  - 엡 연동되게 app 게임 웹 포트폴리오 왜 그곳에 어디에다 배치하면 더좋을것 같은데.

 

 

 

 

 

 

취업특강.zip

5.24MB

뭔지 집에서 봐보깅