카테고리 없음

웹 3일차

퍼린이 2024. 7. 19. 15:51

 

 

니즈

어플의 중심부 (뉴스위젯

참고하고 싶은 어플

 

------------------------------------------------------

사람 성격 취향에 따라 본인에게 맞는경험을 하고 싶은 사람 ( taget )

 

I / E   사람 많은 장소 /없는 장소
 N / S    낭만적인 장소 /직관적인 장소 
 F / T   감성적인 장소 /  생각 할수 있는 장소
 P / J     계획 짜기 힘든 사람 / 계획 짜기 쉬운 사람
------ai 맞춤 여행 계획 세워주기 ( 계획짜기 어려운 사람 가이드 라인) -장소 선택

 

 

- 도전적인/ 경험적인 이색 관광지 제휴를 통해 
   고객에게 도전정신과 거기에 대한 인센티브 제공

- 제휴 할인 (여행비 감소 절약) / 홍보

- 관련 지역 상품 . 특별한 상품 등 소개

------------

* 사용자의 일정 및 취미 , 성격등을 고려해 ai 맞춤 일정을 추천해주는 서비스

*  ai 알고리즘 에 (관심사 , mbti 등을) 반영하여 다양한 경험을 제공할 수 있도록 프로그래밍

*  여러 도전적인 컨탠츠( 익스트림 스포츠 , 미션 등)을 제공하여 이용자에게 도전적인 기회 제공 및 도전정신 불어옴

*  관련 지역 과 제휴하여 특산품 및 다양한 물품 소개및 조금더 싼 가격에 소비자에게 제공

*

 

(*)      초기 설정화면 개인정보 입력 화면 (mbti 포함 ) 

(*)      mbti 별 선택창 및 캐릭터 제작 필요 

(*)      숙소 예약 창 구현 필요

(*)      ai 지도 동선 

(*)      여행지별 리뷰 & 게시판

(*)      항공권 예약 창 구현 필요

(*)      미션 창 구현 ( 다양한 미션 & 익스트림 스포츠 등) 구현 

 

 

 

----------------------------------------------------------------------------------------------------------

 

2교시 

블록 : 박스 너비, 높이 위에서 아래로 채우기

인라인 : 글자 좌우

인라인 - 블록 : 좌우 너비 높이 지정

display : 변경이 가능 블록 화면에 표시 되징 않는다.

flex : 박스 

내부에 있는 자식요소를 아이템 배치 

효율적으로 정렬

1줄 

 

gird : 내부에 있는 자식요소를 아이템 배치

효율적으로 정렬

2차원    3*4

 

inline - flex 

내부 자식요소가 인라인처럼 배치

많이 쓰는데, 어려운 것들  정리 중요

 

border

테두리 영역

 

크기 종류 색

 

보더의 색

 

거의 유사 

1개로 사용 모두

2개 상하/좌우

3개 상허

 

박스모델 가

사각형 형태로 태그들이 ㅕㅇㅇ약 차지

 

콘챈츠 영역

실제 콘텐츠를 호함

너비와 높이가 기본

 

안쪽 여백

 

바깥쪽 여백

Margin

 

경계선 ~ 콘텐츠 영역 

박스의 실제크기

바깥쪽 여백은 간격

 

박스모델 

실제크기(콘텐츠, 안쪽 여백, 경계선)

모델 변경

 

box - sizing

요소의 너비와 높이를 계산

 

content - box 기본값 

border-box

콘텐츠, 안쪽 여백, 테두리 포함

 

웹 페이지 border   X 

 

image 기본형태 

background-image: url("https://picsum.photos/id/12/100/100");
        background-repeat: no-repeat;
        background-size: cover;

반복속성을 가지고 있다

repect (반복)

no-repect (반복 안함)

 

line - hight ( 줄당 간격

 

vertical-align

기준을 잡아줌 

 

float 문서의 일반적 흐름에서 제외 . 자신을 포함하는 컨테이너 왼쪽 오른쪽 배치

 

문서의 흐름 

여러 요소를 만들면 먼저 만든것부터 차레대로 배치

 

position

문서상 요소를 배치 방법을 정의

position 있으면 

top, bottom,right,left

위치 변경 가능

 

static 정적 : 기본값 일반 문서 흐름에 따라 배치

 

rlelative

상대적 문서 흐름에 따라 배치 상하 좌우 위치 값에 따라서 offset 적용

]

abspulte 절대적 흐름에서 제거 

가장 가까운 position 속성을 지정해준 곳으로

 

fixed 결정된 

지정 위치 고정 / 흐름제거

 

absolute 

부모의 postion 속성이 없으면 

브라우저 화면 기준으로 

있으면 그쪽 기준으로 이동

 

position 속성 
꼭 필요 할때만 사용해야 한다.