0509 목 uiux 27일차
| 자바스크립트 수업페이지 ( https://codepen.io/hjyee/full/PogMVOP ) 강사님 수업페이지(html&css) ( https://codepen.io/hjyee/full/OJGrVYJ ) 기초 키보드 사용법 ( https://codepen.io/YoungHeom/pen/eYaOYEX ) 연산자 ( https://codepen.io/YoungHeom/pen/Rwmbxze ) 코드펜 사용법 ( https://codepen.io/YoungHeom/pen/gOJOWgE ) 무료 강의 ( https://programmers.co.kr/ ) |
페이지 총 4개(홈 1개, 내부 페이지 3개)
1) 테마 주제
내가 원하는 느낌과 색감- 파스텔톤(채도 낮음), 귀여움 / 깔끔함, 선과 도형 위주, 채도 높음
내가 관심 있는 것들 - 만년필, 스티커, 산리오 캐릭터, 노트북, 자기계발 책
세일러 만년필( https://en.sailor.co.jp/ ), 칼라버스 잉크( https://colorverseink.co.kr/ )
트위스비 ( https://www.twsbi.com/ ), 산리오 페이지 ( https://www.sanrio.co.jp/ )
최종: 만년필&잉크 홈페이지
연령: 고등학생 ~ 20대 중반
특징: 문구류를 좋아함, 예술적인 성향, 필기를 취미로 함
참고 페이지 ( https://sailors.co.kr/ )
2) 주제를 선정한 이유
테마주제는 만년필에 관련된 홈페이지입니다.
만년필과 잉크를 주제로 한 이유는 필기 도구에 대한 관심과 열정 때문입니다.
예전부터 만년필과 잉크에 대한 제품을 찾아보며 만년필에 대해 공부해왔습니다.
요즘은 만년필을 좋아하는 매니아뿐만 아니라 문구류에 관심이 있는 소비자, 다이어리 꾸미기를 취미로 즐기는 소비자, 만년필에 입문하고자 하는 소비자들의 취향에 맞는 다양한 디자인의 만년필이 많이 나오기 때문에 이러한 점을 고려하여 웹페이지를 만들면 재미있을 것 같아서 해당 주제를 선정하게 되었습니다.
- 가장 전달하고 싶은 메인 3가지 정리
만년필에 대한 간단한 소개, 맛보기 이미지(만년필&잉크)
10 ~ 20대가 좋아하는 디자인으로 매니아층만 만년필을 쓴다는 편견을 버리게 함
예술 관련 종사자에도 관심이 가게끔 하는 만년필 잉크들, 노트 소개
- 색상
메인 컬러 차분한 베이지 계열, 완전 베이지톤만 있으면 너무 가을 같은 계절감이 느껴져서 약간의 귀여움을 더한 차분한 파스텔컬러 분홍색 또는 세이지그린 같은 색을 추가하는 게 좋을 듯함
베이지톤 이런(첫 번째 사진) 느낌으로, 채도 낮은 컬러들 4~5가지 이내로 사용(블루, 라벤더 색상은 아님. 좀 쨍함. 분홍은 블러쉬 색상보다 채도 낮고 회끼 추가)
- 서체
강조하고 싶은 것은 볼드체와 큰 글씨, 페이지를 이용하는 사람에게 잘 보일만 한 위치에 핵심 키워드 위치할 것
주로 위에서 아래로 보니까 콘텐츠들 가운데정렬, 가장 위에 위치하면 되지 않을까?
강조하고 싶은 텍스트는 명도 어둡게 조절
☆ 도형이나 선을 이용하여 심플한 느낌을 주고 싶다.☆
- 페이지 별로 어떤 내용을 할 것인지
첫 번째)
만년필에 대한 간단한 소개를 더한 브랜드 소개 및 상품 이미지 맛보기 / 브랜드 슬로건 같은 거나 로고 소개 등 아주 간략히(길면 사람들이 안 봄) - 브랜드 소개를 통해 소비자에게 어떠한 이미지를 주겠다.
(일단 다 넣어보고 과하면 뺄 것)
두 번째 ) 입문자나 라이트 유저들에게 바로 보일만 한 상품들 바로가기
10 ~ 20대가 좋아하는 디자인의 만년필들, 예쁜 색감의 잉크
매니아층이 좋아할 만한 만년필들.(or 잉크)
세 번째)
네 번째)
색감이 예쁜 잉크, 펄이 예쁜 잉크, 예술 관련 종사자에도 관심이 가게끔 하는 만년필 잉크들, 노트 소개
베이지톤 관련 색상들
와이어프레임 스케치
웹
구구단 8단 출력(dan과 i 변수 사용)& while 반복문
( https://codepen.io/YoungHeom/pen/KKLKwQj )
| - 자바스크립트의 4대 구성요소 - 조건문 - if - switch(안배움) - 반복문 - while - for - do while(안배움) - 변수 - 값(데이터, 자료) - 자료형 - 실행할 수 없는 자료(데이터) - 숫자(number) - 문장(string) - 논리(boolean) - 객체(object) - 객체는 일종의 버스이다. - 버스에는 승객을 계속 추가할 수 있다. - 복잡한 자료를 만들때 사용된다. - `[]`, `.` 문법으로 객체 내부의 변수(좌석)을 관리한다. - 실행할 수 있는 자료(데이터) - 함수(function) - 지역변수 - 함수가 실행될 때만 잠깐 생겼다가 사라지는(찰나동안에만 존재한다.) 하루살이 변수 - 해당 변수의 활동범위는 함수를 벗어날 수 없다. - 매개변수 - 지역변수의 한 종류로 함수의 데이터 입구 역할을 한다. - return - 함수의 데이터 출구 역할을 한다. 즉 변신한다. |
오늘의 정보~★
"+="는 덧셈 후 할당 연산자이다.
while문 3가지 조건
1) 시작값 반드시!
2) 조건부 / 끝값
3) 보폭
'UIUX(03.28~10.02)' 카테고리의 다른 글
| 0513 uiux 29일차 (0) | 2024.05.13 |
|---|---|
| 0510 uiux 28일차 (0) | 2024.05.10 |
| 0508 uiux 26일차(웹사이트제작, if조건문, else, 연산자) (0) | 2024.05.08 |
| 0507 uiux 25일차(자바스크립트 var, let, const) (0) | 2024.05.07 |
| 0430 uiux 22일차 (0) | 2024.04.30 |